LoginSignup
10
9

More than 5 years have passed since last update.

@chibi929inマッシュ＆ルーム

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

Posted at

はじめに

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

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

10
9
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
9