前言
全家桶已经配置的七七八八了。现在加上框架。可以选用antd和element-ui等等。这里我选用antd来开发。
一、安装ant-design-vue
npm install ant-design-vue --save-dev
二、引入antd
同样的,在安装好antd之后,我在utils里面创建了一个新的文件antd.js,按需引入antd的插件
//antd.js
import {
Input,
Select
} from 'ant-design-vue'
const ant = {
install: function (Vue) {
Vue.use(Input)
Vue.use(Select)
}
}
export default ant
//main.js
import ant from '@/utils/antd.js'
import 'ant-design-vue/dist/antd.css'
Vue.use(ant)
三、使用
<template>
<div class="hello">
<a-input class="input" :value="value" placeholder="Basic usage" />
<input class="input" :value="value1" type="text">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
value: 'antd-input框',
value1: '普通input框'
}
},
computed: {
},
methods: {
}
}
</script>
<style scoped>
.input{
width: 200px;
margin: 10px 0;
}
</style>
总结
对于antd的引入就是这样了。有什么补充、不足的,欢迎指教。