天天看點

mpvue入門踩坑

官網:http://mpvue.com

名稱由來

  • mp

    :mini program 的縮寫
  • mpvue

    :Vue.js in mini program

使用vue.js的方式來開發小程式,之前隻支援微信小程式,現在多了阿裡、百度。

mpvue搭建環境:

下載下傳nodejs https://nodejs.org/dist/v8.11.3/node-v8.11.3-x64.msi安裝

安裝vue環境變量,npm install --global vue-cli 需要手動添加vue環境變量

使用VS開發即可,有很多插件可用,主要是好用免費

Vue添加全局變量

設定全局變量js類

mpvue入門踩坑

在初始化的時候添加到Vue.prototype中,名稱自己命名

mpvue入門踩坑

在其它地方就能直接調用this.GlobalData拿到自定義js中的資料了

全局共享變量,可以實作同步更新,即一處設定了,其它調用的地方也會更新

使用Vuex

mpvue入門踩坑

彈窗添加 catchtouchmove="true" 攔截滾動事件,禁止下層頁面滾動

去掉eslint嚴格校驗

VS自動格式化與eslint部分不符,建議不适用eslint,注釋build/webpack.base.conf,如圖

mpvue入門踩坑

靜态資源如圖檔,需要放在static目錄下,使用static使用

mpvue入門踩坑

導入通用css檔案,在main.js中import 必須是相對路徑,絕對路徑會識别為子產品導緻編譯不通過

繼續閱讀