t-ui-vuejs v0.0.0

t-ui

Vue 3.0

参考文档

Reusability & Composition

Teleport 传入

将模板挂载到 DOM 中的其他位置。

使用多个 Teleport 挂载到同一目标元素，顺序为简单的追加。

【Advanced】Composition API

setup 组件选项

1. 在组件创建之前执行（所以 this 为 undefined），只能访问参数中提供的属性（props ， attrs ， slots ， emit），无法访问其他组件选项（data ， computed ， methods）
2. 返回的内容将暴露给组件的其余部分（计算属性、方法、生命周期钩子……）以及组件模板
3. 在 setup 中注册生命周期钩子：添加 on 前缀（onMounted(callback)）并从 Vue 引入（import { onMounted } from 'vue'）；回调函数将在组件调用钩子时执行

参数：props

props 支持响应式（子组件值自动更新）。

参数：context

const { attrs, slots, emit } = context

provide & inject（提供和注入）

1. 父组件使用 provide 选项提供数据，子组件使用 inject 选项使用数据（无论嵌套多深，解决 prop 传递组件链过长的痛点）
2. 为数据添加响应性：使用 ref/reactive 包装为响应式数据；如此当数据更改时，注入者也将自动更新数据
3. 尽可能在提供者内更新响应式数据；如需在注入者中更新数据，建议在提供者中提供一个对应的方法，该方法负责改变响应式数据，最后在注入者中使用 inject 引入该方法即可
4. 确保提供的数据不被注入者篡改：使用 readonly(data) 包装提供的数据

注：提供者——使用 provide 提供数据的组件；注入者——使用 inject 获取数据的组件

Vue Router

参考文档 4.0 参考文档 3.x

响应式页面

以移动端为主逐步展开

根据 chrome device toolbar 划分为： 1. Mobile S/M/L - 320px/375px/425px 2. Tablet - 768px 3. Laptop /L - 1024px/1440px 4. 4K - 2560px

NPM

CLI commands

• npm info xxx versions
• npm config get registry
• npm config set registry https://registry.npmjs.org/[https://registry.npm.taobao.org/]
• npm login/publish/logout

每次 publish 的 version 不能与之前相同。

Sass

@mixin response($device) {
  @if($device == $MobileS) {
    @media (min-width: $MobileS) { // 至少达到 $MobileS 才应用样式
      @content
    }
  } @else if($device == $MobileM) {
    @media (min-width: $MobileM) and (max-width: $MobileL){ // 至少达到 $MobileM 才应用样式，且最大不能超过 $MobileL
      @content
    }
  }
}

Icon

阿里巴巴矢量图标库

使用 svg 方案生成的链接时，如果存在顾虑，可以将链接复制到本地打开，复制里面的代码，自己生成 js 文件重新引入。

WebStorm

文档 1. 更新个人配置信息并保存到 github ，通过 File | Manage IDE Settings 进行导出和导入 2. 配置 Code Style ，快捷格式化代码 3. 侧边栏集成的工具可以通过 Ctrl + Shift + 方向键 进行固定宽高调整为一致