pengdongliang 的个人博客

记录精彩的程序人生

Open Source, Open Mind,
Open Sight, Open Future!
  menu

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

  • viewport(vw自适应), 参考: https://segmentfault.com/a/1190000016247061

1.npm install postcss-px-to-viewport-opt postcss-loader -S
3.index.html 增加
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

  • 在项目根目录新建postcss.config.js 内容是下面的
module.exports = {
  plugins: {
    autoprefixer: {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,  //视窗的宽度,对应的是我们设计稿的宽度,一般是750
      viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
      unitPrecision: 3,       // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
      viewportUnit: 'vw',     // 指定需要转换成的视窗单位,建议使用vw
      selectorBlackList: ['.novw'],  // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
      minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
      mediaQuery: false,       // 允许在媒体查询中转换`px`
      exclude: /(\/|\\)(node_modules)(\/|\\)/  //防止第三方UI库样式px被改变
    }
  }
};

标题:vux个人笔记
作者:pengdongliang
地址:https://www.p0d0.com/articles/2019/06/03/1573740603821.html