タイトル : Vue CLIでプロジェクトを作る 2022/11
更新日 : 2022-11-12
カテゴリ : プログラミング
参照したURL
あれこれ
-
Class Style,Object Style
-
historyモード
-
dart-sass
実行例
実行例の抜粋です。
★ 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