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的代码自动编译完成后，模拟器才会自动刷新界面。