自己从一个月之前正式的接触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这个框架,有问题的地方请大神指出呀,也希望能和大家一起学习进步~~~~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。