vue3.0使用ant design of vue

短命女 2023-01-12 11:37 257阅读 0赞

在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 }}`

[Antdv2.x]: https://2x.antdv.com/docs/vue/getting-started-cn/