過去記事「vue-cliの導入から新規でVue.jsのプロジェクト作成とビルド方法まとめ」ではVue CLIを使ったVue.jsのプロジェクト作成の流れをまとめていましたが、Vue CLIのバージョンが2系の内容になっていました。この記事を作成している現在では、Vue CLIのバージョンが3系がメジャーであるということで、今回は2系から3系への移行と、バージョン3系での新規プロジェクト作成の流れもまとめていきたいと思います。  

vue-cli 3系への移行および環境構築

まず、すでにグローバルにインストールされているバージョン2系のvue-cliを下記コマンドでアンインストールしていきます。そして、再びvue-cliをグローバルにインストールするのですが、3系ではパッケージ名が「@vue/cli」となっているので、それでインストールしていきます。

$ npm uninstall -g vue-cli
$ npm install -g @vue/cli

+ @vue/cli@3.5.0
added 748 packages from 522 contributors in 25.322s

  インストールが完了したら、念の為バージョンを確認して3系の表記が出ていればOKです。引き続いて新規のVue.jsプロジェクトを作成していきます。

$ vue --version
3.5.0

  2系と同じく、まずはプロジェクトディレクトリまで移動し、下記コマンドでプロジェクトを作成します。コマンドが「create」に変わっている点に注意します。そしてプロジェクト名を指定します。

$ cd プロジェクトディレクトリ
$ vue create [PROJECT_NAME]

  例としては下記のようにプロジェクト名に任意の名前をつけておきます。

$ vue create vue_sample

  2系の時のように初期設定を進めていきます。まずは接続方法の確認、そのまま「Y」で先に進めていきます。

? Your connection to the default yarn registry seems to be slow.
Use https://registry.npm.taobao.org for faster installation?

  Vueプロジェクトのデフォルト設定が続きます、まずはプリセットのパッケージを選択、デフォルトではbabelとESlintが入る設定で、手動にするといろんなパッケージを選択できます。

? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features

  手動での選択をすると、対象のパッケージがリストで表示されるので、必要に合わせてチェックを入れていきます。スペースキーで項目にチェックが入ります。3系からはTypeScriptやSassなどのいろんな拡張機能が追加されているので項目も増えています。

? 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

  ケースに応じて下記の質問が続きます。まずはクラス属性で記述するかどうかの確認です。必要に応じて「Y」「n」で選択します。

? Use class-style component syntax?

  自動検出されたポリフィルに対して、TypeScriptと合わせてbabelを使用するかの確認です。基本的にはYで進めていきます。

? Use Babel alongside TypeScript for auto-detected polyfills?

  Vue Routerのヒストリーモードを採用するかの確認です。基本的にはYで進めていきます。

? Use history mode for router? (Requires proper server setup for index fallback in production)

  CSSのプリプロフェッサーにどれを使うかの確認です。好みに合わせて選択します。ただ、node-sassを使う場合にはnode.jsに依存するので注意が必要です。

? 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の設定を行います、TypeScriptを使用する場合にはTSLintを選択します。そうでない場合にはESLintのものを選択しておきます。

? Pick a linter / formatter config:
> TSLint
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

  Lintを実行するタイミングの追加設定です。保存時の実行とコミット時の実行を選択できます。両方ともチェックを入れておくことも可能です。

? Pick additional lint features:
>○ Lint on save
 ○ Lint and fix on commit

  単体テストツールの設定です、必要に応じて設定します。

? Pick a unit testing solution:
  Mocha + Chai
> Jest

  続いてE2Eテストツールの設定です、こちらも必要に応じて設定します。

? Pick a E2E testing solution:
  Cypress (Chrome only)
> Nightwatch (Selenium-based)

  各種設定の内容をどのファイルで管理するかの選択です。こちらも必要に合わせて設定します。

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
  In dedicated config files
> In package.json

  これらの設定をプリセットとして保存するかの確認です。こちらも必要に合わせて選択します。

? Save this as a preset for future projects?

  パッケージマネージャーの選択、yarnを選択してOKです。

? Pick the package manager to use when installing dependencies:
> Use Yarn
  Use NPM

  ほどなくしてインストールとセットアップが始まります。完了までしばらく待ちましょう。終了するとローカルホストで動作確認できる開発用のコマンドが表示されます。

Installing CLI plugins. This might take a while...

〜 インストール＆セットアップ 〜

Successfully created project [PROJECT_NAME].
Get started with the following commands:
 $ cd [PROJECT_NAME]
 $ yarn serve

  これでローカルホストで確認できる環境が出来上がっていますので、表示されていた下記コマンドを実行します。そのままローカルサーバーの起動が始まり、表示確認用のURLが出ますのでブラウザで確認することができます。

$ cd [PROJECT_NAME]
$ yarn serve

INFO Starting development server...

〜 ローカルサーバー起動 〜

Compiled successfully in 3090ms
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.11.4:8080/
Note that the development build is not optimized.
To create a production build, run yarn build.

  2系と同じく、http://localhost:8080/へアクセスすると下記の画面が表示されます。  

Vue CLI3系でのプロジェクトの基本的なフォルダ構成

Vue CLIの2系と3系では微妙にフォルダ構成が異なっていますが、おおよそ同じようなイメージができるのではないでしょうか。これも2系と同じく、プロジェクトの設定により異なるのですが、デフォルトでは下記のようになっています。

PROJECT_ROOT
  ┣ .git
  ┣ node_modules
  ┣ public
    ┗ index.html
  ┣ src
    ┣ assets
    ┣ components
    ┣ views
    ┣ App.vue
    ┣ router.js
    ┣ store.js
    ┗ main.js
  ┣ tests
  ┣ babel.config.js
  ┗ yarn.lock

 

/.git	git用の設定ファイルなどが含まれる
/node_modules	各種モジュールが含まれる
/public	コンパイルしない静的ファイルが含まれる
/public/index.html	ベースとなるインデックスファイルのHTML
/src	ビルド前のソースコードフォルダ
/src/assets	画像やCSS、その他javascriptなどの静的ファイルが含まれる
/src/components	.vueの拡張子がついたコンポーネントファイルが含まれる
/src/views	ルーティングに対応する個別ページのコンポーネントファイルが含まれる
/src/App.vue	/public/index.htmlに出力されるvue側のインデックスファイル
/src/router.js	Vue-Routerのルーティング用の設定ファイル
/src/store.js	Vuexのステート管理用の設定ファイル
/src/main.js	各種ファイルをインポートして管理するエントリーポイント用ファイル
/tests	各種テストツール用設定ファイルが含まれる
/babel.config.js	ビルドの設定ファイル
/yarn.lock	Yarn経由でインストールしたプロジェクトのモジュールを管理するファイル

  上記以外にもpackage.jsonや.gitignoreなどの設定ファイルが含まれ、また、ビルドを行うとdistフォルダが生成され、その中にはコンパイルされたファイルが出力されます。  

本番環境へのデプロイ用にソースファイルをビルド

ソースコードをコンパイルするビルド作業を行なっていきます。下記コマンドを叩くだけでビルドが始まりますのでしばらく待ちます。

$ yarn build

Building for production...

〜 ソースファイルビルド 〜

DONE Build complete. The dist directory is ready to be deployed.
Done in 8.11s.

  同階層にあるdistフォルダが生成され、cssやimgなどの静的ファイルが入ったフォルダとindex.htmlのファイルが入っているのが確認できます。あとはそれら一式を本番用ウェブサーバーにアップロードすると完了です。  

---

  今後、Vue CLIも3系がメジャーになってくるのですが、プロジェクトによっては2系という場合もあるかと思います。使用するコマンドも微妙に異なっているので、そこだけ注意すれば移行のハードルも低いかと思います。より詳しくはこちらの書籍がとても参考になるのでオススメです！     （参考にさせて頂いたサイト） Vue CLI 3の変更点・使い方(vue-cliから@vue/cliにアップデート)