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快速创建项目
- 首先安装
vue-cli
$ npm i vue-cli -g
- 创建一个mpvue的工程
$ vue init mpvue/mpvue-quickstart mp-vue
- 安装项目依赖
$ 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, 具体可查看使用手册
