vue项目搭建（三）

---

前言

全家桶已经配置的七七八八了。现在加上框架。可以选用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的引入就是这样了。有什么补充、不足的，欢迎指教。