vue2.0引用mui组件

在vue_cli中使用mui的UI插件，我们需要去mui官网下载文件https://github.com/dcloudio/mui   我们点击下载按键，把文件下载下来后，解压选择dist文件，

文件下载后我们就需要引入vue_cli中，我们打开vue项目的文件，我是放置在src/assets/mui,把dist的文件都放置进去

这三个文件分别是css、icon、js样式文件。我们在vue中需要在main.js中引入mui.css和mui.js文件，我们需要进行三个操作。

import mui from './assets/mui/js/mui.min.js' //引入mui的js样式

import './assets/mui/css/mui.min.css'//mui的css样式    import 后面跟的是自己文件的路径要对哦

Vue.prototype.mui = mui //给vue原型添加mui的方法

 

同时给找到.babelrc文件，添加配置语句"ignore":["./src/assets/mui/js/mui.min.js"],  注意那你要填写自己文件的路径。（这是vue的严格模式下配置后能忽略mui.min.js）

之后我们还需要在 .eslintignore文件填写  添加src/assets/mui/js/mui.min.js(如果你在建项目的时候没有选择eslint 为yes这里就不出现.eslintignore文件)

我由于配置了webpack，所以需要在webpack中填入，我们可以添加  const webpack = require("webpack")和

plugins: [

new webpack.ProvidePlugin({

mui:"mui",

"window.mui":"mui"

})

]，假如你之前就有了plugins就可以只添加mui就去就好

 

当我们在main.js引入了之后我们在vue中使用了，我这里选了一个mui的按钮样式，同时添加了一个mui的icon

效果图如下

此时我们vue就引入好muiUI组件了，想要的样式就可以去mui官网去查看，把class拿过来就好，

如果我们需要引用的是mui的js这时候要先初始化mui 同时要在mounted时候才能初始化哦。使用mui的时候我们是用this.mui

打箭头的地方要注意啊 不然会报错 mui is no define。

如果你想看mui的例子的话，可以打开他的案例来看，在前面下载的文件夹 路径你可以参考我这个mui-master\mui-master\examples\hello-mui  

好啦 mui的安装就先到这里了 之后再工作中再慢慢更新mui的坑。