Vue-cliでVue3のプロジェクトを作成する

Vue-cliでVue3のプロジェクトを作成する

2021/10/12
Javascript

Vueアプリケーションを作成する

 $ vue create {アプリケーション名}

presetの選択

presetの選択画面が表示されるので、Manually select features(手動設定)を選択する。

Vue CLI v4.5.13
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint)
 Manually select features

機能を選択

Manually select featuresを選択すると以下の画面になるので、必要な機能を選択する

? Please pick a preset: 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

Vueのバージョンを選択

Vueのバージョンを選択する。 3系を利用したいので、3.x(Preview)を選択。

? Choose a version of Vue.js that you want to start the project with
  2.x
 3.x

クラススタイルでコンポーネントの利用

class-style component syntaxの利用の選択。

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

class-style componentについては公式サイトを参照。

Babel alongside TypeScriptの利用

TypeScriptをJavaScriptにトランスパイルした後、さらにそれをPolyfillで変換するかの選択。 IEなど、モダンブラウザ以外の対応も必要な場合はYES。

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

Vue Routerのヒストリーモードの利用

Vue Routerのヒストリーモードの利用の選択。
Noの場合はVue Routerのデフォルトのhashモード(例 : http://sample.com/#/user)。
Yesの場合は、historyモード(例 : http://sample.com/user)。

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

CSSプリプロセッサの選択

「Sass/SCSS」「LESS」「Stylus」の3つから選択可能。

Sassを利用する場合は、dart-sassがおすすめ。

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
 Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus

Linter/Formatterの設定

「TSLint」「ESLint(4種類)」から選択可能。 それぞれのLinter/Formatterの説明はしませんので、Google先生に聞いてみてください。

 ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

追加のLint機能の選択

Lint on save・・・保存時のLint実行   Lint and fix on commit・・・コミット時のLint実行

両方あっても良い。

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

Unit Testのツール選択

? Pick a unit testing solution:
  Mocha + Chai
 Jest

Babel、PostCSS、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)

なにかお手伝いできることがあればご連絡ください。

お問い合わせはこちらから

※Googleフォームが表示されます