タイトル : Vue CLIでプロジェクトを作る 2022/11
更新日 : 2022-11-12
カテゴリ : プログラミング
タグ :
frontend   
vuejs   

参照したURL

あれこれ

実行例

実行例の抜粋です。

 ★ create で プロジェクト vue-ts-practice を作る。
$ vue create vue-ts-practice


  ★  手動を選ぶ
Vue CLI v5.0.8
? Please pick a preset: 
  Default ([Vue 3] babel, eslint) 
  Default ([Vue 2] babel, eslint) 
❯ Manually select features 

  ★ 勉強用なので古いブラウザ対応とか考えなくて良いのでBabelはなし。あとは全部つけておこう。
Vue CLI v5.0.8
? 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, and
 <enter> to proceed)
 ◯ Babel
 ◉ TypeScript
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
 ◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◉ Unit Testing
❯◉ E2E Testing

 ★ 一旦 Vue2系で始める
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS, PWA, Router, Vuex, CSS Pre-processors, Linter, Unit, E2E
? Choose a version of Vue.js that you want to start the project with 
  3.x 
❯ 2.x 

  ★ class-styleでコンポーネントを書く
? Use class-style component syntax? (Y/n) 
Y

  ★ 先に書いたようにBabelなしで
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (y/N)
N

  ★ hash(#)を使うモードではなく、history modeで
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 
Y

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

  ★ Prettier で
? Pick a linter / formatter config: 
  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, and <enter> to 
proceed)
❯◉ Lint on save
 ◯ Lint and fix on commit

  ★ 単体テストは Jestで
? Pick a unit testing solution: (Use arrow keys)
❯ Jest 
  Mocha + Chai 

  ★ e2eテストは Cypressで
? Pick an E2E testing solution: (Use arrow keys)
❯ Cypress (Test in Chrome, Firefox, MS Edge, and Electron) 
  Nightwatch (WebDriver-based) 
  WebdriverIO (WebDriver/DevTools based) 

  ★ 各設定ファイルを個別に用意するのではなく、package.json で。
? Where do you prefer placing config for Babel, ESLint, etc.? 
  In dedicated config files 
❯ In package.json 

  ★ 今回のことは保存しなくて良いです
? Save this as a preset for future projects? (y/N) N