vue-cli3.0-beta vue腳手架3.0的使用

中文文檔
https://github.com/vuejs/vue-docs-zh-cn
在安裝以前請裝好nodeJs

1.使用

npm install -g @vue/cli
# or yarn global add @vue/cli 

查看版本（是否安裝成功）：vue -V(大寫的V)

 

11576163-5ebc6d418467d0c4.png

2.命令變化

Commands:

    create [options] <app-name>      create a new project powered by vue-cli-service // 建立一個由vue-cli-service支持的新項目 add <plugin> [pluginOptions] install a plugin and invoke its generator in an already created project // 在已建立的項目中添加插件 invoke <plugin> [pluginOptions] invoke the generator of a plugin in an already created project // 在開發者模式下以零配置運行一個js或vue文件 inspect [options] [paths...] inspect the webpack config in a project with vue-cli-service // 在vue-cli-service的項目中檢查webpack配置 serve [options] [entry] serve a .js or .vue file in development mode with zero config // 簡單理解爲開發環境下啓動命令 build [options] [entry] build a .js or .vue file in production mode with zero config // 在生產模式下以零配置構建一個js或vue文件 init <template> <app-name> generate a project from a remote template (legacy API, requires @vue/cli-init) // 舊api 須要@vue/cli-init // 就是原來的vue-cli init <template> <app-name> 

3.建立一個項目
新建文件夾，在該文件夾下打開命令窗口，輸入如下命令，
vue create project-name
這時你會看見

Vue CLI v3.0.0-beta.6 ? Please pick a preset: (Use arrow keys) > xs-default (vue-router, vuex, stylus, babel, pwa, eslint, unit-jest) // 這是我運行過以後的默認設置，第一次執行create是沒有的 default (babel, eslint) Manually select features 

按鍵盤上下鍵選擇默認（default）仍是手動（Manually），若是選擇default，一路回車執行下去就好了（注：如今vue-cli3.0默認使用yarn下載），這裏我選擇手動，

 

11576163-5ce01980491220c1.png

4.選擇配置，這時你會看見一些選項,
你要集成什麼就選就好了，我這裏選個我比較經常使用的（注：空格鍵是選中與取消，A鍵是全選）

? 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 ( ) Progressive Web App (PWA) Support ( ) Router ( ) Vuex ( ) CSS Pre-processors ( ) Linter / Formatter ( ) Unit Testing ( ) E2E Testing 

 

11576163-6cbc16d02b36888b.png

5.選擇css預處理，這裏我選擇stylus

? 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 

 

J1WT6J2M@U9P~N}B%IMYN3O.png

6.選擇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: (Use arrow keys) > ESLint with error prevention only ESLint + Airbnb config ESLint + Standard config ESLint + Prettier 

 

11576163-d296d46dc6ca8f36.png

7.選擇語法檢查方式，這裏我選擇保存就檢測

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時候檢查 

 

1.png

8.選擇單元測試

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 

 

2.png

9.她會問你 ，把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裏 

 

3.png

10.鍵入N不記錄，若是鍵入Y須要輸入保存名字，如第一步所看到的我保存的名字爲xs-default

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) // 是否記錄一下以便下次繼續使用這套配置 

11.肯定後，等待下載依賴模塊

 

4.png

12.裝好後，啓動

cd vue-pro3.0-demo // 進入項目根目錄 yarn serve // 啓動項目 

 

5.png

13.項目目錄，如今的目錄是3.0的cli看上去簡潔多了，去掉了2.0 build和config等目錄

 

)Y_Z_RSKOTQNM%5MAH55`A9.png

14.修改端口，在根目錄下建立vue.config.js

 

ARAM73G_ZUA)9$HYSZJRFQG.png

vue.config.js相關配置請參考 https://github.com/vuejs/vue-cli/blob/dev/docs/config.md
在vue.config.js找到

 

devServer: {
        open: process.platform === 'darwin', host: '0.0.0.0', port: 1234, https: false, hotOnly: false, // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy proxy: null, // string | Object before: app => {} }, 

 

6.png

做者：我友幾個逗逼 連接：https://www.jianshu.com/p/fbcad30031c2 來源：簡書 簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。