vue.js开发——基于mpvue框架搭建微信小程序项目

1、确保全局安装了vue-cli
（一般使用mpvue开发的话，是较为习惯或喜欢使用vue.js的语法，但是如果不熟悉vue的语法，都是从头开始的话，建议还是微信小程序原生开发）

// 全局安装 vue-cli
npm install --global vue-cli

2、创建新的项目

// 创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project

在执行了该行命令之后会跳出一堆问题，需要你确认
（1）项目名字不能包含大写字母

（2）wxmp appid (touristappid) // 项目的appid

等等其他按照自己的需求一路回车就好。

3、项目创建完成之后，列表长这样

4、打开vscode，导入项目，运行npm install
和基于vue.js的项目一样，会多一个node_modules文件夹

5、运行项目 npm run dev
运行成功之后，会多一个dist文件夹，目录类似于微信小程序的目录
（这里和vue.js不一样，vue.js需要npm run build才可以打包生成dist文件夹，且两者文件夹的目录不同）

6、打开微信开发者工具，导入dist文件，即可看到预览效果

此时在vscode中修改代码，保存运行之后，微信开发者工具模拟器也会更新视图。

可以选择只打开一个模拟器进行开发预览~
好啦~项目搭建完成，可以愉快的使用vue.js的语法进行微信小程序的开发啦