什麼是VueCLI3

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【什麼是VueCLI3】

 
什麼是VueCLI
背景介紹
Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統，提供：

經過 @vue/cli 搭建交互式的項目腳手架。 
經過 @vue/cli + @vue/cli-service-global 快速開始零配置原型開發。 
一個運行時依賴 (@vue/cli-service)，該依賴： 
可升級；

基於 webpack 構建，並帶有合理的默認配置；
能夠經過項目內的配置文件進行配置；
能夠經過插件進行擴展。
一個豐富的官方插件集合，集成了前端生態中最好的工具。
一套徹底圖形化的建立和管理 Vue.js 項目的用戶界面。 
Vue CLI 致力於將 Vue 生態中的工具基礎標準化。它確保了各類構建工具可以基於智能的默認配置便可平穩銜接，這樣你能夠專一在撰寫應用上，而沒必要花好幾天去糾結配置的問題。與此同時，它也爲每一個工具提供了調整配置的靈活性，無需 eject。
安裝

vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

Node 版本要求Vue CLI 須要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可使用 nvm 或 nvm-windows 在同一臺電腦中管理多個 Node 版本。

npm install -g @vue/cli
# OR
yarn global add @vue/cli

1
2
3
知識剖析
新特性 Vue UI
使用 vue ui 命令打開UI界面，快速建立Vue-CLI3.0項目

點擊建立項目會進來這麼一個界面： 
填寫項目名 
選擇包管理器 
選擇初始化git倉庫 

咱們選擇手動，此時會讓咱們選擇須要使用的庫和插件，好比bebel、vuex、vue-router 等經常使用的庫 

後面根據本身的須要配置就行了。 很是的簡潔！

常見問題
使用vue-cli初始化後，到底還要不要裝vuex,vue-router?
解決方案
不須要，vueCLI3.0 在初始化後自動安裝了vuex 和 vue-router

編碼實戰
略

擴展思考
如何在VueCLI3.0中使用VueCLI2.x的模板

Vue CLI 3 和舊版使用了相同的 vue 命令，因此 Vue CLI 2 (vue-cli) 被覆蓋了。若是你仍然須要使用舊版本的 vue init 功能，你能夠全局安裝一個橋接

npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project

1
2
3
更多討論
Q1. build哪裏去了？config哪裏去了？配置都消失了？
A1:
vue-cli3.0默認項目目錄與2.0的相比，更精簡: 
1.移除的配置文件根目錄下的，build和config等目錄， 
2.移除了static文件夾，新增了public文件夾，而且index.html移動到public中。 
3.在src文件夾中新增了views文件夾，用於分類 試圖組件 和 公共組件 。 
4.大部分配置 都集成到 vue.config.js這裏,在項目根目錄下

在vue.config.js裏大概配置 
經常使用的路徑名、根目錄、預處理、devServer配置、pwa、dll、第三方插件 
vue.config.js

Q2. webpack.config.js 去哪了?
A2:
webpack的相關配置能夠寫入vue.config.js 內的 configureWebpack的選項下，可是若是是vue.config.js中已有的配置， 不要寫入configureWebpack內。

Q3. npm run dev改了？
A3:
在根目錄的package.json裏有以下命令

「serve」: 「vue-cli-service serve」,
「build」: 「vue-cli-service build」,
「lint」: 「vue-cli-service lint」
因此之前那些用npm run dev的，約莫是隻能npm run serve/npm run build了

固然自己是「打包了一個express之類的serve工具啥的.????」 
具體是package.json裏面「scripts」有寫..鍵值..

我最近用的是npm run serve