Mnit UI在vue中的运用

Mnit UI是饿了吗团队开发的vue的ui框架。

官方网站： http://mint-ui.github.io/#!/zh-cn

1、首先是在项目中 下载Mint UI

执行语句 cnpm install mint-ui --sava

2、没有下载 css loader插件时，需要下载。

2.1查看webpack.config.js插件配置中有没有这两个配置没有就加上。

module: {

rules: [

{

test: /\.css$/,

loader: 'style-loader',

},

{

test: /\.css$/,

loader: 'css-loader',

},

]

}

2.2 下载

cnpm install --sava-dev css -loader style-loader

注释：css -loader 是来识别css文件的

style-loader作用是文件内部生产一个style标签，能够让打包样式在浏览器上识别。

3、在main.js文件中配置（参考官网）

import Vue from 'vue' import MintUI from 'mint-ui' import 'mint-ui/lib/style.css' import App from './App.vue'

Vue.use(MintUI) new Vue({ el : '#app' , components : { App }})

index.html文件中引入样式文件

< link rel = "stylesheet" href = "https://unpkg.com/mint-ui/lib/style.css" >

就可以应用mint ui框架了

注意：组件上用click事件时应该 @click.native=" "