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组件的一些坑，这里先不写了，之后补上 。