Vue CLI から学ぶセットアップ

Vue のプロジェクトを作成する際に、何を選んだら良いのか分からない。あとで設定を変えたいときにどうしたら分からない。を解消するため、色々設定を変えて作ることで調べてみた。Vue CLI のアップデートにより変わっていくかもしれないので注意。

• Vue CLI (リポジトリ)

基本

Vue CLI をインストールする。

$ npm install -g @vue/cli

CUI でプロジェクトを作成する場合

$ vue create (project-name)

GUI でプロジェクトを作成する場合

$ vue ui

Preset & Options

Vue CLI でプロジェクトを作成する際の選択肢およびデフォルトプリセット設定の一覧。

	Selection	Options
Package manager	●npm ○yarn ○pnpm
Vue version	●2 ○3
Babel	☑Use Babel
TypeScript	□Use TypeScript	□Use class-style component syntax □Use Babel alongside TypeScript
Progressive Web App (PWA) Support	□PWA Support
Router	□Use Router	□Use history mode
Vuex	□Use Vuex
CSS Pre-processors	●N/A ○Sass/SCSS (with dart-sass) ○Sass/SCSS (with node-sass) ○Less ○Stylus
Linter / Formatter	○N/A ●ESLint with prevention only ○ESLint + Airbnb config ○ESLint + Standard config ○ESLint + Pretieer	☑Lint on save □Lint and fix on commit
Unit Testing	●N/A ○Mocha + Chai ○Jest
E2E Testing	●N/A ○Cypress (Chrome only) ○Nightwatch (WebDrvier-based) ○WebdriverIO (WebDriver/DevTools based)
Use config files	□Use config files

Package Manager

以下から選択できる。CLI の場合は vue create --packageManager オプションで指定する。 package.json は共通で、おそらくロックファイルが異なるだけ。

• npm
  • package-lock.json が生成される。
• yarn (デフォルト)
  • yarn.lock が生成される。
• pnpm
  • pnpm-lock.yaml が生成される。

乗り換える場合はそれぞれのツールで npm|yarn|pnpm install してロックファイルを作り直せば良い(はず)。

TypeScript

TypeScript > Use class-style component syntax

yarn add vue-class-component

Vue コンポーネント内は以下のように書き換える。

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
   components: {
     HelloWorld,
   },
})
export default class Home extends Vue {}
</script>

tsconfig.json

"experimentalDecorators": true,

Progressive Web App (PWA) Support

手動で追加する場合

PWA 用のパッケージをインストールする。

yarn add register-service-worker
yarn add --dev @vue/cli-plugin-pwa

src/main.js に以下を追加する。

 import { createApp } from 'vue'
 import App from './App.vue'
+import './registerServiceWorker'

 createApp(App).mount('#app')

Use config files

有効にすると、以下の設定ファイルが生成される。無効にした場合は、同様の設定が package.json に記述される。

• .eslintrc.js