初窥element3
本人菜鸟一枚，简单的分享下element3的入门分享
首先从github上下载element3的源码（如果网慢的同学可以先保存在码云上再从码云上下载下来）
然后从vscode打开我们先简单看看目录结构
packages/element/build目录放的一般是自动化ci脚本，webpack配置的一些代码。
packages/element/src目录下放的是工具函数， 相关的入口。
packages/element/tests目录放的都是测试的组件对应的是packages里面的组件。
packages/element/types一般放的都是TS的接口声明
packages/element/packages/src/theme-chalk文件夹下放的scss主题样式
packages/element3/jest.config.js jest测试框架的配置
先把element3的项目跑起来
cd 到packages/element3文件下 执行 “yarn” 命令下载依赖
然后在执行 yarn dev
我们还需要进到 website 目录下 执行 “yarn dev”
webpack端口号是8087
浏览器输入localhost:8087就可以看到官方的示例demo
接下来我们来简单分析下button的源码
先从button的换肤开始看
import { useGlobalOptions } from '../../src/use/globalConfig'
import { toRefs, inject, computed } from 'vue'
==================button按钮 导入===============================
导入全局的配置选项 注入，计算属性
在template，button中
class="el-button"
:class="classes"
:type="nativeType"
显示基础默认的class 换肤逻辑是 传过来的type类型 type+默认的class名字
通过绑定class值来进行button按钮的换肤
在element2中是直接在templeate中就行判断
在element3中用的新的vue3语法改造
为什么使用compsition API写法
使用传统的option配置方法写组件的时候问题，随着业务复杂度越来越高，代码量会不断的加大；
由于相关业务的代码需要遵循option的配置写到特定的区域，导致后续维护非常的复杂，同时代码
可复用性不高，而composition-api就是为了解决这个问题而生的
如何使用compsition API
开始使用Composition API，我们需要一个可以实际使用它的地方。在Vue组件中，我们将此位置称为setup.
setup使用注意
由于在setup执行时尚未创建组件实例，因此选项this内部没有任何内容setup。这意味着，除了
props，您将无法访问组件中声明的任何属性-本地状态，计算属性或方法。
props中收到数据进行预处理符合数组中的字符串返回true否则false
所以在这个button中先是在setup中定义了classes，调用函数useclass把相应的值传进去
接着在函数useclasses中return计算属性（响应式）判断加入props的值不为空就返回字符串el-button-- + 数据类型，如果为false则为空
