目錄專案細節
總結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. 配置
這一步，我們需要配置：
5. 完成
點選建立專案, 我們提示，將我們的配置儲存為新的預設方案。以方便我們下一次直接建立。
耐心等待安裝完成。
等待安裝完成之後，會自動跳轉到專案管理頁在這個頁面，我們可以詳細的看到專案裡做了哪些配置。主要是跟packages.json相關的配置。
這裡大多是全域性的外掛程式。
在這裡，我們可以很方便的管理專案相關的依賴，也可以刪除依賴。
serve 開發環境
這裡對應的任務，對應於package.json中的script指令碼。
分析功能，能幫助我們分析**和模組的大小。一般在生產模式下，才會考慮這個問題。
build 生產環境
各個功能和serve中的類似，可以很明顯的看到編譯後的檔案和未編譯檔案在大小上的差距。
inspect 審查
在這個模式下，我們可以看到詳細的webpack配置。
點選setting圖示，可以選擇開發環境，生產環境，測試環境。
vue ui 提供了一套完整的vue專案構建的頁面。既保留了vue-cli的即開即用的便利性，同時也保證了webpack配置的自由度。
對於使用vue-cli的使用者來說，友好度非常高，整個功能從構建到管理到優化。對於開發者來說十分友好。頁面也很炫酷，各個功能都恰到好處。
think more，code less
關於vue ui元件
一 vue ui 元件 1 vue 當前很火前端框架vue 針對pc使用者 pc 端與移動端區別 1 螢幕寬度 992px 2 操作方式 滑鼠 事件 手指 觸碰操作 餓了麼 基於vue框架開發移動端元件庫 mint ui mui 開源團隊 mui 滴滴 2 vue ui 元件mint ui安裝與使用...
vue ui 開啟無效記錄
換了臺電腦，輸入vue ui 無法開啟圖形化介面 1 首先vue ui 沒成功 我找到vue.cmd路徑配置到環境變數依舊沒有解決 然後使用vue h 顯示沒有vue ui這個命令 重新安裝npm i g vue cli 開啟命令列 vue ui 視覺化介面迅速開啟 一些常見問題記錄 在專案中執行的...
什麼是Webpack 怎麼使用Webpack
什麼是webpack?怎麼使用webpack?什麼是webpack?webpack模組打包工具，它會分析模組之間的依賴關係，然後使用loaders處理它們，最後生成乙個優化並合併後的靜態資源。簡單的說就是打包，壓縮各種靜態資源的工具 2.目的？效能優化 減少瀏覽器像伺服器的請求次數 節約伺服器的頻寬...