Vuejs 整合 MUi

整合方法和使用axios的方法类似.具体步骤如下:

1. 引入mui的css和js

import mui from './lib/mui/js/mui.js'
import './lib/mui/css/mui.min.css'
Vue.prototype.$mui = mui; // mui 不能 use, 可以改写原型链,将 mui 改写为 Vue 的原型属性

• 因为 mui 使用了匿名递归不能直接 require 自然也不能用 amd 方式加载到 es6 代码中，vue 的严格模式下会报错
  移除严格模式的方法:

  1. 使用 $ npm install babel-plugin-transform-remove-strict-mode

  2. 修改.babelrc

     {
       "plugins": ["transform-remove-strict-mode"]
     }
     

• mui 并不能 use，只能每个需要发送请求的组件中即时引入.
  解决办法: 改写原型链
  这时候如果在其它的组件中，是无法使用 mui 的方法。但如果将 mui 改写为 Vue 的原型属性，就能解决这个问题.

2.在组件中使用

 mounted() {
      var info = document.getElementById("info");
      document.getElementById("alertBtn").addEventListener('tap', () => {
        this.$mui.alert("欢迎使用Hello MUI");
      });
    }