在本地搭建开发环境，方便开发进行

搭建mpvue环境

首先获取小程序AppId
AppId可去往微信公众平台获取，在设置一栏的开发设置下

2.初始化mpvue
该步骤需要实现安装过nodejs，与vue，具体安装步骤见vuejs的三个安装方法

进入到项目目录后输入

vue init mpvue/mpvue-quickstart

然后根据提示逐步输入信息

project name 即项目名称

wxmp appid 即微信小程序appid，从微信公众平台中获得。

剩下的选项直接敲回车键即可。

3.安装依赖
在项目目录下输入

npm install
Bug：在进行这一步的时候出现了一个问题，错误提示如下：

于是我开始使用管理身份运行cmd，继续install，但仍然出现同样的错误，这时候使用

npm cache clean —force
清楚完npm的缓存后发现运行正常了，等待一段时间后得到如下结果

安装依赖完成，这一步在项目文件夹下下载了node_modules文件夹

4.使用微信小程序web开发工具打开项目

打开后即可看到mpvue的demo实例小程序

到这里说明mpvue弄好了。

二、搭建本地开发环境

1.下载demo
地址：https://console.qcloud.com/lav2/dev

下载完成后将里面的server文件夹复制到项目的根目录下。

2.建立数据库
使用mysql数据库

打开cmd窗口，cd到mysql的安装路径
cd C:\Program Files\MySQL\MySQL Server 5.7\bin
登录mysql数据库
mysql -u root -p
输入密码后进入数据库

建立数据库
create database CAuth;
建立名为CAuth的数据库，由于在server/config.js中已经配置好数据库，所以命名数据库为CAuth，若想用其他名字，也需要在config.js中对应修改，config.js文件中mysql的配置如下：

/**

MySQL 配置，用来存储 session 和用户信息
若使用了腾讯云微信小程序解决方案
开发环境下，MySQL 的初始密码为您的微信小程序 appid
*/
mysql: {
host: ‘localhost’,
port: 3306,
user: ‘root’,
db: ‘cAuth’,
pass: ‘你数据库的密码’,
char: ‘utf8mb4’
},
注意要对应修改pass，否则初始化数据库时会无法登录。

3.配置config.js
在server/config.js中的CONF中添加如下代码：

serverHost: ‘localhost’,
tunnelServerUrl: ‘’,
tunnelSignatureKey: ‘27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89’,
// 腾讯云相关配置可以查看云 API 秘钥控制台：https://console.cloud.tencent.com/capi
qcloudAppId: ‘您的腾讯云 AppID’,
qcloudSecretId: ‘您的腾讯云 SecretId’,
qcloudSecretKey: ‘您的腾讯云 SecretKey’,
wxMessageToken: ‘weixinmsgtoken’,
networkTimeout: 30000,
修改以下三项，腾讯云相关配置可以查看云 API 秘钥控制台

4.初始化环境
首先安装依赖

切换到服务端代码目录

cd server

安装依赖

npm install

安装全局依赖

npm install -g nodemon

初始化数据库

node tools/initdb.js

5.测试本地环境是否搭建成功
1.首先可以在server/controllers目录下新建test.js文件内容如下：

module.exports = async (ctx) => {
ctx.state.data={
msg:’hello 小程序后台’
}
}
2.然后在server/routes/index.js文件中添加一句

router.get(‘/test’,controllers.test)
3.在cmd窗口中，cd到server文件夹下输入：

npm run dev
成功结果如下：

4.打开浏览器输入 http://localhost:5757/weapp/test

若看见下图

则说明配置成功。