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組件的一些坑，這里先不寫了，之后補上 。