csg-moui v0.0.19

Vue 3 + TypeScript + Vite

package.json文件

    name: 项目名称,
    private: 是否私有，设置为 true 时，npm 拒绝发布,
    version: 项目包的版本号，「主版本号. 次版本号. 修订号」,
    workspaces: 工作区,
    author: { name: "作者csg", email: "xxxxx@xx.com", url: "地址" },
    contributors: { name: "贡献者", "email: "xxxxx@163.com", url: "地址" } ],
    repository: { type: "git", url: "代码地址" },
    homepage: "项目预览地址",
    description: "包描述",
    keywords: 关键词,类型包描述,
    files: 发布到npm上的目录,
    main: 指定加载的入口文件,默认值是模块根目录下面的index.js 文件,
    module: 定义 npm 包的 ESM 规范的入口文件,
    exports: 映射,
    engines: 说明依赖包的具体版本号,
    scripts: 指定运行脚本命令的 npm 命令行缩写,
    dependencies: 生产环境必须的依赖包,
    devDependencies: 开发阶段需要的依赖包,不会被安装到生产环境中,
    peerDependencies: 用于开发插件，防止项目安装该插件时，多次安装相同的库

IDE Setup

• VS Code + baidu

vue

    透传Attributes            父组件的属性和事件会自动透传到子组件根元素上(子组件中用prop或emit接收的除外)
    禁用 Attributes           必须在组件export default中设置 inheritAttrs: false
        v-bind="$attrs"          禁用Attributes,并在子组件某一标签上添加v-bind="$attrs",该标签则可得到透传Attributes
        多根节点的 Attributes      有着多个根节点的组件没有自动 attribute 透传行为,必须指定v-bind="$attrs"
        访问透传 Attributes        <script setup> 中使用 useAttrs() 访问所有透传 attribute(非响应式)
        slots 和 attrs           模板中直接通过 $slots 和 $attrs 访问,setup中用用 useSlots() 和 useAttrs()

vue + typescript

InjectionKey    类型化的 InjectionKey,解决provide和inject传递复杂类型时出现unknown

typescript

    as | <>         类型断言,告诉编辑器就是这个类型 employees as string | <string>employees
    as const        被称为const 断言，它的作用是让里头的所有东西变成只读(只是一个障眼法，并非真的不能改)
    Record          定义一个对象的 key 和 value 类型 或 将一个类型的所有属性值都映射到另一个类型上并创造一个新的类型.
                        interface EmployeeType {
                            id: number;
                            role: string;
                        }
                        const employees: Record<number, EmployeeType> = {
                            0: { id: 1, role: "Designer" }
                        }
    any | unknown   与 any 一样，所有类型都可以分配给unknown,但不缩小类型，就无法对 unknown 类型执行任何操作
    keyof           从对象类型中提取键类型，创建联合类型 test:keyof EmployeeType ==> test: number | string
    is              一般用于函数返回值类型中，判断参数是否属于某一类型，并根据结果返回对应的布尔类型
                        // 当判断条件为true, 即str为string类型时, 代码块中str类型也转为更明确的string类型
                            function isString(str:unknown):s is string{
                                return typeof str === 'string'
                            }
                        // 通过泛型定义通用类型保护函数(联合类型非交叉属性时判断某一属性是否属于其中一个类型)
                            function isOfType<T>(
                                target: unknown,
                                prop: keyof T
                            ): target is T {
                                return (target as T)[prop] !== undefined;
                            }

vue3 响应式原理

响应式原理的核心是使用 Proxy 拦截数据的更新和获取操作，再使用 Reflect 完成原本的操作
new Proxy(target, handler)
    target：被代理的目标对象
    handler：执行各种操作时代理对象的行为，包括get()读取target属性时触发，set()修改target属性值时触发

scss语法

    @use 'sass:map';     导入
    @include             类似占位符,结合@mixin使用,将@mixin中的内容替换到@include中
    !default             如果变量已经被赋值,不会再被重新赋值,否则会被赋予新的值
    !global              将局部变量转换为全局变量
    @content             获取@include中传递过来的所有内容-不是()中的参数
    @warn                打印终端
    @at-root             放弃当前嵌套层级,只在当前层有效果