vue3.0使用ant design of vue

在vue3.0项目中 ，想使用ant的话，尝试使用一下Antdv2.x，Antdv2.x是唐金州老师（杭州校宝在线）研发的新一代适配 Vue 3.0 的组件库，使用方式：

cnpm i --save ant-design-vue@next -S

在 mian.js 内引入 ant-design-vue 组件如下所示：

import { createApp } from 'vue'
import Antd from 'ant-design-vue';
import App from './App.vue'
import router from './router'
import store from './store'
import 'ant-design-vue/dist/antd.css';

// 本教程采用的是全局引入组件库

createApp(App).use(router).use(store).use(Antd).mount('#app')

测试一下是否成功，顺便解释一下 Vue 3 如何声明变量，以及如何通过方法改变变量，代码如下：

<template>
  <a-button @click="add" type="primary">
    点我加{{ count }}
  </a-button>
  <a-button @click="add2('a')" type="primary">
    点我加a{{ state.a }}
  </a-button>
  <a-button @click="add2('b')" type="primary">
    点我加b{{ state.b }}
  </a-button>
</template>

<script>
import { ref, reactive } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const state = reactive({ a: 0, b: 0, })
    const add = () => {
      count.value += 1
    }
    const add2 = (type) => {
      state[type] += 1
    }
    return { state, count, add, add2 }
  }
}
</script>

如上述代码所示，Vue 3 新增的 setup 方法，颠覆了之前传统的 options 属性方式，我们可以将业务逻辑都写在 setup 方法中。

我们有两种声明变量的形式：

• ref：它用于声明简单的基础类型变量，如单个数字、boolean、字符串等等。
• reactive：它用于对象引用类型的复杂变量。

所有声明好的变量和方法，如果想在 template 模板里使用的话，必须在 setup 方法里 return，否则无法调用。记住返回什么就是声明，如返回 count，模板中就用 {{ count }}，返回 state，模板中就使用 {{ state.a }}