基礎(chǔ)命令
# 安裝
npm install -g @vue/cli
# 檢查是否安裝成功
vue -V
# 新建項目
vue create my-project
# 項目啟動
npm run serve
# 打包
npm run build
功能配置
運行以下命令來創(chuàng)建一個新項目:
vue create my-project
你可以選默認的包含了基本的 Babel + ESLint 設(shè)置的 preset,也可以選“手動選擇特性”來選取需要的特性(這里我們選擇手動選擇功能)
Vue CLI v3.9.3
? Please pick a preset:
default (babel, eslint)
> Manually select features
自定義功能配置 (按下空格選擇或取消)
Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel
>( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
路由是否使用history
模式(如果使用history
模式,需要后臺去配合)
Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
選擇CSS 預(yù)處理類型 (按自己習慣即可)
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? 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
選擇Linter / Formatter規(guī)范類型 (按自己習慣即可)
Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config:
ESLint with error prevention only
ESLint + Airbnb config
> ESLint + Standard config
ESLint + Prettier
選擇檢測的方式(保存的時候檢測/提交的時候檢測)
Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
選擇 Babel, PostCSS, ESLint 等自定義配置的存放位置 (單獨配置成文件/package.json中)
Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
In package.json
是否保存剛剛這些配置 (按自己習慣即可)
Vue CLI v3.9.3
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n
然后自動下載依賴棋嘲,下載完成會提示
? Successfully created project vue-study.
? Get started with the following commands:
$ cd my-project
$ npm run serve
執(zhí)行npm run serve
命令咙崎,即可看到效果