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

使用mui

引入mui.js

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

在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')
     }
 }

在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报错及解决

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",
 ]

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

* { touch-action: pan-y; }

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

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

vue-cli引入mui.css出错

找到引入的mui.css
搜索svg

将svg最外层的单引号改为双引

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

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

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
  });
}

安装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"

加入样式消除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; }

修改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;
}

vue-cli引入mui.css出错