使用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後預設加上的嚴格模式

// 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為了提高頁面的滑動流暢度而新折騰出來的一個東西）

* { 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;
}