Press Components

Appearance

开发 Press TDesign Vue Next 组件 ​

1. 开发环境 ​

  1. 进入组件项目：packages/tdesign-vue-next
  2. 安装依赖：pnpm install
  3. 执行命令：pnpm dev

dev 端口: 3336

2. 组件开发流程 ​

组件目录位于工程：packages/tdesign-vue-next/components。可参照已有组件进行新组件开发。

  1. 单个组件中，提供 index 组件入口。并使用 withInstall 方法包装组件（用于组件注册），具体如下代码。
ts
import { withInstall } from '../../utils';

import _Breadcrumb from './breadcrumb.vue';

export const Breadcrumb = withInstall(_Breadcrumb);

export default Breadcrumb;
  1. 在当前项目 components 目录的入口 index 中导出组件。
ts
export * from './breadcrumb';
export * from './header-avatar';
export * from './header-role';
// ...
  1. 根目录 installer.ts 中，添加新开发的组件
ts
import { App } from 'vue'
import { Table } from './components/table'
import { Menu } from './components/menu'

const components = [
  Table,
  Menu
]

export const installer = (app: App) => {
  components.forEach((comp) => app.use(comp))
}

3. demo 组件注意事项 ​

开发调试的时候，都是通过使用 demo 组件 来开发调试组件，在当前项目启动的 dev server，访问的是 demo 组件而非组件库中的组件。

路由文件：tdesign-vue-next/demo/router.ts

  1. demo 目录中建立对应的文件夹，以组件名称为文件夹名称
  2. demo 组件命名，以 组件名+功能 的方式进行命名。如自定义列的 table 组件：table
  3. 添加路由。注意，路由不仅仅是当前项目中访问，在 docs 项目中也是需要的，并且 docs 中的插件会通过一定规则来访问 demo 组件的源码文件，所以 路由 path 需要和文件名一致。