Vue CLIでVue3のプロジェクトを作るメモ

はじめに

これは個人的なメモです。

環境

$ vue -V
@vue/cli 4.5.9
$ node -v
v14.13.1
$ npm -v
6.14.8

メモ

プロジェクト作成

vue create my-project

my-projectは、プロジェクト名

プリセットの選択

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
❯ Manually select features

TypeScriptを使いたいので、Manually select featuresを選択。

使いたいパッケージを選択

? Check the features needed for your project:
❯◉ Choose Vue version
 ◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
 ◯ E2E Testing

カーソルで移動して、スペースで選択する。エンターで次の質問へ。
デフォルトで選択されているのは、以下の3つ。

• Choose Vue version
• Babel
• Linter / Formatter

使うかわからないけど、VuexとRouterも入れておく。
TDDを実践したいので、Unit Testingも入れておく。（フレームワークは後で選べる）

Vueのバージョンを選択する

? Choose a version of Vue.js that you want to start the project with (Use arrow
keys)
  2.x
❯ 3.x (Preview)

class-style component

? Use class-style component syntax? (y/N)

yes -> no

（2020/12/14 追記）
vue-class-componentはvue3のRFCから外され、Composition APIがRFCになっているらしい。
だからデフォルトはNだったのか...
https://qiita.com/ryo2132/items/4d43209ea89ad1297426

Babel

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? (Y/n)

yes

History modeを使うかどうか

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

yes

LinterとFormatterを選ぶ

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier
  TSLint (deprecated)

この前ESLint + Pretterを勉強したので選択。

Linterをいつ動かすか

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

保存したとき

UTのフレームワーク

? Pick a unit testing solution:
  Mocha + Chai
❯ Jest

どっちでも良かったが、勉強中のJestで。

BabelとESLintの設定ファイルをどこに置くか（どこに書くか）

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json

独立させたい

今までの設定を保存するか

? Save this as a preset for future projects? (y/N)

やり直したくなるかもしれないのでNO

おわり

実行してみる。

npm run serve

localhost:8080にアクセス。