什麼是Vue CLI？
其實就是一個“腳手架”，使用它，可以快速地搭建一個完整地Vue應用。他它的作用就是用來自動一鍵生成 vue + webpack 的項目模板，包括依賴庫。免去了我們手動安裝各種插件，各種引入的問題。
使用 Vue CLI 快速構建項目的步驟
-
打開控制檯，輸入
cnpm i vue-cli -g -
安裝 Vue CLI ，尚未安裝cnpm的可以輸入
npm i cnpm -g --registry=https://registry.npm.taobao.org
用來安裝國內淘寶鏡像源的 cnpm -
在命令執行結束後，輸入
vue --version
如果控制檯打印出版本號，即表示安裝成功 -
在項目所要放置的文件目錄下打開控制檯，輸入：
vue init webpack project-name
初始化項目（此處的project-name爲你自己的項目名稱） -
在模板下載完成後， Vue CLI 將引導我們進行項目配置，我的配置如下。
![在這裏插入圖片描述]()
其中，“Set up unit tests”和“Setup e2e tests with Nightwatch”選擇 No ，最後一項也選擇 No，是因爲npm的鏡像源在國外，安裝依賴的速度緩慢且易出錯，建議使用cnpm安裝。 -
輸入
cnpm install安裝項目依賴 -
輸入
npm start構建項目的開發版本，並啓動webpack-dev-server -
輸入
npm run build構建項目的生產版本 -
使用
webpack-dev-server命令，我們可以啓動web服務器並實時更新我們的修改
對於Vue CLI 項目初始目錄的詳解可以參考此博客 Vue CLI項目目錄詳解
基於 Vue-CLI 項目的搭建和解析
基於 Vue-CLI 項目的搭建和解析
自己的項目文件都需要放到 src 文件夾下，項目開發完成之後，可以輸入 npm run build 來進行打包工作。打包完成後，會生成 dist 文件夾，如果已經修改了文件路徑，可以直接打開本地文件查看。項目上線時，只需要將 dist 文件夾放到服務器就行了。
項目解析
-
index.html（主頁）
index.html如其他html一樣，但一般只定義一個空的根節點，在main.js裏面定義的實例將掛載在根節點下，內容都通過vue組件來填充
![在這裏插入圖片描述]()
-
main.js（入口文件）
main.js主要是引入vue框架，根組件及路由設置，並且定義vue實例。
1）router就是設置路由器
2）template:""就是設置#app的模板爲
3）components:{App}就是引入的根組件App.vue
後期還可以引入插件，當然首先得安裝插件。
![main.js]()
-
App.vue（根組件）
一個vue頁面通常由三部分組成:模板(template)、js(script)、樣式(style)
![在這裏插入圖片描述]()
-
router/index.js（路由配置）
這裏定義了路徑爲’/‘的路由，該路由對應的頁面是Hello組件，所以當我們在瀏覽器url訪問http://localhost:8080/#/時就渲染的Hello組件。
類似的，我們可以設置多個路由，‘/index’,’/list’之類的，當然首先得引入該組件，再爲該組件設置路由。
![在這裏插入圖片描述]()
當我們執行 npm run dev 後，在瀏覽器輸入localhost:8080/，會看到以下界面，表示我們一個基本的配置完成。這裏的“商城首頁”信息是屬於index.vue組件的。
如何搭建一個vue項目 參考
https://www.cnblogs.com/haitaoli/p/10304193.html