はじめに
Vue CLIのインストール〜プロジェクトの作成手順を記載します。
環境
Mac OS
Node.js（npm）のインストール
まずは、Node.jsとNodebrewをインストールしていきます。
Vue CLIのインストールには、npm（Node Package Manager）が必要です。
npmとは、Node.jsのパッケージ管理ツールで、Node.jsをインストールするとこでnpmも一緒にインストールされます。
Nodebrewは、Node.jsのバージョン管理ツールです。
- Nodebrewのインストール
$ brew install nodebrew
- インストール確認
$ nodebrew --version
nodebrew 1.0.1
Usage:
nodebrew help Show this message
nodebrew install <version> Download and install <version> (from binary)
nodebrew compile <version> Download and install <version> (from source)
nodebrew install-binary <version> Alias of `install` (For backword compatibility)
nodebrew uninstall <version> Uninstall <version>
nodebrew use <version> Use <version>
nodebrew list List installed versions
nodebrew ls Alias for `list`
nodebrew ls-remote List remote versions
nodebrew ls-all List remote and installed versions
nodebrew alias <key> <value> Set alias
nodebrew unalias <key> Remove alias
nodebrew clean <version> | all Remove source file
nodebrew selfupdate Update nodebrew
nodebrew migrate-package <version> Install global NPM packages contained in <version> to current version
nodebrew exec <version> -- <command> Execute <command> using specified <version>
Example:
# install
nodebrew install v8.9.4
# use a specific version number
nodebrew use v8.9.4
- Nodebrewで、Node.jsのインストール可能バージョン一覧を確認
$ nodebrew ls-remote
- 上記コマンドで表示されるバージョンを指定してインストールする場合
$ nodebrew install-binary v16.14.0
- 安定版をインストールする場合
$ nodebrew install-binary stable
- 最新版をインストールする場合
$ nodebrew install-binary latest
- Nodebrewで、使用する Node.jsのバージョンを有効化
$ nodebrew use v16.14.0
- 有効化されているNode.jsのバージョンを確認（currentに設定されているバージョン）
$ nodebrew ls
v14.15.1
v16.14.0
current: v16.14.0
- npmのバージョン確認
$ npm --version
Vue CLIのインストール
Node.js（npm）のインストールが完了したら、Vue CLIをインストールしていきます。
- Vue CLIのインストール
$ npm install -g @vue/cli
- バージョンが確認できればインストール完了
$ vue --version
@vue/cli 5.0.1
プロジェクトの作成
vue create を実行すると、対話形式で設定が始まります。
- プロジェクトの新規作成
$ vue create sample-project
- マニュアルでの設定を選択
Vue CLI v5.0.1
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
❯ Manually select features
- プロジェクトに必要な項目を選択
（未選択の項目については、プロジェクト作成後でも vue add コマンドで追加可能です）
? 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
- Vue.jsのバージョンを選択
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 3.x
2.x
- Vue Routerでhistoryモードを使用するか選択
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)
※Vue Routerとは
SPA構築において、ルーティング制御用のVue.js公式プラグインです。
※historyモードについて
- linterの設定
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, a
nd <enter> to proceed)
❯◉ Lint on save
◯ Lint and fix on commit
- ユニットテストのフレームワークを選択
? Pick a unit testing solution: (Use arrow keys)
❯ Jest
Mocha + Chai
- 各種設定をpackage.jsonで管理するか、個別ファイルで管理するか選択
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
In package.json
- 今回の設定内容を保存するか選択
? Save this as a preset for future projects? (y/N)
- プロジェクト作成完了
🎉 Successfully created project sample-project.
👉 Get started with the following commands:
$ cd sample-project
$ npm run serve
作成したプロジェクトのディレクトリで npm run serve を実行し、
ブラウザで http://localhost:8080/ にアクセスすると、以下のWelcome画面の表示を確認できます。
