vue项目中引入mint-ui的方式(全部引入与按需引入)
一、全部引入1、安装mint-uinpm intall mint-ui --save2、main.js中引入mint-uiimport MintUI from 'mint-ui'import 'mint-ui/lib/style.css'Vue.use(MintUI)3、组件调用<mt-button type="danger">退出登录&l
一、全部引入
1、安装mint-ui
npm intall mint-ui --save
2、main.js中引入mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
3、组件调用
<mt-button type="danger">退出登录</mt-button>
button组件在页面正常显示了,说明我们成功了。
二、按需引入
1、除了安装mint-ui之外还需要安装 babel-plugin-component
npm intall mint-ui --save
npm install --save-dev babel-plugin-component
2、修改.babelrc文件
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
如果plugins属性后有值,则如上所示直接在后面加。
3、组件引入
在main.js中引入项目需要的组件
本例子中引入 button组件用于实践效果
import {Button} from 'mint-ui'
Vue.component(Button.name,Button)
4、在页面中使用
<mt-button type="danger">退出登录</mt-button>
button组件在页面正常显示了,说明我们成功了。
更多推荐
所有评论(0)