【微信小程序】【mpvue】搭建mpvue环境及第一个程序

搭建环境

由于依赖于Node.js，所以先安装Node.js

安装Node.js，并初始一个mpvue项目

打开命令工具：

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

随着运行成功的回显之后，可以看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

微信小程序IDE运行

使用微信小程序IDE打开创建的项目

分包机制 2018.7.23+

mpvue-loader 1.1.2-rc.2 之后，优化了 build 后的文件生成结构，生成的目录结构保持了源文件夹下的目录结构，有利于对分包的支持。

webpack 配置

注意事项

新增的页面需要重新 npm run dev 来进行编译

参考

微信小程序开发资源汇总
mpvue官方文档