一、所用技术栈
Vue3 Composition API + TypeScript + vite + vue-router + sass + prismjs
二、技术细节
- 基于Vue3 + TypeScript 的简洁UI框架，涵盖了Switch、Tabs、Dialog等常见的UI组件，支持全量加载和按需加载
- 使用了Vue3中setup、onMounted、watchEffect、ref、computed等Composition API
- 通过context.slots.default()来获取父组件中slot传来的内容，并判断传来内容是否为一个组件
- 深入理解了组件化的思想和嵌套组件的写法，掌握了库模式打包，模块化和按需加载的意义
- 组件库官网采用媒体查询适配布局，兼容pc端、平板电脑和移动端的适配显示
- 官网代码支持高亮显示，使用rollup进行项目库打包，并发布npm包
三、官网地址
1、首页
2、使用
3、Switch组件
4、Button组件
5、Dialog组件
6、Tabs组件
7、Input组件
8、Table组件
四、学习记录
1、ref( 使变量另行具备响应式 )
import {ref} from 'vue'
const value = ref<boolean>(false)
return {
value
}
2、setup(composition ApI)
export default{
/*
props 为父组件传过来的属性
context 为当前实例
*/
setup(props,context){
//this.$emit('xxx')
context.emit('xxxx')
}
}
3、v-model
<switch :value='x' @update:value="x=$event"/>
<switch v-model:value="y"/>
4、inheritAttrs:false（组件内部不在继承调用时传来的属性）
默认所有属性都绑定到了根元素之上
<script lang="ts">
export default {
inheritAttrs:false
}
</script>
5、props vs attrs 的区别
（1）props需要先声明才能取值，attrs不用先声明
（2）props不包含事件，attrs包含
（3）props支持string以外的类型,arrts只有string类型
（4）props没有声明的属性，会跑到attrs里面去
6、ui库不能使用scoped ,每一个class 必须添加前缀，css最小影响原则
7、检查子组件传来的参数，是不是一个组件。
每一个.vue文件都将转换成type 而这个type 就是一个render函数。
8、组件内部获取slot传来的内容
//使用context.slots.default()来获取
9、v-for 获取每一个el元素
内部用途 v-for
在内部使用时，Composition API模板引用没有特殊处理v-for。而是使用函数ref来执行自定义处理：
<template>
<div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }">
{{ item }}
</div>
</template>
<script>
import { ref, reactive, onBeforeUpdate } from 'vue'
export default {
setup() {
const list = reactive([1, 2, 3])
const divs = ref([])
// make sure to reset the refs before each update
onBeforeUpdate(() => {
divs.value = []
})
return {
list,
divs
}
}
}
</script>
