Posted at

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


はじめに

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

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