Go + Vue.js + Docker でSPAを作るまで - 第2章 Vue CLI でアプリケーション開発環境を準備する(TypeScript, Stylus使用) -

Vue CLIでプロジェクトを作成(アプリケーション開発環境を準備する)にはサブコマンドの createを使用する。
※ 2.x系ではvue initを使用していたが、3.x系ではvue createなので注意
基本的には公式の情報こそ正義だと思っているので、まずはそれをみるといいと思います。

cli.vuejs.org

ここでは手順の確認を行うだけなので適当な名前のプロジェクト名の開発環境をセットアプする。

vue create test-project

すると以下のような選択を求められる。defaultを選択すると基本的なBabel + ESLintセットアップと、
付属のデフォルトプリセットでプロジェクトが開始される。
後からTypeScript等を導入することも可能らしいが、自動でセットアップしてもらったほうが安心なので、
今回はManually select featuresを選択する

 Vue CLI v3.0.4
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

すると以下のような選択画面に移行する。
英語で書いてある通り、キーで選択の on/offができる(カーソルを移動させれるとその説明が消えるので注意)
ここでは TypeScriptとCSS Pre-processorsを追加で選択する。 Vue RouterやVuexが必要な場合はそれも選択。

Vue CLI v3.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Babel
 ◉ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◯ Router
 ◯ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

すると以下のように追加の設定を求められる。
特にPick a CSS pre-processorでは今回はStylusにするのを忘れないように。。。

? Use class-style component syntax? (Y/n) Y
? Use Babel alongside TypeScript for auto-detected polyfills? Y
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
  Sass/SCSS
  Less
❯ Stylus
? Pick a linter / formatter config: (Use arrow keys)
❯ TSLint
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json
? Save this as a preset for future projects? (y/N) N

それらの設定が完了するとセットアップが進行し、最終的に以下のような内容がターミナルに出力する。

🎉  Successfully created project test-project.
👉  Get started with the following commands:

 $ cd test-project
 $ npm run serve

あとは指示の通りnpm run serveを実行して起動できればとりあえずのセットアップは完了です。