前提
- npmがインストールされている
Vueインストール手順
- Vue CLIのバージョン確認
バージョンが配列形式で出力される。
npm info vue/cli versions- Vue CLIをインストール
ここでは最新バージョンをインストールすることにした。
npm install -g @vue/cli- インストールするバージョンを確認
npm show @vue/cli versionVueアプリケーション初期構築手順
- Vueアプリケーション作成
vue create アプリケーション- デフォルトインストールとマニュアルインストール
選択肢の内上２つ（接頭辞Defaultのもの）はバージョン３か２でインストールしてくれます。”[Vue バージョン] babel, eslint)”とあるのでVueとbabel、eslintがインストールされるんだろうな。
ここではManually select featuresを選択する。
? Please pick a preset:
> Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features- パッケージをインストールするチェックリスト
Babel…次の世代のJavaScriptの標準機能をブラウザのサポートを待たずに使えるようにするライブラリ。
TypeScript…JavaScriptでは有耶無耶な型しっかり定義させるライブラリ。
PWA(Progressive Web Apps)…モバイル向けWebサイトをスマートフォン向けアプリのように使えるようにする仕組み。（そんなのあったんだ）
Router…Vueで作成するページのルーティング用のライブラリ。
Vuex…Vue.js アプリケーションのための 状態管理パターン + ライブラリ。
CSS Pre-processors…Sassとかを選択できる。他にLess,SCSS,Stylusがあるらしい。
Linter / Formatter…コードに問題点がないかを確認する性的解析ツール
Unit Testing…Javascriptのユニットテストを行うライブラリ。（そんなのあったんだ）
E2E Testing…システム全体を通したテストが行えるライブラリ。（そんなのあったんだ）
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing- Linter / Formatterの洗濯し
途中でVueのバージョンと、Routerのモードを聞かれたのでバージョン３とヒストリーモードを選択した。
error prevention only…ESLintを最低限有効に設定した状態
Airbnb config…Airbnbという人が作ったみたい。
Standard config…まぁ標準設定なんだろう。
Prettier…Prettierも有効にした状態。
※Prettier：HTMLやVue.js等各種ファイル、フレームワークの記法に対応したフォーマットルールが適用可能なプラグイン
ここではESLint + Prettierにしてみた。
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier- 構文チェックのタイミング
ファイル保存時かgitのコミット時か、なのだろう。
ここではファイル保存時にした。
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
( ) Lint and fix on commit- 各種設定の保存場所
Babel, ESLintなどの設定をどこに書くか。
各種設定ファイルを設けるか、package.jsonにまとめるか。
まとめられると調べづらいかと思って各種設定ファイルにする。
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json- 設定を今後使いまわすか
ここまでの設定内容を今後使いまわすかどうか。
使いまわす必要はないしまだよく分かってないので、使いまわさないことにする。
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)これでとりあえずプロジェクトが完了。