vue3.0使用antdesignofvue

在vue3.0项目中 &＃xff0c;想使用ant的话&＃xff0c;尝试使用一下Antdv2.x&＃xff0c;Antdv2.x是唐金州老师&＃xff08;杭州校宝在线&＃xff09;研发的新一代适配 Vue 3.0 的组件库&＃xff0c;使用方式&＃xff1a;

cnpm i --save ant-design-vue&＃64;next -S

在 mian.js 内引入 ant-design-vue 组件如下所示&＃xff1a;

import { createApp } from &＃39;vue&＃39;
import Antd from &＃39;ant-design-vue&＃39;;
import App from &＃39;./App.vue&＃39;
import router from &＃39;./router&＃39;
import store from &＃39;./store&＃39;
import &＃39;ant-design-vue/dist/antd.css&＃39;;// 本教程采用的是全局引入组件库createApp(App).use(router).use(store).use(Antd).mount(&＃39;#app&＃39;)

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

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

我们有两种声明变量的形式&＃xff1a;

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

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