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沒法使用，如今就記錄下本身項目中所遇到的問題。

一、不支持不少的ui框架和vue-router，因此要改成a標籤而後寫熟悉的微信小程序路徑，或者用微信跳轉頁面的api。

二、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')
      //   }
      // },

 

三、相對路徑的圖片地址不顯示

<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>

 

四、原生組件引入的問題，參考在mpvue使用echas小程序組件，官方的文檔已經很詳細了，我這邊說幾個要點：

• ready 爲異步獲取數據。
• 爲 init 添加接收 options 傳參
• page目錄下main.js須要添加 usingComponents: {'ec-canvas': '../../../static/ec-canvas/ec-canvas'}
• 須要放在static目錄下

五、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組件的一些坑，這裏先不寫了，以後補上 。