记录一次使用mpvue开发小程序

起手式,必要的开发环境

1) . 确认是否安装node环境

现在，前端工具链基本都依赖Node.js , 安装地址：https://nodejs.org/en/download/

安装完成之后,在你的桌面右键点击桌面,打开你的命令行工具 , 查看是否安装成功

然后我们切换成淘宝镜像源 , npmsetregistry https://registry.npm.taobao.org/

2).安装vue-cli脚手架工具，可以快速创建vue项目骨架代码，我们可以通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令：

检查是否安装成功可以使用命令 vue 

3).下载微信开发者工具

这个工具是开发、调试和模拟运行微信小程序的最核心的工具了，所以必须安装。

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4).创建第一个基于mpvue的小程序项目 vue init mpvue/mpvue-quickstart firstapp

上面这里选项如果不明白可以直接Enter即可

5).安装完成之后桌面会多了一个你刚刚所创建的文件夹

6).命令行cd firstapp进入文件夹内

7).输入 npm i 安装依赖

8).然后使用编辑器打开整个文件夹

可以看到整个文件的结构如下, 下面我们要修改一下配置

点击打开这个配置文件

然后修改这个配置项

在这个配置文件这里把miniprogramRoot的路径修改为"./dist/wx",这里假如不修改的话,会报app.json文件入口没找到,这是因为我们生成的文件路径dist里面还有一层wx文件夹.

然后再下面几行找到appid,替换掉这个appid

9).然后在命令行输入 npm run dev

10).打开小程序开发者工具

添加你刚刚创建的项目

项目目录指向你刚刚创建的文件夹然后确定即可

这样就代表项目创建成功了, 接下来就可以开始撸代码了