开发 tdesign-vue-next 组件

一、开发环境

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

dev端口: 3336

二、组件开发流程

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

1. 单个组件中，提供 index 组件入口。并使用 withInstall 方法包装组件（用于组件注册）,具体如下代码。

import { withInstall } from '../../utils';

import _Table from './table.vue';

export const Table = withInstall(_Table);

export default Table;

2. 在当前项目 components 目录的入口 index 中导出组件。

export * from './button'
export * from './tag'
export * from './table'
// ...

3. 根目录 installer.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))
}

三、demo组件注意事项

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

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

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