- 安裝Node.js
brew install node #安裝node多望，下載安裝請忽略此處
node -v #版本查看
npm -v #版本查看
- 安裝Vue
npm install -g @vue/cli #終端執(zhí)行安裝 Vue-CLI'
vue -V #查看版本
- 創(chuàng)建項目
vue create <Project Name> #創(chuàng)建項目文件名不支持駝峰（含大寫字母）
'配置選項'
default (babel, eslint) #默認套餐，提供 [babel]和 [eslint]
Manually select features #手動配置,可選功能的 npm 包
'手動配置選擇功能'
? 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)
>(*) TypeScript #支持使用 TypeScript
( ) Progressive Web App (PWA) Support #漸進式網(wǎng)頁應(yīng)用
(*) Router #支持 [vue-router]
(*) Vuex #支持 [vuex]
(*) CSS Pre-processors #CSS 預(yù)處理器
(*) Linter / Formatter #支持代碼風(fēng)格檢查和格式化
(*) Unit Testing #支持單元測試
( ) E2E Testing #支持 E2E 測試
'選擇css預(yù)處理'
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default):
SCSS/SASS
> LESS
Stylus
'選擇ESLint + Prettier'
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
> ESLint + Prettier
'選擇語法檢查方式'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save #保存就檢測
( ) Lint and fix on commit #fix和commit時候檢查
'選擇單元測試'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: (Use arrow keys);
Mocha + Chai
> Jest
'babel,postcss,eslint配置文件位置'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys);
> In dedicated config files #獨立文件
In package.json #package.json
'是否記錄配置'
Vue CLI v3.0.0-beta.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Router, Vuex, CSS Pre-processors, Linter, Unit
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Stylus
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? 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) #是否記錄一下以便下次繼續(xù)使用這套配置
'確認后等待下載依賴'
..................................
- 下載成功后
'進入創(chuàng)建項目'
cd <Project Name>
'啟動項目'
npm run serve
'項目打包 - 執(zhí)行后項目內(nèi)會生成dist文件夾為上線文件'
npm run build
