vue UI 告别webpack配置
vue-cli 3.0 的候選版本也已經釋出多時了。vue-cli 3.0 版本為我們提供了集 建立、管理、分析 為一體的可視化界面vue ui，媽媽再也不用擔心我不懂配置啦讓我們來一起嘗嘗鮮吧
#安裝最新版的vue-cli
npm install -g @vue/cli
#yarn/npm 安裝（二選一）
yarn global add @vue/cli
#檢查vue-cli版本
vue -V
#運作 vue ui
vue ui
結果：
開始體驗
在 http://localhost:8000 頁面中，我們可以看到如下的界面(我開啟了“夜間模式”，是以是黑色背景)。
Vue項目管理器提供了三個功能：
管理項目
建立新項目
導入一個已經存在的項目
建立項目
點選 在此建立新項目 就可以開始建立項目。
而上方的位址欄，可以幫助我們選擇根目錄，建立檔案夾，還有很順手的 收藏功能。
1.建立
要求輸入項目名稱，選擇包管理器，還有很貼心的 若目标檔案夾已存在則将其覆寫 以及常用的 git init。 這裡，我偏好 yarn 來管理依賴包。
2. 預設項目
這裡采用了 約定大于配置的思想，使用了預設的功能。我們既可以一鍵建立一個新的vue項目，也可以采用自定義的方式，甚至支援git的遠端預設。基本能滿足常用的應用場景了
3. 自定義功能
在這裡，我們可以自定義的選擇我們需要用到的功能。除了項目中可能用到的 vuex、vue-router 這種業務相關的功能外，我們還能選擇 ccs預處理、eslint、typescript、test、PWA 等這種項目相關的功能。能幫助我們減少很多複雜的配置。以 css預處理 為例，我們不需要再去配置自行 less-loader、sass-loader、stylus-loader 。
4. 配置
這一步，我們需要配置：
是否使用類樣式文法
為 TypeScript 自動選擇 polyfill
使用 history 路由還是 hash 路由（預設使用hash路由，如果使用history路由則需要服務端做相應配置）
選擇使用的 css預處理語言 : scss/sass、less、stylus
選擇代碼檢查或者格式化的配置：TSLint / ESLint
以及在何時執行Lint
5. 完成
點選建立項目, 我們提示，将我們的配置儲存為新的預設方案。以友善我們下一次直接建立。
耐心等待安裝完成。
項目細節
等待安裝完成之後，會自動跳轉到 項目管理頁 在這個頁面，我們可以詳細的看到項目裡做了哪些配置。主要是跟 packages.json 相關的配置。
1. 插件
這裡大多是全局的插件。
2. 依賴
在這裡，我們可以很友善的管理項目相關的依賴，也可以删除依賴。
點選檢視詳情，檢視依賴的具體說明
3. 配置
這裡的配置頁，基本上是以前的config檔案夾的相關内容。
- baseURL：應用的根目錄
- output directory：build 生成的目錄
- Assets directory：靜态資源的目錄
- Enable runtime compiler：允許在元件中使用 template ，但是會是以讓app多10kb負載。
- Enable Production Source Map：在生産環境使用 js Source Map
- 便于調試，但是會影響build的速度。
- Parallel compilation：多線程并行編譯Babel或者Typescript。
- Enable CSS Modules：預設隻有以 *.module.[ext]
- 結尾的檔案才會被視為CSS子產品。開啟此項，允許你在檔案名中删除 module 并将所有的樣式檔案(
- css|scss|sass|less|styl(us)? )視為CSS子產品 。
- Extract
-
CSS：是否将CSS導出為一個CSS檔案，而不是寫在js中内聯，并動态注入。在建構為Web元件時， 預設情況下也會禁用此選項(樣式内聯并注入shadowRoot),
建構庫時，您也可以将其設定為false，以避免使用者自己導入CSS。
- Enable CSS Source Maps：為CSS啟用source map，會影響建構性能。
點選更多，可以檢視相關的幫助和詳情。
4. 任務
serve 開發環境
這裡對應的任務，對應于 package.json中的 script腳本。
控制台能很友善的看到 單頁應用運作的資訊，包括錯誤數，警告數，靜态資源大小，子產品大小，依賴項大小。點選左上角 啟動app 就可以在浏覽器打開應用。
分析功能，能幫助我們分析代碼和子產品的大小。一般在生産模式下，才會考慮這個問題。
build 生産環境
各個功能和 serve 中的類似，可以很明顯的看到編譯後的檔案和未編譯檔案在大小上的差距。
inspect 審查
在這個模式下，我們可以看到詳細的webpack配置。
點選 setting 圖示，可以選擇開發環境，生産環境，測試環境。
編譯build時 生産環境設定
在使用vue ui生成的vue項目中，通常不會生成配置檔案config，是以在config裡修改index.js的辦法行不通。但是vue ui有更簡單的解決辦法！vue UI 告别webpack配置vue UI 告别webpack配置編譯build時 生産環境設定總結
以上圖檔是第一步，不要着急。如果打包的首頁還是白屏那麼請繼續往下看
按照以上兩步設定，基本上就可以解決白屏的問題了。
總結
vue ui 提供了一套完整的vue項目建構的頁面。既保留了vue-cli的即開即用的便利性，同時也保證了webpack配置的自由度。
對于使用vue-cli的使用者來說，友好度非常高，整個功能從建構到管理到優化。對于開發者來說十分友好。頁面也很炫酷，各個功能都恰到好處。