一，vue-cli4.0安裝
關於舊版本
Vue CLI 的包名稱由 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+)
由於之前我本地全局安裝了 2.0 的環境，所以需要全局卸載再安裝 4.0
npm uninstall -g vue-cli
npm install -g @vue/cli
輸入 vue -V 查看版本
二、搭建項目
1，vue-cli4.0 以后項目創建的命令變成了下面這樣
vue create vuecli4.0 //文件名
2，選擇配置方式：default 是使用默認配置，Manually select features 是自定義配置。
其實使用默認配置差不多
3，我的自定義配置如下
4，最后配置結果：
5，安裝完成進入項目
cd vuecli4.0
6，運行項目
npm run serve
三，創建項目時Runtime + compiler和Runtime-only選項的區別
1，區別
這兩種方法創建的腳手架，區別在於main.js（在src文件夾中）
在Vue實例中，runtime-compiler創建的項目中參數是：components和template
runtime-only創建的項目中參數為：render函數
2、組件的渲染過程
我們再來了解一下，組件是怎么被渲染到頁面當中去的，這對我們理解上述問題起到關鍵性的作用
template ---> ast ---> render ---> vDom ---> 真實的Dom ---> 頁面
ast：抽象語法樹
vDom：虛擬DOM
可以發現，template最終還是會被渲染為 render函數，記住這個結論
3、runtime-only
·我們在使用runtime-only的時候，需要借助webpack的loader工具，將.vue文件編譯為javascript，因為是在編譯階段做的，所以他只包含運行時的vue.js代碼，所以代碼體積會更輕量
結論：
runtime-only：將template在打包的時候，就已經編譯為render函數
runtime-compiler：在運行的時候才去編譯template
結果：
發布生產的時候，runtime-only構建的項目代碼體積更小，運行速度更快
四，手動更改配置文件
在根目錄下創建vue.config.js文件，通過module.exports={}導出
修改端口號是為了防止端口號被占用，
修改assetsPublicPath屬性是因為打包后，外部引入js和css文件時，如果路徑是以'/'開頭，在本地是無法找到對應文件的，所以如果要在本地打開打包后的文件，就得修改路勁為'/'
其它的配置參考：https://segmentfault.com/a/1190000008644830
五，項目文件說明
打包文件說明
參考：
https://www.cnblogs.com/coober/p/10875647.html
https://blog.csdn.net/a460550542/article/details/106373519
https://blog.csdn.net/liyunkun888/article/details/102738377