一、vue3.0支持了Typescript

所以得先了解typescript的基本用法

1、数据声明方式

对数据类型进行了限制，否则会编译报错

编译ts命令 tsc xxx.ts -w(-w参数加上会表示监控，自动编译)，会生成一个xxx.js的文件，再使用命令node xxx.js执行即可

2、数据类型

ts的数据类型比js更丰富

1. 比如字面类型：
   
2. 比如unknown和any：unknown是只能随意切换自己的类型但不能将类型赋值给第三方类型，any可以随意切换类型
   
3. 比如数组类型和对象，
   
   
4. 比如void和never
   
5. 比如元组tuple，和数组类似但是会严格限制数组元素类型，
   
6. 比如枚举enum，类似Java枚举，java枚举具体使用参考：一、第一阶段------3、线程锁------闭锁（CountDownLatch：倒计时，为0放行）------枚举的介绍
   ts的枚举介绍如下：
   
7. 自定义类型（也叫类型别名）type,可以指定类型也能直接指定值
   

3、typescript编译

ts要编译成js，再用node执行js文件，其中编译最好是能将所有需要编译的文件管理起来，下面介绍下编译配置文件步骤：
1、cmd进入ts文件所在目录，输入命令tsc --init，会生成一个文件tsconfig.json
2、编辑tsconfig.json

3、配置项属性compilerOptions介绍

4、ts类和面向对象介绍

和java基本一致、属性、构造器、继承、接口、继承接口后方法必须实现的控制、泛型。。。等都有

二、vite构建工具

两种打包工具webpack和vite，但是vite比webpack快很多性能也好很多

1、vite2创建项目

需要node 12.0以上版本
输入命令 npm create vite

三、vue3.0新特性

1、高亮检测插件不同

1. 搭建好vue3.0的项目框架后会出现一堆高亮下划线报错，原因是vue语法检测高亮提示由vetur改成了volar，所以要先禁用或卸载vetur
   

2、配置文件不同

3、setup语法糖

1. 子组件引入即可，无需声明
   
2. 数据无需export和return
   

4、父子之间传参的区别

1、父传子

1. vue2.0
   

2. vue3.0(含js语法到ts语法的转换优化)，下面是子组件接收的写法，父组件写法和2.0一样
   

2、子传父

1. vue2.0
   
2. vue3.0使用defineEmits（js语法）
   
3. ts语法（一般来说vue3.0都写ts语法的）
   

5、插槽：useSlots和useAttrs

useSlots使用案例

useSlots和useAttrs一起使用

6、对外暴露属性defineExpose

在vue2.0中，子直接调用父组件属性或方法、或者父调用子的，我们使用this.$parent.event或者this.$children[0]、this.$refs.xxx来直接调用
在vue3.0中，使用defineExpose暴露出去才可获取使用，如下图示例：
示例一：

示例二：

四、vue3.0+typescript实战：后台管理系统

参考博客：vue3.0实战

五、基于mysql+js+webpack的API接口案例

参考源码：gitee