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

时间:2021-2-20 作者:admin

一、创建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目前的指令很多,下面列举普遍使用的

  setup 是围绕 beforeCreatecreated 生命周期钩子运行,不需要显式地定义。 换句话说,在这些钩子中编写的任何代码都应该直接在 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
    })
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。