组件开发

组件使用

bash

pnpm install @vue3-simple-bui/bui
pnpm install @vue3-simple-bui/platform
pnpm install @vue3-simple-bui/svg-icons

关于组件安装之后使用说明：

前置依赖说明

如果将组件库是部署到私有的 npm 仓库，建议使用的主框架通过集成.npmrc 文件的方式进行源的配置。这样 子项目可以直接进行安装。

组件库进行打包时为了减少打包体积，排除了下面这些依赖项，排除的这些依赖成为了前置依赖，前置依赖是在使用项目中进行安装的。

库模式下前置依赖列表：

javascript

[
  '@ant-design/icons-vue',
  'ant-design-vue',
  'axios',
  'dayjs',
  'lodash-es',
  'vue',
  'vue-types',
  'vue-i18n',
];

前置依赖需要项目系统进行安装。

需要注意的一点是：@vue3-simple-bui/project增加了 vue-i18n，因此在使用@vue3-simple-bui/project的项目中需要多增加 vue-i18n 的前置依赖。

组件开发

组件开发主要分为以下几个步骤：

组件目录

首先在 bui/src 下创建组件文件夹，文件夹名称建议使用-连接，如 status-text。

在status-text要新增一下几个文件 (建议按下面目录)：

index.ts        【入口文件】
style          【样式文件】
components      【组件文件】
README.md       【组件文档】

样式文件，组件库采用了less作为样式语言，样式文件放在style文件夹下，包含入库文件index.ts和具体的组件样式，例如：

style
  |———— index.ts
  |____ status-text.less

其中index.ts文件内容如下：

import './status-text.less';

之后在src/style.ts中引入status-text/style文件夹下的样式文件：

import './status-text/style';

致此，组件的样式文件已经完成。

组件文件，在status-text建立components文件夹，里面包含组件的具体实现，例如：

components
  |____ status-text.tsx

注意：

组件正常编写即可，编写过程中需要什么文件按需增加即可。

组件编写完成后，需要在index.ts中导出组件，如下：

typescript

import type { App, Plugin } from 'vue';
import BStatusText from './components/status-text';

BStatusText.install = function (app: App) {
  app.component((BStatusText as Record<keyof typeof BStatusText, string>).name, BStatusText);
  return app;
};

export default BStatusText as typeof BStatusText & Plugin;

在src/components.ts中导出刚才编写的 status-text 组件

typescript

export { default as BStatusText } from './status-text';

至此，一个业务组件开发完成。

组件测试

在demo工程下面建立项目文件夹进行测试开发完成的业务组件。首先在 views 下面建立status-text组件的测试页面，然后在router中配置路由。

status-text
  |____ BStatusText.vue

在 BStatusText.vue 组件中编写测试代码，例如：

vue

<template>
  <div style="height: 300px">
    <span style="font-weight: 600; font-size: 15px">状态组件示例</span>
    <BStatusText text="启用" />
    <BStatusText :enable="false" text="作废" />
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

在路由文件中增加相关路由，即可测试了。

组件文档

组件测试完成，没有问题之后需要编写组件使用文档以及组件使用文档中的 dome 示例。

组件文档使用 markdown 语法编写。

组件文档可以在组件的 README.md 文件中编写，在 docs 子工程中引入，也可以直接在 docs 子工程中编写。

组件文档的内容一般包括：

组件介绍
组件示例
注意事项

API
  组件属性
  组件方法
  组件事件

自己灵活把握即可！

组件发版

DANGER

组件开发 ​

组件使用 ​

组件开发 ​

组件目录 ​

组件测试 ​

组件文档 ​

组件发版 ​

组件开发

组件使用

组件开发

组件目录

组件测试

组件文档

组件发版