使用mpvue开发微信小程序

mpvue 是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

主要特性

使用 mpvue 开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

• 彻底的组件化开发能力：提高代码复用性
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

环境搭建

mpvue支持使用vue-cli快速创建项目

1. 首先安装vue-cli

$ npm i vue-cli -g

2. 创建一个mpvue的工程

$ vue init mpvue/mpvue-quickstart mp-vue

3. 安装项目依赖

$ cd mp-vue
$ npm i
$ npm run dev

WX20180620-213550.png

如图即项目已经构建完成. 接下来打开微信开发者工具并扫码登录.
打开项目目录下的 dist目录就能看到mpvue的欢迎界面了.

主要目录文件说明

打开项目, 可以看到目录如下图所示:

WX20180620-214002.png

可以看到项目结构跟寻常vue项目非常相似:

• static/ 目录主要存放一些资源文件, 在编译时会被拷贝合并到dist目录中
• config/ 目录是一些编译环境的配置, 这个基本不用修改
• build/ 主要是一些打包编译相关的配置文件, 如webpack loader 等, 这个跟vue项目基本类似
• src/ 就是我们平时开发的代码目录了

进入到src目录
main.js 功能相当于微信中的app.json文件, 主要存放的是微信环境的配置

WX20180620-215204.png

可以看到config里面就是原滋原味的小程序app.json
再看 src/pages目录
这就是小程序的每个页面了, 其中每个目录都包含一个 main.js和一个 index.vue文件了
在 main.js中export default 部分的内容会被编译到微信pages目录下的同名json文件
而 index.vue中则是我们页面的逻辑了这里面完全大部分兼容vue的api, 具体可查看 使用手册