脚本宝典收集整理的这篇文章主要介绍了webpack + vue 使用mint-ui，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
自己从一个月之前正式的接触vue.js这个框架，然后就疯狂的迷恋上他，易上手我觉得是他最大的优势，之前我一直是使用Jquery的，大量的dom操作让我有点力不从心，之前的我安于现状不想去探索新的知识，直到我直到vue并且使用上他之后，自己的生产力仿佛得到了质的飞跃，闲话少叙，进入今天的主题Mint-ui链接描述。
第一步
安装mint-ui npm install mint-ui --save
第二步
在main.js里面引入mint-ui
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'//最嗨的是他这个直接引入的是一个css文件
Vue.use(MintUI);第三步
因为webpack把需要的依赖都下载好了我只需要安装下面的依赖就好啦
install babel-preset-es2015 --save-dev
第四步
配置你的babelrc文件{
"presets": ["es2015", "stage-2"],
"plugins": ["transform-runtime"],
"comments": false
}第五步
下面重启一下就可以直接在组件使用啦
需要注意的是，虽然是全局使用，但是在使用的过程中还是要在组件内引用一下你需要使用的组件
<template>
<div class="header">
<div @click='test'>{{headerProps.title}}</div>
</div>
</template>
<script type="text/ecmascript-6">
import {DatetimePicker, Button, Toast} from 'mint-ui';
export default {
props: {
headerProps: Object
},
data(){
return {}
},
methods:{
test(){
Toast('我是Tip');
}
}
}
</script>
<style lang="scss">
.header {
/*position: fixed;*/
z-index: 99;
width: 100%;
background: #f55947;
height: 3rem;
font: {
size: 1.2rem;
weight: 100;
}
;
div {
text-align: center;
line-height: 3rem;
color: #fff;
font: {
weight: 300;
}
;
}
}
</style>从安装到使用的过程就是这样啦，我也是刚接触vue这个框架，有问题的地方请大神指出呀，也希望能和大家一起学习进步~~~~
以上是脚本宝典为你收集整理的webpack + vue 使用mint-ui全部内容，希望文章能够帮你解决webpack + vue 使用mint-ui所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。