mpvue开发小程序

一、创建小程序
1.

vue init mpvue/mpvue-quickstart firstapp

出现以下选择和配置信息

? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang <kevin.zhang@moredist.com>
? Vue build runtime
? Use Vuex? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能 

   vue-cli · Generated "firstapp".

   To get started:
   
     cd firstapp
     npm install
     npm run dev
   
   Documentation can be found at http://mpvue.com

2.cd firstapp
3.npm install
4.npm run dev
二、运行
1.成功运行后，这个项目代码就进入开发模式，一旦有源代码发生修改，就会触发自动编译。因为mpvue使用的是Vue + HTML Web的开发方式开发小程序，它最终还是需要被转换成小程序的代码才可以在小程序环境运行，所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下：

2.运行并查看结果
上面的步骤中，我们开启开发模式后，其实并不能看到小程序的执行效果，要真正看小程序的运行界面的话，我们还是要借助微信开发者工具。

打开微信开发者工具，选择新增项目：