なにかお手伝いできることがあればご連絡ください。
お問い合わせはこちらから
※Googleフォームが表示されます
$ vue create {アプリケーション名}
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のバージョンを選択する。 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については公式サイトを参照。
TypeScriptをJavaScriptにトランスパイルした後、さらにそれをPolyfillで変換するかの選択。 IEなど、モダンブラウザ以外の対応も必要な場合はYES。
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)
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)
「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
「TSLint」「ESLint(4種類)」から選択可能。 それぞれのLinter/Formatterの説明はしませんので、Google先生に聞いてみてください。
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
TSLint (deprecated)
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
? Pick a unit testing solution:
Mocha + Chai
❯ Jest
? 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フォームが表示されます