mpvue系列（一）-構建新項目

mpvue怎麼創建新項目？

1、安裝node環境。

2、全局安裝vue-cli。

3、創建新項目文件夾。

4.安裝依賴。

5.運行。

1. 安裝node環境。

1.1 打開命令提示符?

（1）window+R

（2）.輸入cmd

1.2 window系統沒有的話怎麼安裝？

（1）下載.msi文件x32位（看電腦多少位，官網下載對應的，以x32為例）

（2）直接雙擊安裝

（3）重啟cmd

（4）.node -v查看

1.3 cnpm怎麼安裝？

（1）安裝cnpm -->npm i -g cnpm --registry=https://registry.npm.taobao.org

1.4 cnpm報錯？

（1）npm set registry https://registry.npm.taobao.org（註冊模塊鏡像）

（2）npm set disturl https://npm.taobao.org/dist node-gyp（編譯依賴的 node 源碼鏡像）

（3）npm cache clean --force（ 清空緩存）

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

2. 全局安裝vue-cli。

（1）npm install --g vue-cli 全局安裝

（2）vue -V 檢查

3. 創建新項目文件夾。

（1）.vue init mpvue/mpvue-quickstart test-wxapp （test-wxapp 是自定義的文件名）

4. 安裝依賴。

（1）進入項目 cd test-wxapp

（2）npm i 安裝依賴

5. 運行。

（1）npm run dev 運行程序

（2）打開開發者工具，項目目錄填當前項目的dist文件夾。

5.1 開發者工具下載？

（1）登錄微信公眾平台

（2）首頁-->開發工具-->點連接跳轉下載

5.2 怎麼獲取appID?

（1）微信公眾平台-->設置-->開發設置

5.3 mpvue項目文檔目錄結構？

• node_modules 安裝依賴包
• dist 您啟動和打包應用程序時，Titanium為應用程序做準備的地方,(編譯成小程序代碼的地方)
• src vue代碼處
• main.js 項目配置文件，config欄位就是小程序的全局配置
• index.html 掛載入口
• utils/index.js 工具函數

5.4 新項目下的文件整理？

（1）/src/pages 下面的counter和logs兩個文件夾刪掉

（2）/src/components 文件夾下面的文件也全刪掉

（3）src/main.js 裡面的 config.pages裡面多餘的路由也刪掉，只保留一條["^pages/index/main"]

（4）新增的頁面需要重新 npm run dev 來進行編譯

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！