mpvue 是一个使用类 Vue 语法开发小程序的前端框架,它基于 Vue.js 核心库进行封装,提供了和 Vue.js 一致的开发体验,让我们可以用 Vue.js 的开发风格来开发小程序。使用 mpvue 进行开发,我们可以借助 Vue 的生命周期函数、数据绑定、组件化开发等特性,来提高小程序的开发效率和开发体验。
mpvue 开发流程:
1. 安装 mpvue 命令行工具
在命令行里执行:npm install -g vue-cli
2. 使用 mpvue-quickstart 模板初始化一个项目
在命令行里执行:vue init mpvue/mpvue-quickstart my-project
其中,my-project 是你自己的项目名称。
3. 进入项目目录,并使用 npm 安装依赖
cd my-project
npm install
4. 开发
在 src 目录下编写.vue 格式的代码即可,流程和 vue 完全一致。
5. 构建
在命令行里执行:npm run build,会生成一个 dist 目录,里面包含了构建好的小程序代码。
6. 使用开发者工具测试并发布
用微信官方提供的开发者工具打开 dist 目录,进行测试或发布。
需要注意的是,mpvue 并不是完全等同于 Vue.js 的,它有自己的特殊之处,比如:
1. 分包加载
小程序包大小的限制很小,为了解决这个问题,小程序推出了分包加载机制,可以把小程序的代码分解成多个包,实现懒加载。mpvue 也实现了分包加载机制。
2. 生命周期
由于小程序和 Web 平台的开发模型差别很大,所以 mpvue 对一些生命周期函数进行了重新定义,在性能以及跨端能力上做了很多努力。
3. 组件
mpvue 的组件为了兼容小程序的 usingComponents 特性,需要在组件的自定义属性 attrs 中声明组件使用到的子组件,这在 Vue.js 中是没有的。
4. API
由于 mpvue 封装了多端通用 API,所以在具体使用时需要注意是否可用。
总的来说,mpvue 是一个可以大幅度提高小程序开发效率和体验的框架,它提供了完整的 Vue.js 开发体验,但也需要我们注意它和小程序平台的差异,以及使用过程中的坑点。