Scc-packages NPM

scc-packages

v1.3.0

整体

1、添加cli工具

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

组件库

1、优化国际化功能

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

1659519242669

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"
  }
}

组件的单元测试 #

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

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

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>