Vue-CLI 4を使用したJavaScript開発環境構築(プロトタイプ版とプロジェクト版)

はじめに

この記事は JavaScript Advent Calendar 2019の22日目の記事になります。

こんばんは、きゅ〜ぶです。
少し前にVue CLI4がリリースされましたね。
Vue CLI4の特徴や3からの変更点などは以下が比較的分かりやすいと思います。
Vue.js CLI 4 Released

ローカル環境でJavaScriptを触りたかったのでせっかくなので新しくなったVue-CLI4で環境構築をしようと思います。
基本的には公式リファレンスに沿ってやっていきます。

↓Vue-CLI4のソースコード
https://github.com/vuejs/vue-cli/releases

2019年12月現在最新バージョンは、v.4.1.1です。

インストール

公式ドキュメントにも書かれているのですが、

Vue CLIインストールには、前提としてNode.jsのバージョン8.9以上(8.11.0以降を推奨）

が必要となります。
Node.jsが入ってない人はNode.jsからインストールしましょう。

以下記事が分かりやすいので参考にしてみてください。
MacにNode.jsをインストール

Vue-CLIインストール

プロトタイプ版

公式リファレンスのコマンドに沿って入力していきます。
vue serveとvue buildで簡単なプロトタイプが作れます。
ちょっと処理を確認したいとかそういったときに便利です。

$ npm install -g @vue/cli
$ vue --version
@vue/cli 4.1.1
$ npm install -g @vue/cli-service-global
$ touch App.vue

App.vue

<template>                                                                                                                                                                                              
　<h1>Hello!</h1>
</template>

$ vue serve
 INFO  Starting development server...
98% after emitting

 DONE  Compiled successfully in 1653ms                                                                                                                                                              11:18:54


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://**.**.***.**:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

画面にもう表示できました！

$ vue build
⠧  Building for production...

 DONE  Compiled successfully in 2432ms                                                                                                                                                              11:42:08

  File                                 Size               Gzipped

  dist/js/chunk-vendors.548bada6.js    65.55 KiB          23.58 KiB
  dist/js/app.e2adb5ac.js              1.78 KiB           0.89 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

簡単なJavaScriptを軽く動かしたいならここまでやってあれば問題ないです！
Vue.jsで本格的に開発したいなら以下のようなプロジェクトを作成することもできます。

プロジェクト版

Vue-CLI4でプロジェクト作成

$ vue create hello-world
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? No
Vue CLI v4.1.1
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 
? 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
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel, Linter
? Pick a linter / formatter config: 
❯ 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)
❯◉ Lint on save
 ◯ Lint and fix on commit
? 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?

ざっくりこんな感じで作っていきます。

①使用する機能の選択

BabelとESLintが入ってるデフォルトを選択するかマニュアルで必要な機能を選択した物を使うかの選択になります。

○デフォルト

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

○マニュアル

? 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

②ESLintプリセットの選択

・ESLint with error prevention only(エラー防止のみ)
・ESLint + Airbnb config（Airbnb設定）
・ESLint + Standard config(標準設定)
・ESLint + Prettier（ESLintとPrettierの併用)

? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

③追加のLint機能の選択

・Lint on save(保存時にLint実行)
・Lint and fix on commit(コミット時にLint実行)

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

④BabelやESLintなどの設定の配置箇所の選択

・In dedicated config files(専用の設定ファイル内)
・In package.json(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)

```terminal
? Save preset as: 

ここで設定しておくと次以降、vue createでプロジェクトを作る際、また新しく設定する必要がなくなり、設定したプリセットをそのまま使用することができます。

以下の画面がターミナルで表示されていれば、無事インストール完了となります🙌

🎉  Successfully created project test.
👉  Get started with the following commands:

 $ cd hello-world
 $ npm run serve

サーバ起動

 $ cd hello-world
 $ npm run serve
 DONE  Compiled successfully in 1222ms                                  23:48:57


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://xxx.xxx.x.xxx:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

以下画面が表示されれば成功です🙌

では、楽しいJavaScript生活を。。。