Vuejs 整合 MUi

最新推荐文章于 2024-08-21 21:29:35 发布

weixin_34212762

最新推荐文章于 2024-08-21 21:29:35 发布

阅读量458

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liuyishi/p/9453067.html

版权

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

引入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");
      });
    }

转载于:https://www.cnblogs.com/liuyishi/p/9453067.html