【Vue.js】Vue CLIでSPAプロジェクトを作成する
Vue CLI 3 を使ってVueプロジェクトを作成する手順
Vue CLIとは？
Vue CLIはVue.jsの開発環境構築を容易にするための公式が提供するコマンドラインツールです。
Vue CLIを使うことですぐにVue.jsのプロジェクトをセットアップして開発を始めることが出来ます。
Vue CLIでプロジェクトを作る
Vue CLIを使うためにはまず、npmかyarnでパッケージをインストールする必要があります。
加えて、Node.jsのバージョンが8.9以降を要求されますので注意してください。
Vue CLIのインストール
2019/6/8現在ののVue CLIのバージョンは3以上となっています。
バージョン1、2系をグローバルにインストールしている場合は、パッケージが衝突するためアンインストールする必要があります。
Warning regarding Previous Versions
The package name changed from vue-cli to @vue/cli. If you have the previous >vue-cli (1.x or 2.x) package installed globally, you need to uninstall it first with >npm uninstall vue-cli -g or yarn global remove vue-cli.
アンインストールコマンド↓
$ npm uninstall vue-cli -g # yarnの場合↓ $ yarn global remove vue-cli
最新のVue CLI 3系のパッケージのインストールするコマンドは↓です。
$ npm install -g @vue/cli # yarnの場合↓ $ yarn global add @vue/cli
バージョン情報を出力して正しければインストールが成功しています。
$ vue --version 3.7.0
Vue CLIでプロジェクトを構築する
実際にVue CLIを使ってプロジェクトを作成します。
$ vue create <project-name>
↓プリセットを使うか、個別に設定をして作成するかを選択します。
（上下キーで変更、エンターで選択）
Vue CLI v3.7.0 ? Please pick a preset: (Use arrow keys) > default (babel, eslint) Manually select features
↓"Manually select features"で作成してみます。
この画面ではプロジェクトに必要なものを適宜選択します。
（スペースキーで選択）
Vue CLI v3.7.0 ? 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) >(*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
↓SPAでルーティングを制御するRouterと状態管理を行うVuex、CSS プリプロセッサを追加で選択します。
Vue CLI v3.7.0 ? Please pick a preset: Manually select features ? Check the features needed for your project: (*) Babel ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router (*) Vuex >(*) CSS Pre-processors (*) Linter / Formatter ( ) Unit Testing ( ) E2E Testing
↓Routerの設定でhistoryモードを使うかどうか聞かれるのでyを入力してエンター。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
↓CSSプリプロセッサ選択します（Sass/SCSS(with dart-sass)）
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): > Sass/SCSS (with dart-sass) Sass/SCSS (with node-sass) Less Stylus
↓linterの設定。お好みですが、今回は一番上のエラー防止のみを選択。
? Pick a linter / formatter config: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier
↓Linterの実行タイミングを選択します。
（ファイル保存時 or gitコミット時かです）
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection) >(*) Lint on save ( ) Lint and fix on commit
↓各種設定ファイルを別々にするか、package.jsonにまとめるかを選択します。
今回は別々に管理するため"In dedicated config files"を選択します。
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) > In dedicated config files In package.json
↓今回の設定をプリセットとして登録するかどうか選択します。
登録不要ならnを入力してエンター。
? Save this as a preset for future projects? (y/N) n
これで、Vue CLIによるSPAプロジェクトが作成されます！
🎉 Successfully created project vue-sample. 👉 Get started with the following commands: $ cd vue-sample $ npm run serve
起動
プロジェクトの作成が完了したら、表示されたコマンドを実行してみます。
$ cd vue-sample $ npm run serve
http://localhost:8080/へアクセスするとサンプルで作成されたページが表示されます。
HomeとAboutの2ページしかありませんが、SPAとなっています！
これであとは自由にSPAを構築することができます。
Vue UIを使う
コマンドラインが基本ですが、Vue CLIではGUIで操作できるツールが利用できます。
↓のコマンドでGUIツールを使用できます。
$ vue ui 🚀 Starting GUI... 🌠 Ready on http://localhost:8000
実行後、http://localhost:8000/project/selectが自動で開かれてVueのGUIツールを利用できます。
インポートタブから今作成した、vueプロジェクトをインポート可能です。
プロジェクトのページでは、インストール済みのプラグインや、プラグインの依存関係がGUIで確認可能です。
また、タスクページではpackage.jsonのscriptsに記載されたタスクが一覧で確認でき、画面から実行も可能となっており、なかなかに便利です。
プラグインをインストールする
Vue UIからプラグインも検索&インストール可能です。
たとえば、VueのUIフレームワークであるVuetifyを入れたい場合、プロジェクトプラグインページの"プラグインを追加する"から追加可能です。
ちなみにVuetifyを入れるとデフォルトでは、既存のvueファイルをVuetifyのコンポーネントが反映されたものに書き換えるため、トップページが変わります。
ページ上部にtoolbar等がすでに使われています↓
Vuetifyついて↓
おわりに
Vue CLIを使うと簡単に、セットアップされた状態でVue SPAプロジェクトを構築することができます。
また、GUIツールも備わっており、はじめてでもとっかかりやすいと思います。
Vue.js自体のリンクも貼っておきます↓
