@vue/cli を初めて触ったのでメモ

# はじめに

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

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

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

# @vue/cli による Project 生成

`vue create project-name`

## default の場合

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

## Manually select features の場合

```bash
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` でデフォルト連打をしたところ、
以下のようにプロジェクト構成に差分があった。

```bash
$ 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 のプロジェクト構成は、
以下のように設定すると同じものになりそうでした。

```bash
$ 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
```

```diff
$ 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 の各種設定

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

```bash
$ 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** を有効にした場合に聞かれます。

差分はこんな感じ

```diff
$ 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** を有効にした場合に聞かれます。

差分はこんな感じ

```diff
$ 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** を有効にした場合に聞かれます。

```diff
$ 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 対応も簡単にできることがわかった。

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