mpvue 安装比较简单,直接就把官方的步骤贴过来了

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev

1.在mpvue + vuex项目中我们不能通过vue那种方式来将store对象实例注入到每个子组件中从而无法使用this.$store.state.xxx、this.$store.dispatch 等来访问或操纵数据仓库中的数据
解决方法:

//在mpvue搭建的项目中的 /src/main.js
import store from './store/index'
Vue.prototype.$store = store;

2.mpvue是不支持路由跳转的,所以我们需要安装个插件mpvue-router-patch,就可以像在vue中一样操作路由跳转了

import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)

3.引入vant-weapp ui框架的时候报错

在这里先说下引入方法,在git上直接下载对应的压缩包,将压缩包中的dist目录解压并放到mpvue项目中的static目录下并重命名dist为vant,然后在app.json增加组件

"usingComponents": {
    "van-action-sheet": "static/vant/action-sheet/index",
    "van-area": "static/vant/area/index",
    "van-badge": "static/vant/badge/index",
    "van-badge-group": "static/vant/badge-group/index",
    "van-button": "static/vant/button/index",
    "van-card": "static/vant/card/index",
    "van-cell": "static/vant/cell/index",
    "van-cell-group": "static/vant/cell-group/index",
    "van-checkbox": "static/vant/checkbox/index",
    "van-checkbox-group": "static/vant/checkbox-group/index",
    "van-col": "static/vant/col/index",
    "van-dialog": "static/vant/dialog/index",
    "van-field": "static/vant/field/index",
    "van-goods-action": "static/vant/goods-action/index",
    "van-goods-action-icon": "static/vant/goods-action-icon/index",
    "van-goods-action-button": "static/vant/goods-action-button/index",
    "van-icon": "static/vant/icon/index",
    "van-loading": "static/vant/loading/index",
    "van-nav-bar": "static/vant/nav-bar/index",
    "van-notice-bar": "static/vant/notice-bar/index",
    "van-notify": "static/vant/notify/index",
    "van-panel": "static/vant/panel/index",
    "van-popup": "static/vant/popup/index",
    "van-progress": "static/vant/progress/index",
    "van-radio": "static/vant/radio/index",
    "van-radio-group": "static/vant/radio-group/index",
    "van-row": "static/vant/row/index",
    "van-search": "static/vant/search/index",
    "van-slider": "static/vant/slider/index",
    "van-stepper": "static/vant/stepper/index",
    "van-steps": "static/vant/steps/index",
    "van-submit-bar": "static/vant/submit-bar/index",
    "van-swipe-cell": "static/vant/swipe-cell/index",
    "van-switch": "static/vant/switch/index",
    "van-switch-cell": "static/vant/switch-cell/index",
    "van-tab": "static/vant/tab/index",
    "van-tabs": "static/vant/tabs/index",
    "van-tabbar": "static/vant/tabbar/index",
    "van-tabbar-item": "static/vant/tabbar-item/index",
    "van-tag": "static/vant/tag/index",
    "van-toast": "static/vant/toast/index",
    "van-transition": "static/vant/transition/index",
    "van-tree-select": "static/vant/tree-select/index",
    "van-datetime-picker": "static/vant/datetime-picker/index",
    "van-rate": "static/vant/rate/index",
    "van-collapse": "static/vant/collapse/index",
    "van-collapse-item": "static/vant/collapse-item/index",
    "van-picker": "static/vant/picker/index"
  }


版权声明:本文为李维亮博主的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:http://www.liweiliang.com/940.html

标签: mpvue

评论已关闭