碼文不易啊，轉載請帶上本文鏈接呀，感謝感謝 https://www.cnblogs.com/echoyya/p/14363272.html
關於VUE的項目，有個問題一直不是特別清楚 ，不同公司的項目，其項目結構，對應配置文件位置，及啟動打包對應的命令等，都有所不同，近期通過查找相關資料及公開視頻教學，整理一篇筆記，希望能幫跟我一樣困惑的同學，撥開迷霧！
公司在創建項目的時候，都會傾向使用腳手架vue-cli，vue-cli 提供一個官方命令行工具，能夠快速的搭建vue項目結構，同時可幫助配置各種文件目錄及項目打包。其實就是一個基於webpack構建，可以讓用戶快速初始化一個項目的工具。
基本原理: vue-cli並非從無到有地憑空生成一個項目，而是通過(download-git-repo工具)下載/拉取已有的工程到本地，完成生成項目的工作。
而導致不同項目的配置及目錄不同的原因之一，就是腳手架的版本不同導致，接下來具體講述一下vue-cli 2.x和vue-cli 3+，項目構建、運行、編譯命令區別：
首先： cmd > vue -V,該命令查看的是vue-cli的版本，並非vue的版本
| vue-cli 2.x | vue-cli 3+ | |
|---|---|---|
| 安裝 | npm install -g vue-cli |
npm install -g @vue/cli |
| 創建項目 | vue init webpack projectName |
vue create projectName |
| 編譯運行 | npm run dev |
npm run serve |
| 可視化項目管理工具 | -- | vue ui 默認地址：localhost:8000 |
創建項目
-
搭建
vue-cli 3項目前，如若已安裝舊版本vue-cli，需先卸載舊版本vue-cli，再重新安裝vue-cli 3+，2個命令可以升級到3以上 -
node版本要求: Node.js8.9 或更高版本 ,輸入node -v查看node版本 -
當vue-cli 版本達到
vue-cli4.5.0以上，就可以創建vue3.0的項目，支持體驗vue3.0的新特性，（3.x Preview）
目錄結構
-
vue-cli 3+的項目摒棄了 config 、 build 、 static 目錄，新增了
public目錄，將根目錄下的 index.html 放置在 public 目錄下。 -
新增
vue.config.js(需手動創建)配置文件，可以在該文件中進行webpack的相關配置，例如 loader、開發環境等。 -
新增
.browserslistrc文件，指定項目的目標瀏覽器的范圍，用來確定需要轉譯的 JavaScript 特性和需要添加的 CSS 瀏覽器前綴，可以理解為瀏覽器兼容。 -
新增
babel.config.js替代原先的.babelrc，具備和原先.babelrc一樣的作用。 -
src文件夾中多了
views文件夾
編譯運行
配置項
修改配置：vue-cli 3+的設計原則是“零配置”，移除（隱藏）配置文件 build 和 config 等目錄，隱藏到哪里了?我們如何修改配置？
方法一：在隱藏的文件夾直接修改
node_modules\@vue\cli-service\webpack.config.js 對應的 node_modules\@vue\cli-service\lib\Service.js
方法二： （推薦）
-
根目錄下創建
vue.config.js，包括：常用的輸出路徑名、跟目錄、預處理、devServer配置、pwa、dll、第三方插件等，詳細配置可以看 官方文檔 -
config文件夾已經被移除，但是多了
.env.production和env.development文件，除了文件位置，實際配置起來和2.0沒什么不同
方法三： 命令行vue ui 開啟一個本地服務，打開可視化項目管理工具
其他小知識點補充
- 安裝了vue-cli 3.x 后如何使用 vue-cli 2.x 創建項目：需要安裝一個橋接工具
@vue/cli-init, 即可使用vue-cli 2.x對應指令創建項目
npm install -g @vue/cli-init
-
vue-cli3.0+在項目創建最后會有一個保存當前配置的功能preset（預設）,其實是在create新項目時，生成的插件配置項預設，也就是在項目中需要用到的插件安裝成功之后，會生成一個關於preset的文件，當再次create新項目時，就不需要再去選擇同樣的插件，直接用預設安裝即可。設置保存預設時系統會自動生成一個.vuerc的文件，一般在c盤，可查看之前做的預設配置