はじめに

初めて Vue を使う私が、
@vue/cli でプロジェクトを作る際に、
設定がどう反映するのか気になったので調べてみた記録です。

Vue CLI 3 を使うと、
以下のようにとても簡単に Vue Project が作成できます。

またプリセットにて Manually select features を選択することで、
必要に応じてモジュールを追加することができます。

@vue/cli による Project 生成

vue create project-name

default の場合

$ vue create project-name
Vue CLI v3.3.0
? Please pick a preset: 
❯ default (babel, eslint) 
  Manually select features

Manually select features の場合

Vue CLI v3.3.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

Manually select features でデフォルト連打をしたところ、
以下のようにプロジェクト構成に差分があった。

$ tree default/ -L 1 -a
default/
├── .git
├── .gitignore
├── README.md
├── babel.config.js
├── node_modules/
├── package.json
├── public/
├── src/
└── yarn.lock

$ tree manually-default/ -L 1 -a
manually-default/
├── .browserslistrc
├── .eslintrc.js
├── .git
├── .gitignore
├── README.md
├── babel.config.js
├── node_modules
├── package.json
├── postcss.config.js
├── public
├── src
└── yarn.lock

気になってしまったので調べましたが、
default のプロジェクト構成は、
以下のように設定すると同じものになりそうでした。

$ vue create manually-default
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Linter
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

$ git diff
diff --git a/README.md b/README.md
index d16f5e9..9c44908 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# default
+# manually-default
 
 ## Project setup
diff --git a/package.json b/package.json
index ff3590d..e8e6689 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "default",
+  "name": "manually-default",
   "version": "0.1.0",
   "private": true,
   "scripts": {
diff --git a/public/index.html b/public/index.html
index 72cdfd6..0a0ce60 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,11 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>default</title>
+    <title>manually-default</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but manually-default doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

Manually select features の各種設定

とりあえず全ての機能にチェックを入れてみた。

$ vue create manually-all
Vue CLI v3.3.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: Lint on save, Lint and fix on commit
? Pick a unit testing solution: Jest
? Pick a E2E testing solution: Cypress
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

? Please pick a preset

どのプリセットを使うか
(最後の質問でプリセットを保存しているとここに表示される)

default (babel, eslint)
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

? Use class-style component syntax? (Y/n)

クラススタイルのコンポーネントを利用するかどうか
※ TypeScript を有効にした場合に聞かれます。

差分はこんな感じ

$ git diff ts-class-style-n/src/App.vue ts-class-style-y/src/App.vue
diff --git a/ts-class-style-n/src/App.vue b/ts-class-style-y/src/App.vue
index fd87bc1..7633616 100644
--- a/ts-class-style-n/src/App.vue
+++ b/ts-class-style-y/src/App.vue
@@ -6,15 +6,15 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { Component, Vue } from 'vue-property-decorator';
 import HelloWorld from './components/HelloWorld.vue';
 
-export default Vue.extend({
-  name: 'app',
+@Component({
   components: {
-    HelloWorld
-  }
-});
+    HelloWorld,
+  },
+})
+export default class App extends Vue {}
 </script>
 
 <style>

class 構文で書いているかどうかの違い？

? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)

自動検出されたポリフィルに Babel と TypeScript を使うかどうか
※ TypeScript を有効にした場合に聞かれます。

差分はこんな感じ

$ git diff polyfill-n/package.json polyfill-y/package.json
diff --git a/polyfill-n/package.json b/polyfill-y/package.json
index 110cc42..21977ce 100644
--- a/polyfill-n/package.json
+++ b/polyfill-y/package.json
@@ -12,6 +12,7 @@
     "vue-property-decorator": "^7.0.0"
   },
   "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.3.0",
     "@vue/cli-plugin-typescript": "^3.3.0",
     "@vue/cli-service": "^3.3.0",
     "typescript": "^3.0.0",

$ git diff polyfill-n/src/components/HelloWorld.vue polyfill-y/src/components/HelloWorld.vue
diff --git a/polyfill-n/src/components/HelloWorld.vue b/polyfill-y/src/components/HelloWorld.vue
index 7c31a87..0cf3cc3 100644
--- a/polyfill-n/src/components/HelloWorld.vue
+++ b/polyfill-y/src/components/HelloWorld.vue
@@ -8,6 +8,7 @@
     </p>
     <h3>Installed CLI Plugins</h3>
     <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
       <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
     </ul>
     <h3>Essential Links</h3>

$ git diff polyfill-n/tsconfig.json polyfill-y/tsconfig.json
diff --git a/polyfill-n/tsconfig.json b/polyfill-y/tsconfig.json
index 6858b1c..b57578e 100644
--- a/polyfill-n/tsconfig.json
+++ b/polyfill-y/tsconfig.json
@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "esnext",
     "module": "esnext",
     "strict": true,
     "jsx": "preserve",

詳しくはわからなかった。
とにかくポリフィルに何か影響するのだろう。

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

Router に履歴モードを使うかどうか
※ Router を有効にした場合に聞かれます。

$ git diff router-n/src/router.js router-y/src/router.js 
diff --git a/router-n/src/router.js b/router-y/src/router.js
index b30d769..694eb9f 100644
--- a/router-n/src/router.js
+++ b/router-y/src/router.js
@@ -5,6 +5,8 @@ import Home from './views/Home.vue'
 Vue.use(Router)
 
 export default new Router({
+  mode: 'history',
+  base: process.env.BASE_URL,
   routes: [
     {
       path: '/',

差分はこんな感じらしい。
ちなみに URL は以下のように変わった

n の場合:
- http://localhost:8080/#/
- http://localhost:8080/#/about
Y の場合:
- http://localhost:8080/
- http://localhost:8080/about

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):

CSS プリプロセッサに何を使うか
※ CSS Pre-processors を選択した場合に聞かれます。

Sass/SCSS
Less
Stylus

? Pick a linter / formatter config:

Linter / Formatter に何を使うか
※ Linter / Formatter を選択した場合に聞かれます。

TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier

? Pick additional lint features:

Lint をかけるタイミングをどうするか
※ Linter / Formatter を選択した場合に聞かれます。

◯ Lint on save
◯ Lint and fix on commit

? Pick a unit testing solution:

Unit Test のフレームワークに何を使うか
※ Unit Testing を選択した場合に聞かれます。

Mocha + Chai
Jest

? Pick a E2E testing solution:

E2E Test のフレームワークに何を使うか
※ E2E Testing を選択した場合に聞かれます。

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? (y/N)

このプリセットを保存するかどうか

まとめ

Vue CLI を使うと簡単にプロジェクトが作れて、
TypeScript 対応も簡単にできることがわかった。

また、各種フレームワークや機能も簡単に設定できることがわかった。