一.什么是mpvue框架？

mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基于 Vue.js 核心（所以建議熟練掌握vue再使用mpvue框架，否則還是建議去使用原生框架去寫小程序），mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其可以運行在小程序環境中，從而為小程序開發引入了整套 Vue.js 開發體驗。

二.必要的開發基礎

① 熟練掌握vue.js（未曾使用過vue這個框架的話，建議vue的官方文檔進行學習：https://cn.vuejs.org/v2/guide/）

② 微信開發者工具（這個工具是開發、調試和模擬運行微信小程序的最核心的工具了，下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html）

③ Visual Studio Code（一個輕量級代碼編輯器，擁有非常多好用的輔助開發插件，下載地址：https://code.visualstudio.com）

④ node.js（前端工具鏈現在基本都依賴Node.js，下載地址：https://nodejs.org/en/download/）

⑤ vue-cli （vue專用的項目腳手架工具，打開cmd,輸入命令：npm install --global vue-cli）

三.初始化項目

1.打開cmd，快捷鍵win+R；

2.檢查node.js是否安裝成功,輸入命令：

node -v

出現版本號即為成功；

3.檢查vue-cli是否安裝成功，輸入命令：

vue -V

出現版本號即為成功；

4.然后我們執行以下命令，將npm的下載源切換到國內淘寶的鏡像，以提高下載時的速度和成功率；

npm set registry https://registry.npm.taobao.org/

5.進入你想保存項目的文件夾（比如d盤,就先輸入命令d:），創建一個基于 mpvue-quickstart 模板的新項目：

vue init mpvue/mpvue-quickstart wxvueshop

接著我們選擇或填寫項目的配置信息，不知道的你就回車（依次是，項目名稱，小程序appid，項目介紹，作者，然后是否安裝vuex等等，你想安裝就寫yes,否則no）

這個時候你就能看見d盤有一個wxvueshop的項目文件了。

6.不急，我們這時候進入這個文件夾，輸入命令：

cd wxvueshop

7.然后，我們進行依賴庫的安裝，輸入命令：

npm install

8.安裝完成后，我們運行一下，輸入命令：

npm run dev

隨著運行成功的運行之后，可以看到本地wxvueshop多了個