1.介绍
mpvue是一套定位于开发小程序的前端开发框架，其核心目标是提高开发效率，增强开发体验。使用该框架，开发者只需初步了解小程序开发规范、熟悉 Vue.js基本语法即可上手。框架提供了完整的 Vue.js 开发体验，开发者编写 Vue.js 代码，mpvue 将其解析转换为小程序并确保其正确运行。此外，框架还通过vue-cli 工具向开发者提供 quick start 示例代码，开发者只需执行一条简单命令，即可获得可运行的项目。
2.安装 mpvue
# 全局安装
vue-cli$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建$ npm run dev
但安装预览的时候，不是用浏览器打开输入：localhost:8080。而是打开微信开发者工具，把项目根目录导入进去。
3.mpvue特性
彻底的组件化开发能力：提高代码
完整的 Vue.js 开发体验
方便的 Vuex
数据管理方案：方便构建复杂应用
快捷的 webpack构建机制：自定义构建策略、开发阶段 hotReload
支持使用 npm 外部依赖
使用 Vue.js 命令行工具
vue-cli 快速初始化项目
H5代码转换编译成小程序目标代码的能力
支持小程序的原生组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定
4.对于vue的支持
不支持ElmentUI和Vue-router
不支持纯 HTML，小程序里所有的 BOM／DOM 都不能用，也就是说 v-html 指令不能用。
不支持部分复杂的 JavaScript 渲染表达式
不支持过滤器
不支持在 template 内使用 methods 中的函数。
暂不支持在组件上使用 Class 与 Style 绑定
5.对于mpvue的踩坑
eslint连vue和js后缀文件都有严格校验
找到build目录的webpack.base.conf.js把器rule注释掉。
// {
// test: /\.(js|vue)$/,
// loader: 'eslint-loader',
// enforce: 'pre',
// include: [resolve('src'),
resolve('test')],
// options: {
// formatter:
require('eslint-friendly-formatter')
// }
// },
相对路径的图片不显示。
解决是:把路径import进来,或者是把图片放在static目录下引用,然而作为css background-image引用时,只能选择引用远程图片,或者相对目录小于8k(webpck配置有关)的图片,不然编译器会报错
新增页面有时没反应。
因为 webpack 编译的文件使用配置的 entry决定的，新增的页面并没用添加进 entry，所以需要手动 npm run dev 一下
基于mpvue使用axios
通过webpack别名（alias）将axios指向axios/dist/axios，如下
alias: {
'vue': 'mpvue',
'axios':'axios/dist/axios',
'@': resolve('src')
}
小程序环境和浏览器不一致导致的，不过别慌，我们可以写adapter
axios.defaults.adapter = function (config) {
return new Promise((resolve, reject) => {
console.log(config)
// TODO wx.request(...)
})
}
更多的关于mpvue的坑可以查看如下博客
网友评论