Vue3.0+typescript+element plus 持续更新中

1.Node环境配置
推荐使用nvm 管理node.js Vue3.0及后续版本均在12x后的node版本中运行，nvm具体操作可以异步度娘

2.Vue3.0构建方式
官方给出了两种直接构建方式，前提是在cli4x之后，若脚手架版本过低可以@next升级后使用
1.> vue create xxx 传统构建方式 有npm 驱动
2.> npm install -g create-vite-app
使用 ‘create-vite-app xxx’ 的方式
区别在于传统的 create xx 方式 利用了webpack 编译周期会很长需要加载各类编译资源
而使用‘vite’构建则会利用ES6import发送请求去加载文件的特性,拦截这些请求, 做一些预编译, 省去webpack冗长的打包时间
3.环境支持 对TypeScript 有兴趣的可以在安装时选择,Vue3.0及element plus 版本支持

推荐选择第三中自定义模板安装，前两种分别对应的是2，及3版本的标准模板

和我们在Vue2.0下使用该选项的时候一样我们可以自由选择需要的工具

选择完成之后我们在这里选3.x Pre 版本安装

构建完成后外层目录其实和之前是一样的没有任何变化

展开之后我们看到原来.js文件现在都被.ts取代

打开router 发现路由创建方式已经完全被修改，import VueRouter from 'vue-router' 已经被import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';取代
传统的构建方式也被取代

进入正题我们开始分析组件的构成

除去函数式，及class 等构件方式我们最熟悉的其实也就是模板化的构建方式
在使用了TS之后我们需要特别注意的是 组件的类型需要被约束，为了支持强类型的需要我们不能直接使用export default方式去构建驱动层，数据层； 而是需要使用defineComponent类的帮助

export function defineComponent(options: unknown) {
  return isFunction(options) ? { setup: options } : options
}

我们可以看出defineComponent是针对Vue3.0下setup()的封装及返回一个可以校验类型的options对象
这样就解决了TS下需要类型强校验的问题

接下来我们看数据的定义，使用了TS之后我们在使用前需要对数据类型做定义 在steup中我们来定义需要使用的所有方法，数据，及各类变量；没有了以前的data()我们需要定义数据变量的时候需要借助

reactive

reactive函数为我们构建并返回了一个响应式数据对象，当然我们也可以使用toRefs 的方式

将所有reactive中的对象转成普通对象并且每个对象的属性现在都含有了ref,都被变成了可以由ref获取的响应式数据
Vue3.0中不再含有data(）,数据使用也不在是this.xxx的形式
这里我们要区分开来两种定义数据的形式，即

reactive <==>ref

前面我们提到了reactive 形式创建的数据是一个响应式数据且是由reactive函数返回的，而由ref创建的我们称之为普通对象，ref创建的数据比较单一 const row =ref('1'),那么在修改时需要使用的是row.value=xx 而reactive 可以直接使用定义的state.xxx来完成修改

import { useRouter, useRoute } from 'vue-router';

组件内的路由现在由这两个函数分别对应返回
使用时const router:any=useRouter();

  router.push({
               path:'xx'
           })

必须要明确的是同所有强类型语言一样，支持TS的Vue3.0 也为我们提供了两个可以方便使用的依赖注入

import {provide,inject} from 'vue';

私有化的声明保证了当前被provide,inject使用的内容只能在当前setup()活动组件内生效
provide()和inject()可以实现嵌套组件之间的数据传递，这两个函数只能在setup()中使用。父级组件中使用provide()函数向下传递，子组件中使用inject()获取上层传递过来的数
学习Vue3.0的核心重点放在Composition API（组合式）中 后续完成会开源整体