vue UI 告別webpack配置

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，會影響構建性能。