天天看點

Vue快速搭建項目

1. 安裝node.js,這是最基礎的環境;

2. 安裝cnpm:

npm install cnpm -g --registry=https://registry.npm.taobao.org      

3. 全局安裝vue-cli:

cnpm install -g vue-cli      

4. 安裝vue-cli成功後,通過cd指令進入你想放置項目的檔案夾,在指令提示視窗執行建立vue-cli工程項目的指令:

vue init webpack yourProjectName      

5. 生成檔案目錄後,使用 cnpm 安裝依賴:

cnpm install      

6. 最後需要執行指令: npm run dev 來啟動項目,啟動完成後會自動彈出預設網頁:

npm run dev      

7. 也可以進入package.json中更改,或執行serve指令檢視運作情況:

npm run serve      

效果:

Vue快速搭建項目

8. 執行build指令釋出項目,會生成一個dist檔案夾,這裡就是最終要放到伺服器的檔案:

npm run build      

9.項目結構總覽:

Vue快速搭建項目
Vue快速搭建項目

10. 當然,也可以使用其他方式建立,蘿蔔白菜各有所愛,看自己喜歡的方式選擇即可:

Vue快速搭建項目

11. 更改配置以及預設啟動:

Vue快速搭建項目

12. 建議在另一個檔案中更改配置:

Vue快速搭建項目

繼續閱讀