vue UI——告別webpack配置

vue UI 告別webpack配置

[TOC]

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. 管理項目
2. 建立新項目
3. 導入一個已經存在的項目

建立項目

首先咱們試着建立一個項目，以下圖：

點擊 在此建立新項目 就能夠開始新建項目。

而上方的地址欄，能夠幫助咱們選擇根目錄，新建文件夾，還有很順手的 收藏功能。

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 圖標，能夠選擇開發環境，生產環境，測試環境。

總結

vue ui 提供了一套完整的vue項目構建的頁面。既保留了vue-cli的即開即用的便利性，同時也保證了webpack配置的自由度。

對於使用vue-cli的用戶來講，友好度很是高，整個功能從構建到管理到優化。對於開發者來講十分友好。頁面也很炫酷，各個功能都恰到好處。

think more，code less