使用 antd vue2.x 、Vue3.0.2 和Ts 开始你的 Vue3.x 旅程

一、创建Vue Ts项目

1、安装脚手架工具，推荐使用 yarn

    $ npm install -g @vue/cli
    # OR
    $ yarn global add @vue/cli

2、VsCode创建 Vue + Ts 项目

   ①、首先创建一个文件夹，通过 VsCode 打开文件夹。

   ②、 ctrl+` 打开终端，运行命令

   $vue create vue3.x-ts-demo

vue命令不存在：一开始通过全局安装脚手架，运行不了，原来发现 yarn 的包不在同一硬盘，需要 yarn 的全局目录和缓存目录在同一硬盘才能运行。

   ③、然后选择 第三项

   ④、空格选择，一步一步创建项目

…

二、Antd Vue2.x ant-design-vue 目前已发布2.0.0-rc.1版本

1、这里推荐使用 yarn 安装脚手架工具

    $ npm install -g @vue/cli
    # OR
    $ yarn global add @vue/cli
    $ npm i --save ant-design-vue@next

2、运行 yarn install

3、main.ts 中引入 Antd

  可以单独引入，也可全局引入

    import { createApp } from 'vue'
    import Antd,{ Modal, Table, Menu, Input, Button, Form, Checkbox, Radio } from 'ant-design-vue';

    const app = createApp(App)
    app.use(Antd)
    router.isReady().then(() => app.mount('#app'))

三、配置eslint-ts规则就能愉快使用Antd Vue了

... todo

四、使用Vue3

  vue3.x目前的API很多，下面列举普遍使用的

  setup 是围绕 beforeCreate 和 created 生命周期钩子运行，不需要显式地定义。 换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

    import { defineComponent, ref , reactive, toRefs, onMounted ,computed } from 'vue'
    export default defineComponent({
      name: 'index',
      components: {},
      	// props: setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。
      setUp( props , { emit , attrs ,...} ){
        //这里写对象，方法等
        return { 对象，方法 }
      }
    })

1、ref

  ref ：将给定的值创建一个响应式的数据对象并赋值初始值（int或者string），reactive可以直接定义复杂响应式对象。

相当于创建了一个可以动态绑定的对象。

    const number = ref(1) 
    const string = ref('1')
    return {
      number，
      string
    }

2、reactive

  reactive：是用来 返回对象的响应式副本，通常会这样用

    const obj = reactive({ count: 0 })
    const state = reactive({
      loading: false,
      obj,
    })
    return {
      ...toRefs(state),
      obj
    }

3、toRefs

  toRefs 可以配合reactive使用

4、onMounted

    onMounted(async () => {
      // 获取信息
      const{ data } = await getConfigData()
    })

5、computed

  computed 通过函数调用

  //因为 props 是响应式的，你不能使用 ES6 解构，因为它会消除 prop 的响应性所以可以用toRefs来转化
    const bgColor = computed(
      () => {
      const { downLoad } = toRefs(props) 
      const { lightColor } = state
      const color = downLoad ? lightColor : defaultColor
      return color
    })