vue-cli是基于webpack 構(gòu)建vue自動(dòng)化開(kāi)發(fā)環(huán)境的腳手架。

　　啥是腳手架？

　　雖然大家沒(méi)有在建筑工地上搬過(guò)磚，但是肯定都見(jiàn)過(guò)農(nóng)民工兄弟在建造大樓前，先通過(guò)鋼管結(jié)構(gòu)，搭建起大樓的框架吧。

　　對(duì)，如果我們寫(xiě)的項(xiàng)目是一棟大廈的話，那么vuecli就是，勤勞的農(nóng)民工兄弟，幫我們?cè)趯?xiě)項(xiàng)目前，把項(xiàng)目的基礎(chǔ)結(jié)構(gòu)搭建起來(lái)。好啦，接下來(lái)我們看看vue-cli4.x構(gòu)建項(xiàng)目如何使用吧。

　　一、安裝

　　在 cmd中 輸入以下命令安裝

　　靜靜等待安裝成功后在控制臺(tái)中輸入

　　以下命令,驗(yàn)證是否安裝成功

　　vue --version

　　如果出現(xiàn)版本號(hào),恭喜你安裝成功了,可以愉快的玩耍了!

　　二、啟動(dòng)項(xiàng)目

　　在合適的位置，打開(kāi)cmd，輸入

　　回車之后

　　讓我們選擇兩個(gè)預(yù)設(shè)：default默認(rèn)的，只有babel和討厭的eslint,顯然滿足不了我們的需求,我們選擇Manually select features 自定義選擇我們需要的配置。

　　我們選擇的配置如下：

　　選擇是否使用路由 history router，其實(shí)直白來(lái)說(shuō)就是是否路徑帶 # 號(hào)，建議選擇 N，否則服務(wù)器還要進(jìn)行配置

　　css 的預(yù)處理器我選擇的是 Sass/SCSS(with dart-sass) 。node-sass是自動(dòng)編譯實(shí)時(shí)的，dart-sass需要保存后才會(huì)生效

　　sass 官方目前主力推 dart-sass 最新的特性都會(huì)在這個(gè)上面先實(shí)現(xiàn)

　　選擇 ESLint 代碼校驗(yàn)規(guī)則，提供一個(gè)插件化的javascript代碼檢測(cè)工具，ESLint + Prettier 使用較多

　　然后選擇什么時(shí)候進(jìn)行代碼校驗(yàn)，Lint on save 保存就檢查，Lint and fix on commit fix 或者 commit 的時(shí)候檢查，建議第一個(gè)

　　下面就是如何存放配置了，In dedicated config files 存放到獨(dú)立文件中，In package.json 存放到 package.json 中

　　本著項(xiàng)目結(jié)構(gòu)簡(jiǎn)單的想法，我選擇了第二個(gè)

　　最后就是是否保存本次的配置了，N 不記錄，如果選擇 Y 需要輸入保存名字

　　然后就等待創(chuàng)建項(xiàng)目吧

　　出現(xiàn)如圖紅框所示的提示，就搭建成功，進(jìn)入項(xiàng)目目錄，直接輸入 npm run serve 就可以了

　　你以為這樣就完了嗎?我也是這樣認(rèn)為的，可它不是這樣的!

　　很明顯，雖然項(xiàng)目能夠正常啟動(dòng)，但是我的 nodeJs 版本用的太高了，然后我給回退到了 11.11.0 版本

　　雖然沒(méi)影響太大的影響，但是我不想看見(jiàn) WARN!回退之后，重新跑項(xiàng)目就不會(huì)有問(wèn)題了。

　　三、目錄結(jié)構(gòu)

　　接下來(lái)我們看看腳手架替我們生成了哪些文件吧。

　　四、環(huán)境配置

　　下面就是關(guān)于項(xiàng)目的環(huán)境配置了，我這邊一般喜歡用 test、preview、production分別表示測(cè)試，預(yù)覽，生產(chǎn)三種環(huán)境

　　修改 package.json 文件如下

　　在項(xiàng)目根目錄下新建 .env.test、.env.preview、 .env.production 文件，分別對(duì)應(yīng)三個(gè)環(huán)境的配置文件，注意，名字要與 --mode 后面的名字分別對(duì)應(yīng)

　　.env.test 代碼如下

　　.env.pre 代碼如下

　　.env.prod 代碼如下

　　ok，這樣環(huán)境就配置好了，分別用以下命令來(lái)打包不同環(huán)境的包就可以了

　　另外需要說(shuō)明一點(diǎn)的是，本地環(huán)境會(huì)默認(rèn)從 .env.development 文件中讀取配置

　　所以記得有需要記得新建一個(gè)然后存放配置

　　我的 .env.development 代碼如下

　　五、項(xiàng)目配置

　　從 vue-cli3.0 開(kāi)始 build 和 config 目錄就取消了，如果需要修改配置，可以在項(xiàng)目的根目錄新建一個(gè) vue.config.js 文件來(lái)覆蓋項(xiàng)目的配置，因?yàn)轫?xiàng)目的配置比較多，下面簡(jiǎn)單列舉常用的配置

　　更多關(guān)于前端培訓(xùn)的問(wèn)題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問(wèn)，獲取試聽(tīng)資格來(lái)試聽(tīng)我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門(mén)到精通。

　　注：本文部分文字和圖片來(lái)源于網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系刪除。版權(quán)歸原作者所有!