More than 3 years have passed since last update.

忙しい人向けVue.jsプロジェクト作成

Last updated at 2020-03-29Posted at 2020-03-28

開発環境

Visual Studio Code (Onlineでも良い)
拡張機能 Vetur（便利です。）

プロジェクト作成

>vue create <project名>

⇒必要なオプションを選択する(今回はTypeScriptや画面遷移させるRouter等を追加)
※追記 tsc -v でバージョン見るとなぜか古いが、内部的には入ってるっぽい。

>C:\Users\<username>>npm ls -g typescript
C:\Users\<username>\AppData\Roaming\npm
`-- @vue/cli@4.2.3
  `-- @vue/cli-ui@4.2.3
    `-- typescript@3.7.5

ここで内部的にnpmからモジュール持ってきたり、設定したり全部自動でやってくれている。（テストに出ます！）

開発サーバーの起動(出てきたURLに飛べばVueの初期画面が表示されているはずです)

>npm run serve

本番用ビルド

>npm run build

やってくれること
　・npmモジュールの導入
　・設定ファイル等の追加
　・Vueインスタンスへのロードetc

例えば HTTP クライアントであるaxiosの導入(APIが作れる)
これだけでasyncとかawaitとかもう使える

>vue add axios

UIをカッコよくしたい場合に使うライブラリ
　・Vuetify - マテリアルデザイン、コンポーネントが多い。
　・Element - 管理画面向けコンポーネントが豊富
　・Buefy - BulmaというCSSフレームワークがベースで軽い
　・Onsen UI - モバイルアプリ向け