通过mpvue快速构建小程序

注：需要了解微信小程序、vue、vue-cli、git、node的npm 或cnpm 等基础知识，以上内容可自行百度。
1、电脑装有node（没有自行百度下载安装）、通过npm(cnpm、yarn都可以) 命令安装 vue-cli
安装vue-cli ，在微信公众平台注册账号并申请一个小程序，保留 appid
npm install -g @vue/cli 或 yarn global add @vue/cli
2、通过CMD命令行cd到需要创建项目的路径
3、通过命令行创建小程序项目：
vue init mpvue/mpvue-quickstart my-project

image.png

注：my-project是创建的项目名，项目名不可大写，此处需要用到appid（如忘记appid,在微信公众平台自己的小程序开发管理—开发设置中自行查找,不写为游客模式，开发者工具填写appid处选择云开发）
4、cd 到 my-project 目录下
cd my-project

image.png

5、安装依赖包
npm install 或 cnpm i

image.png

6、运行项目
npm run dev
7、根据需求开发界面，需按照vue 语法编写js,不可按照wx开发语法会报错
例如：微信设置值写法为

image.png

vue 写法为： this.name = 'MINA'
8、通过微信开发者工具打开 项目my-project 目录下的dist 文件夹 ，配置文件修改了跟路径的话就打开dist 下的wx文件夹，即可看见构建好的小程序

image.png

9、不要运行 npm run build 打包命令 开发者工具会报错，如已打包删除项目目录的dist 文件夹，并重新运行 npm run dev即可
10、将写好的小程序通过开发者工具上传，并通过微信公众平台审核、发布