天天看点

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 必须是相对路径,绝对路径会识别为模块导致编译不通过

继续阅读