vue-cli中引入mui的相关问题解决

使用mui

引入mui.js

1. 将mui放到vue-cli项目的src/assets路径下

2. 在webpack.base.conf.js中配置

    // 2.1 在webpack.base.conf.js的resolve中的alias中添加 mui当前行代码
    resolve: {
        extensions: ['.js', '.vue', '.json'],
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve('src'),
            // 定义别名和插件位置
            'mui': path.resolve(__dirname, '../src/assets/mui/js/mui.js')
        }
    }
   

3. 在webpack.dev.conf.js中配置mui相关

    plugins: [
        new webpack.ProvidePlugin({
            mui: "mui",
            "window.mui": "mui"
        }),
        new webpack.DefinePlugin({
          'process.env': require('../config/dev.env')
        }),
    ]
   

引入mui.js报错及解决

1. caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them

   // 真正问题产生是由于babel-loader在编译代码时会加严格模式限制
   //  在项目根目录中的 .babelrc文件中忽略不需要使用严格模式转换的文件路径
    "plugins": ["transform-vue-jsx", "transform-runtime"],
    "ignore": [
      "./src/assets/mui/js/*.js",
    ]
   

2. mui中的滚动会在浏览器控制中报警告,需要添加一举样式代码

* { touch-action: pan-y; }

3. mui.js导入之后,滚动效果的js代码和tabbar产生了冲突,导致路由跳转失效

原因: js中有操作类名的代码,这些代码中的类名和tabbar上的类名一模一样
解决: 需要自己手动的更改tabbar上的类名为自定义类名,然后将系统默认类名中样式拷贝过来

vue-cli引入mui.css出错

1. 找到引入的mui.css
2. 搜索svg
3. 将svg最外层的单引号改为双引

   .mui-spinner:after {
    //   background-image: url('data:image/..')
     //   background-image: url("data:image/..")
   }
   

解决导入MUIjs文件后产生的问题

1. PhotoList.vue中导入MUIjs文件,实现顶部导航滚动效果

import mui from "../../lib/mui/js/mui.min.js";

mounted() {
  // 需要在组件的 mounted 事件钩子中，注册 mui 的 scroll 滚动事件
  mui(".mui-scroll-wrapper").scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  });
}

2. 安装babel-plugin-transform-remove-strict-mode移除webpack打包js后默认加上的严格模式

babel-plugin-transform-remove-strict-mode

// 1. 安装babel-plugin-transform-remove-strict-mode
cnpm i babel-plugin-transform-remove-strict-mode --save-dev

// 2. 在.babelrc文件的plugins节点中配置
"transform-remove-strict-mode"

3. 加入样式消除chrome控制台警告

原因：（是chrome为了提高页面的滑动流畅度而新折腾出来的一个东西）

http://www.cnblogs.com/pearl07/p/6589114.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action

* { touch-action: pan-y; }

4. 修改tabbar样式类名,解决tabbar不能点击问题

/* 1. 将tabbar中的mui-tab-item改为mui-tab-item-llb */
/* 2. 在组件中加入以下样式*/
.mui-bar-tab .mui-tab-item-llb.mui-active {
    color: #007aff;
}

.mui-bar-tab .mui-tab-item-llb {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
}

.mui-bar-tab .mui-tab-item-llb .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}

.mui-bar-tab .mui-tab-item-llb .mui-icon~.mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

4. vue-cli引入mui.css出错