1.使用

npm install -g @vue/cli# oryarn global add @vue/cli

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

11576163-5ebc6d418467d0c4.png

2.命令變化

Commands:? ? create [options] ? ? ? create anewproject powered by vue-cli-service// 創(chuàng)建一個(gè)由vue-cli-service支持的新項(xiàng)目add [pluginOptions]? ? install a plugin and invoke its generatorinan already created project// 在已創(chuàng)建的項(xiàng)目中添加插件invoke [pluginOptions]? invoke the generatorofa plugininan already created project// 在開(kāi)發(fā)者模式下以零配置運(yùn)行一個(gè)js或vue文件inspect [options] [paths...]? ? inspect the webpack configina projectwithvue-cli-service// 在vue-cli-service的項(xiàng)目中檢查webpack配置serve [options] [entry]? ? ? ? ? serve a .js or .vue fileindevelopment modewithzero config// 簡(jiǎn)單理解為開(kāi)發(fā)環(huán)境下啟動(dòng)命令build [options] [entry]? ? ? ? ? build a .js or .vue fileinproduction modewithzero config// 在生產(chǎn)模式下以零配置構(gòu)建一個(gè)js或vue文件init ? ? ? generate a project from a remote template (legacy API, requires @vue/cli-init) // 舊api 需要@vue/cli-init // 就是原來(lái)的vue-cli init

3.創(chuàng)建一個(gè)項(xiàng)目

新建文件夾夜惭，在該文件夾下打開(kāi)命令窗口，輸入以下命令，

vue create project-name

這時(shí)你會(huì)看見(jiàn)

VueCLIv3.0.0-beta.6? Please pick a preset: (Use arrow keys)> xs-default(vue-router, vuex, stylus, babel, pwa, eslint, unit-jest)// 這是我運(yùn)行過(guò)之后的默認(rèn)設(shè)置平匈，第一次執(zhí)行create是沒(méi)有的default(babel, eslint)? Manually select features

按鍵盤(pán)上下鍵選擇默認(rèn)（default）還是手動(dòng)（Manually），如果選擇default，一路回車(chē)執(zhí)行下去就行了（注：現(xiàn)在vue-cli3.0默認(rèn)使用yarn下載），這里我選擇手動(dòng)空另，

11576163-5ce01980491220c1.png

4.選擇配置，這時(shí)你會(huì)看見(jiàn)一些選項(xiàng),

你要集成什么就選就行了蹋砚，我這里選個(gè)我比較常用的（注：空格鍵是選中與取消扼菠，A鍵是全選）

? Please pick a preset: Manually select features? Check the features needed for your project: (Pressto select,to toggle all,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預(yù)處理，這里我選擇stylus

? Please pick a preset: Manually select features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, AutoprefixerandCSS Modules are supported bydefault):> SCSS/SASS? LESS? Stylus

J1WT6J2M@U9P~N}B%IMYN3O.png

6.選擇ESLint + Prettier

? Please pick a preset: Manually select features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, AutoprefixerandCSS Modules are supported bydefault): Stylus? Pick a linter / formatter config: (Usearrowkeys)>ESLintwitherrorpreventiononlyESLint+AirbnbconfigESLint+StandardconfigESLint+Prettier

11576163-d296d46dc6ca8f36.png

7.選擇語(yǔ)法檢查方式坝咐，這里我選擇保存就檢測(cè)

Vue CLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, AutoprefixerandCSS Modules are supported bydefault): Stylus? Pick a linter / formatter config: Prettier? Pick additional lint features: (Press to select, to toggle all, to invert selection)>( ) Lint on save// 保存就檢測(cè)( ) Lintandfix on commit// fix和commit時(shí)候檢查

1.png

8.選擇單元測(cè)試

Vue CLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, AutoprefixerandCSS Modules are supported bydefault): Stylus? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: (Usearrowkeys)>Mocha+ChaiJest

2.png

9.她會(huì)問(wèn)你 循榆，把babel,postcss,eslint這些配置文件放哪，這里隨便選墨坚，我選擇放在獨(dú)立文件夾

Vue CLI v3.0.0-beta.6? Please pick a preset: Manually select features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, AutoprefixerandCSS Modules are supported bydefault): Stylus? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: Jest? Wheredoyou prefer placing configforBabel, PostCSS, ESLint, etc.? (Use arrow keys)> In dedicated config files// 獨(dú)立文件放置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 neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, AutoprefixerandCSS Modules are supported bydefault): Stylus? Pick a linter / formatter config: Prettier? Pick additional lint features: Lint on save? Pick a unit testing solution: Jest? Wheredoyou prefer placing configforBabel, PostCSS, ESLint, etc.? In dedicated config files? Savethisas a presetforfuture projects? (Y/n)// 是否記錄一下以便下次繼續(xù)使用這套配置

11.確定后框杜，等待下載依賴模塊

4.png

12.裝好后，啟動(dòng)

cd vue-pro3.0-demo// 進(jìn)入項(xiàng)目根目錄yarn serve// 啟動(dòng)項(xiàng)目

5.png

13.項(xiàng)目目錄袖肥，現(xiàn)在的目錄是3.0的cli看上去簡(jiǎn)潔多了咪辱，去掉了2.0 build和config等目錄

)Y_Z_RSKOTQNM%5MAH55`A9.png

14.修改端口，在根目錄下創(chuàng)建vue.config.js

ARAM73G_ZUA)9$HYSZJRFQG.png

vue.config.js相關(guān)配置請(qǐng)參考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-proxyproxy:null,// string | Objectbefore:app=>{}? ? },

6.png

15.本文使用vue-cli3.0的入門(mén)使用椎组，希望可以幫到剛更多的人油狂。

作者：我友幾個(gè)逗逼

鏈接：http://www.reibang.com/p/fbcad30031c2

來(lái)源：簡(jiǎn)書(shū)

簡(jiǎn)書(shū)著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。