vux个人笔记

### vue-cli3使用vux
    1.先卸载vue-cli(旧版)  npm uninstall vue-cli -g
	2.npm install -g @vue/cli
	3.vue create 
	4.npm run serve(启动服务---可以手机端也可以访问)  npm run build(打包)
***
- 新建vue.config.js
```
module.exports = {
  baseUrl: process.env.NODE_ENV === "production" ? "/dashboard/" : "/",
  configureWebpack: config => {
    require("vux-loader").merge(config, {
      options: {},
      plugins: ["vux-ui", 'progress-bar', 'duplicate-style', {name: 'less-theme', path: 'src/assets/css/vux_theme.less'}]
    });
  },
  productionSourceMap: false
};
```
***
- vux不能在全局main.js里import {组件} from "vux"(提示vux错误), 可在任何一个.vue文件里import然后 Vue.use(vux的插件)

- vux的tabbar(v-model刷新和后退导致路由错误), 解决: watch监听路由变化和v-model的值的变化相互操作

```
    $route: function (newVal, oldVal) {
      if(newVal.name === oldVal.name) {
        return
      }
      switch (newVal.name) {
        case "home":
          this.tabbarIndex = 0
          break;
        case "find":
          this.tabbarIndex = 1
          break;
        case "shopkeeper":
          this.tabbarIndex = 2
          break;
        case "cart":
          this.tabbarIndex = 3
          break;
        case "mine":
          this.tabbarIndex = 4
          break;
      }
    }
      if(newVal === oldVal) {
        return
      }
      switch (val) {
        case 0:
          this.$router.replace("/home")
          break;
        case 1:
          this.$router.replace("/find")
          break;
        case 2:
          this.$router.replace("/shopkeeper")
          break;
        case 3:
          this.$router.replace("/cart")
          break;
        case 4:
          this.$router.replace("/mine")
          break;
      }
```
***
- vux的tab(初始化和刷新v-model绑定的值没反应, 一直是0) 解决:  v-if="navMsg"

- vux的tab配合TouchSlide实现左右滑动触发tab滑动

Leanote's Blog

Navigation

Recent Posts

Friend Links