vue-cli是基于webpack 構建vue自動化開發環境的腳手架。

　　啥是腳手架？

　　雖然大家沒有在建筑工地上搬過磚，但是肯定都見過農民工兄弟在建造大樓前，先通過鋼管結構，搭建起大樓的框架吧。

　　對，如果我們寫的項目是一棟大廈的話，那么vuecli就是，勤勞的農民工兄弟，幫我們在寫項目前，把項目的基礎結構搭建起來。好啦，接下來我們看看vue-cli4.x構建項目如何使用吧。

　　一、安裝

　　在 cmd中 輸入以下命令安裝

　　靜靜等待安裝成功后在控制臺中輸入

　　以下命令,驗證是否安裝成功

　　vue --version

　　如果出現版本號,恭喜你安裝成功了,可以愉快的玩耍了!

　　二、啟動項目

　　在合適的位置，打開cmd，輸入

　　回車之后

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

　　我們選擇的配置如下：

　　選擇是否使用路由 history router，其實直白來說就是是否路徑帶 # 號，建議選擇 N，否則服務器還要進行配置

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

　　sass 官方目前主力推 dart-sass 最新的特性都會在這個上面先實現

　　選擇 ESLint 代碼校驗規則，提供一個插件化的javascript代碼檢測工具，ESLint + Prettier 使用較多

　　然后選擇什么時候進行代碼校驗，Lint on save 保存就檢查，Lint and fix on commit fix 或者 commit 的時候檢查，建議第一個

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

　　本著項目結構簡單的想法，我選擇了第二個

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

　　然后就等待創建項目吧

　　出現如圖紅框所示的提示，就搭建成功，進入項目目錄，直接輸入 npm run serve 就可以了

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

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

　　雖然沒影響太大的影響，但是我不想看見 WARN!回退之后，重新跑項目就不會有問題了。

　　三、目錄結構

　　接下來我們看看腳手架替我們生成了哪些文件吧。

　　四、環境配置

　　下面就是關于項目的環境配置了，我這邊一般喜歡用 test、preview、production分別表示測試，預覽，生產三種環境

　　修改 package.json 文件如下

　　在項目根目錄下新建 .env.test、.env.preview、 .env.production 文件，分別對應三個環境的配置文件，注意，名字要與 --mode 后面的名字分別對應

　　.env.test 代碼如下

　　.env.pre 代碼如下

　　.env.prod 代碼如下

　　ok，這樣環境就配置好了，分別用以下命令來打包不同環境的包就可以了

　　另外需要說明一點的是，本地環境會默認從 .env.development 文件中讀取配置

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

　　我的 .env.development 代碼如下

　　五、項目配置

　　從 vue-cli3.0 開始 build 和 config 目錄就取消了，如果需要修改配置，可以在項目的根目錄新建一個 vue.config.js 文件來覆蓋項目的配置，因為項目的配置比較多，下面簡單列舉常用的配置

　　更多關于前端培訓的問題，歡迎咨詢千鋒教育在線名師，如果想要了解我們的師資、課程、項目實操的話可以點擊咨詢課程顧問，獲取試聽資格來試聽我們的課程，在線零距離接觸千鋒教育大咖名師，讓你輕松從入門到精通。

　　注：本文部分文字和圖片來源于網絡，如有侵權，請聯系刪除。版權歸原作者所有!