scc-packages

v1.3.0

整体

1、添加cli工具

每次新创建一个组件，都需要创建一套组件目录文件结构、注册该组件、在文档中添加该组件文档、Demo等操作，整个过程繁琐且没价值，而组件库可能会有几十个组件，所以很有必要开发一个 cli 用于快速创建组件，同时实现创建组件的规范化。

组件库

1、优化国际化功能

2、优化上传中心、下载中心

---

v1.2.7

添加i18n组件

1、提供 Web UI 平台统一管理、配置国际化消息。 2、自定义配置国际化文本，字段，缩写等。

3、提供限定页面区域翻译功能，更精准控制国际化范围。

4、可在已经使用了i18n配置的基础上使用，互不影响。

v1.2.6

一、整体：

1、添加VueUse库

二、examples：

三、packages：

---

v1.2.5

添加docs目录，用于发布文档

一、examples

1、首页优化

2、添加展示demo

3、添加VuePress文档

4、添加antd动态图标组件

5、添加图标按钮组件

二、packages

---

v1.2.4

1、基础结构调整

2、Examples API工具封装

3、添加表格组件库vxe-table

4、封装LeFilter组件

5、封装LeGrid组件

---

v1.2.3

1、Packages添加Vitest测试：单元测试、组件测试

添加**@types/node**，支持使用es方式引入node.js模块

package.json添加测试脚本 test:

{
  // ...
  "scripts": {
    "test": "vitest"
  }
}

组件的单元测试 #

一个组件可以通过两种方式测试：

1. 白盒：单元测试 白盒测试知晓一个组件的实现细节和依赖关系。它们更专注于将组件进行更 独立 的测试。这些测试通常会涉及到模拟一些组件的部分子组件，以及设置插件的状态和依赖性。
2. 黑盒：组件测试 黑盒测试不知晓一个组件的实现细节。这些测试尽可能少地模拟，以测试组件在整个系统中的集成情况。它们通常会渲染所有子组件，因而会被认为更像一种“集成测试”。

2、添加postCss配置，更好的发挥css能力

3、Examples添加布局，菜单和组件展示，方便调试

4、添加antD UI组件库

5、添加表格组件库Surely Vue

---

v1.2.1

1、添加 . npmrc 配置文件，并配置shamefully-hoist：

shamefully-hoist = true

如果某些工具仅在根目录的node_modules时才有效，可将shamefully-hoist设置为true来提升那些不在根目录的 node_modules 。

2、添加 .pnpm-workspace.yaml 配置文件，将包关联起来

packages:
    - 'packages/**'
    - 'examples'

3、添加tsconfig.json配置文件，用于配置typescript

4、添加examples目录，并在该目录下创建vite+vue3项目，用于调试组件

在examples下添加vite.config.ts配置文件

在examples下添加 typings/vue-shim.d.ts 文件，用于配置解析.vue文件

declare module '*.vue' {
    import type { DefineComponent } from "vue";
    const component:DefineComponent<{},{},any>
}

5、调整packages目录下的 utils目录

6、调整packages目录下的 components目录

添加vite.config.ts配置文件, 添加打包配置

7、调整 components 下package.json ，配置打包发布相关

---

LenFilterPanelUpload、LenUploadCenter

Example

main.js

import sccPackages from 'scc-packages'
Vue.use(sccPackages)

参数

data() {
    return {
      filterButton: [
        { index: '1', title: 'Search', icon: 'search', callback: 'search' },
        { index: '2', title: 'Clear', icon: 'undo', callback: 'clear' },
      ],
      dropDownListApi: this.$Axios.confForm.dropDownList,
      uiFilterApi: this.$Axios.confForm.filters,
      tableHeaderApi: this.$Axios.table.headers,
      tableDataApi: this.$Axios.table.data,
      uploadProgressApi: this.$Axios.uploadCenter.uploadProgress,
      exportProgressApi: this.$Axios.table.exportProgress
    }
  },

组件

<len-filter-panel-upload
    :uiKey="$attrs.uiKey"
    :filterButton="filterButton"
    :dropDownListApi="dropDownListApi"
    :uiFilterApi="uiFilterApi"
>
</len-filter-panel-upload>

<len-upload-center
      uiKey="uploadCenter/uploadCenter_list"
      :filterButton="filterButton"
      :dropDownListApi="dropDownListApi"
      :uiFilterApi="uiFilterApi"
      :tableHeaderApi="tableHeaderApi"
      :tableDataApi="tableDataApi"
      :uploadProgressApi="uploadProgressApi"
      :exportProgressApi="exportProgressApi"
    >
</len-upload-center>

Customize configuration

See Configuration Reference.