vue2.0引用mui组件

时间:2024-03-20 17:35:50

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

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

vue2.0引用mui组件

vue2.0引用mui组件

这三个文件分别是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的方法

vue2.0引用mui组件

 

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

vue2.0引用mui组件

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

vue2.0引用mui组件

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

plugins: [

new webpack.ProvidePlugin({

mui:"mui",

"window.mui":"mui"

})

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

vue2.0引用mui组件

vue2.0引用mui组件

 

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

vue2.0引用mui组件

效果图如下

vue2.0引用mui组件

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

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

vue2.0引用mui组件

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

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

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