一.環境部署
(1)安裝npm
npm稱為 Node package Manager, 是一個基於Node.js的包管理器,安裝node.js后會自動安裝npm,安裝后在cmd中查看npm版本
npm -v
(2)由於網絡原因, 通過cmd安裝cnpm(中國 npm 鏡像的客戶端)
npm install -g cnpm --registry-https://registry.npm.taobao.org
(3)通過cmd安裝vue-cli
cnpm install -g @vue/cli
(4)通過cmd安裝webpack,webpack 是js打包器(module bundler)
cnpm install -g webpack
相關截圖如下所示
二.創建vue項目
(1)cmd切換到項目目錄，輸入命令
vue ui
（2）自動彈出Vue項目圖形化管理界面
（3）“創建”-“在此創建新項目”
（4）填寫相關信息
（5）等待項目創建完成
（6）項目創建完成
三.項目開發
（1）用HBuilderX打開目錄
public: 打包后用於部署到生產環境下的目錄 src：開發目錄 assets:存放資源文件 components: 項目組件目錄 APP.vue: 項目入口文件，完成組件的引入工作
（2）運行項目
（3）頁面輸入'http://localhost:8080/' 打開項目
（4）在HBuilderX中新建組件並調用
1.在components目錄下右鍵新建vue文件，命名為'nComp.vue'
2.在nComp.vue中編輯組件內容
3.在APP.vue中引入nComp.vue組件
（5）保存，轉到項目頁面，nComp.vue成功引入
