mp-vue 创建一个mpvue项目

1.全局安装vue-cli

npm install vue-cli -g

安装完成后，输入如下命令进行验证：

vue

// 成功的话会输出如下内容：
// Usage: vue  [options]
//
// Options:
//
//    -V, --version  output the version number
//    -h, --help     output usage information
//
// Commands:
//
//    init           generate a new project from a template
//    list           list available official templates
//    build          prototype a new project
//    create         (for v3 warning only)
//    help [cmd]     display help for [cmd]

2.创建第一个基于mpvue的小程序项目代码

vue init mpvue/mpvue-quickstart my-mpvue

命令行将一步步的引导我们选择或填写项目的配置信息，如果你还不太明白这些内容的含义，可以先直接全部按回车：

? Project name  my-mpvue
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang 
? 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  my-mpvue
     npm install
     npm run dev

   Documentation can be found at http://mpvue.com

安装依赖

cd firstapp 
npm install

然后，执行命令让这个代码运行起来，进入开发模式：

npm run dev

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

3.下载微信开发者工具

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

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

4.运行并查看结果

上面的步骤中，我们开启开发模式后，其实并不能看到小程序的执行效果，要真正看小程序的运行界面的话，我们还是要借助微信开发者工具。
打开微信开发者工具，选择新增项目
项目目录选择指向my-mpvue目录：
【提醒】记得在微信开发者工具的菜单》设置 》编辑设置 中，将“保存时自动编译小程序”勾选上，这样当mpvue的代码自动编译完成后，模拟器才会自动刷新界面。