一.環境部署

(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成功引入