测试版本

Vue: 2.6.x

Vuetify: 2.2.x

用脚手架创建Vue项目

1
2
3
4
5
6
7
8
$ vue --version 
@vue/cli 4.5.10
$ vue create vuetify-demo
Vue CLI v4.5.10
? Please pick a preset: 
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯ Manually select features

手动选择功能

1
2
3
4
5
6
7
8
9
10
11
? 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

选择需要的功能后回车

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x 
  3.x (Preview) 
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus 
? Pick a linter / formatter config: 
  ESLint with error prevention only 
  ESLint + Airbnb config 
  ESLint + Standard config 
❯ ESLint + Prettier 
? Pick additional lint features: 
 ◉ 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

保存配置下次可以用(默认保存在~/.vuerc中)

1
2
Save this as a preset for future projects? (y/N) y
? Save preset as: l2m2.preset

进入创建的目录下，添加Vuetify

1
2
3
4
5
6
$ cd vuetify-demo/
$ vue add vuetify
? Choose a preset: (Use arrow keys)
❯ Default (recommended) 
  Prototype (rapid development) 
  Configure (advanced)

跑起来

1
$ yarn serve