mpvue开发坑点总结
最近一直在开发微信小程序,趁着空闲时间总结下使用情况。
现在项目目前使用的是 mpvue:^1.0.11 版本,后续看看更新情况。
文档在此: http://mpvue.com/mpvue/#_2
# 全局安装 vue-cli
$ npm install --global vue-cli # 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project # 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
接下来,你只需要启动微信开发者工具,引入项目即可预览到你的第一个 mpvue
小程序。
mpvue 的语法跟vue很相似,有vue开发经验会上手很快,不过也有一些语法或者vue的api无法使用,现在就记录下自己项目中所遇到的问题。
1、不支持很多的ui框架和vue-router,所以要改为a标签然后写熟悉的微信小程序路径,或者用微信跳转页面的api。
2、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')
// }
// },
3、相对路径的图片地址不显示
<img src="../../images/LOGO.png">
解决是:把路径import
进来,或者是把图片放在static
目录下引用,然而作为css background-image
引用时,只能选择引用远程图片,或者相对目录小于8k(webpck配置有关)的图片,不然编译器会报错
<template>
<div>
<div class="test"></div>
<img :src="imgUrl">
</div>
</template> <style>
.test{
width: 48rpx;
height: 48rpx;
background-image: url("../../img/a.png");
}
</style> <script>
import imgUrl from '@/img/a.png' export default {
data() {
return {
imgUrl
}
}
</script>
4、原生组件引入的问题,参考在mpvue使用echas小程序组件,官方的文档已经很详细了,我这边说几个要点:
- ready 为异步获取数据。
- 为 init 添加接收 options 传参
- page目录下main.js需要添加
usingComponents: {'ec-canvas': '../../../static/ec-canvas/ec-canvas'}
- 需要放在static目录下
5、Cannot assign to read only property 'exports' of object '#<Object>'
编译报错
这是因为引用第三方插件的时候,带入了module.exports
的写法,webpack可以使用require和export ,但是不能混合使用import 和module.exports
,你需要做的是更新根目录下的.babelrc
文件配置
vue引入插件Cannot assign to read only property 'exports' of object
{
"presets": [
["env", {
"modules": false,
"targets": {
"browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
}
}],
"stage-2"
],
"plugins": [
["transform-runtime", {
"polyfill": false,
"regenerator": true
}]
],
"env": {
"test": {
"presets": ["env", "stage-2"],
"plugins": ["istanbul"]
}
}
}
还有一些canvas组件的一些坑,这里先不写了,之后补上 。
最新文章
- LinkedList实现队列和堆栈的代码
- 定时器springMVC
- TextView显示颜色高亮的问题
- Angular JS中的依赖注入
- Dynamic Virtual Channels
- Could not write metadata for &#39;/taiping-sol-insu-composite&#39;.
- 10张思维导图带你学习JavaScript
- [原][Android]All WebView methods must be called on the same thread.
- 通知 Notification 详解
- BZOJ 3533: [Sdoi2014]向量集( 线段树 + 三分 )
- [前言] 实现一个Android电子书阅读APP
- Windows Azure NotificationHub+Firebase Cloud Message 实现消息推动(付源码)
- linux下oracle启动关闭
- ionic3 安卓硬件返回
- 论文速读(Yongchao Xu——【2018】TextField_Learning A Deep Direction Field for Irregular Scene Text)
- linux下应用程序性能剖分神器gprofiler-tools-安装和使用
- SQLSERVER安装
- Redis高级应用——2
- eclipse maven 报错Could not get the value for parameter encoding for plugin execution default
- Ubuntu 安装 Telnet