# vite3-vue3-TS-ElementPlus-framework

**Repository Path**: zhang-chao-Mr/vite3-vue3-ts-element-plus-framework

## Basic Information

- **Project Name**: vite3-vue3-TS-ElementPlus-framework
- **Description**: 高复用、低耦合、高扩展组件库
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-12-01
- **Last Updated**: 2025-09-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 组件库开发文档

#### 描述

高复用、低耦合、高扩展组件库

## 安装指南

1. node 版本: `> 14.18` 推荐使用`14.19`版本
2. 在个人项目中使用该库时请先自行安装以下依赖：`npm install vue@3.2.41 lodash@4.17.21 element-plus@2.1.7 axios@1.3.3 qs@6.11.0 pinia@2.0.30 vuedraggable@4.1.0 echarts@5.4.1 -D` 由于以上依赖过于庞大且不是本项目组件库的内容，不直接参与打包

## 快速开始

1. 通用库打包: `npm run build:lib`
2. 低代码库打包: `npm run build:lc` 文件会打包至`src/lowCodeLib`
3. 项目启动: `npm run dev` 文件会打包至`src/lib`

## 工程目录介绍

```
|-- framework
    |-- App.vue 页面入口文件
    |-- auto-imports.d.ts
    |-- main.ts 项目入口文件
    |-- setting.js 组件配置
    |-- shims-vue.d.ts
    |-- vite-env.d.ts
    |-- bin
    |   |-- build.js 通用库打包配置
    |   |-- lowCodeBuild.js 低代码库打包配置
    |-- components
    |   |-- install.ts 开发组件库本项目组件
    |-- lib 通用库打包生成目录（全局组件都在CisFramework.js中，非全局组件会单独生成文件夹）
    |   |-- CisFramework.js
    |   |-- style.css
    |   |-- CisJsonViewer
    |       |-- CisJsonViewer.js
    |       |-- style.css
    |-- lowCodeLib 低代码库打包生成目录
    |   |-- CisLowCodeFramework.js
    |   |-- style.css
    |-- packages 组件开发目录
    |   |-- index.ts 通用库组件打包导出配置
    |   |-- lowCode.ts 低代码库组件打包导出配置
    |   |-- library 通用库组件目录
    |   |-- lowCode 低代码库组件目录
    |   |   |-- CisDesignView 低代码渲染视图组件
    |   |   |   |-- index.ts
    |   |   |   |-- index.vue
    |   |   |   |-- placementArea.vue
    |   |   |-- CisPageDesign 低代码整体页面组件
    |   |   |   |-- index.ts
    |   |   |   |-- index.vue
    |   |   |-- componentEvents 低代码组件之间事件处理组件
    |   |   |   |-- index.ts
    |   |   |   |-- index.vue
    |   |   |-- components 低代码通用组件
    |   |   |   |-- advance 高级组件
    |   |   |   |-- charts 图表组件
    |   |   |   |-- form 表单组件
    |   |   |   |-- layout 布局组件
    |   |   |-- props 组件属性组件
    |   |   |   |-- DesignParamSelect.vue 低代码参数选择组件
    |   |   |   |-- JSONSelect.vue 低代码参数选择组件
    |   |   |   |-- componentsProps.ts 低代码个组件基本配置信息
    |   |   |   |-- eventSelect.vue 低代码各组件事件选择组件
    |   |   |   |-- advance 高级组件属性
    |   |   |   |-- charts 图表组件目录
    |   |   |   |-- form 表单组件目录
    |   |   |   |-- layout 布局组件目录
    |   |   |-- store 全局状态
    |   |       |-- design.ts
    |   |-- utils 通用库及低代码库使用到的依赖
    |       |-- formValidate.ts 表单校验
    |       |-- index.ts 公用函数
    |       |-- validateReg.ts 正则表达式管理
    |-- pages 库本身开发时的页面
    |   |-- examples 组件示例
    |   |   |-- library 通用库组件示例
    |   |   |-- lowCode 低代码库组件示例
    |   |-- main 主页
    |       |-- index.vue
    |-- router 路由
        |-- index.ts
''
```

## 通用库组件开发流程（比如组件名称为 demo）

1. `/src/packages/library`目录下创建文件夹`Demo`（注意：组件名称遵循首字母大写和驼峰规则，后面不再赘述。）
2. `Demo`文件夹下创建`index.vue`（组件内容）和`index.ts`（该组件用于打包导出的信息）文件。
3. `index.ts`内容如下

```javascript
import type { App } from "vue";
import Demo from "./index.vue";
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
Demo.install = function (Vue: App) {
  // 遍历注册全局组件
  Vue.component("Demo", Demo);
};
export default Demo;
```

## 通用库组件打包流程

1. 在`/src/packages/index.ts`文件中配置打包信息，
2. `/src/packages/index.ts`内容如下

```javascript
import type {App} from "vue";
//示例组件
import Demo from './library/Demo' //这里引入你的组件
//组件列表
const components = {
    Demo, //这里添加你的组件至组件列表
} as any;

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue: App, options: any): void {
    if (options && options.hasOwnProperty('http')) {
        const {http} = options;
        //provide注入$http方法
        Vue.provide('$http', http);
    }
    // 遍历注册全局组件
    Object.keys(components).map(name => {
        Vue.component(name, components[name])
    })
};

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install
};
```

## 通用库使用流程

1. 将打包出来的`CisFrameWork.js`以及`style.css`引入到需要使用的工程中,一般会放到`/src/lib`目录下
2. 使用示例代码如下

```javascript
//组件库
import framework from "@/lib/CisFramework/CisFramework.js";
//组件库css
import "@/lib/CisFramework/style.css";

app.use(framework).mount("#app");
```

## 低代码库组件开发流程（比如组件名称为 DesigndDemo）

### 所有低代码组件命名都以 Design 开头

1. 确定你的组件属于那种组件类型，具体对应目录参考上方目录说明，假设这里为高级组件
1. `/src/packages/lowCode/components/advance/`目录下创建文件夹`DesigndDemo`（注意：组件名称遵循首字母大写和驼峰规则，后面不再赘述。）
1. `DesigndDemo`文件夹下创建`index.vue`（组件内容）和`index.ts`（该组件用于打包导出的信息）文件。
1. `index.ts`内容如下

```javascript
import type { App } from "vue";
import DesigndDemo from "./index.vue";
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
DesigndDemo.install = function (Vue: App) {
  // 遍历注册全局组件
  Vue.component("DesigndDemo", DesigndDemo);
};
export default DesigndDemo;
```

## 低代码库属性配置组件

### 低代码库没个组件都会对应一个属性配置的组件，这里添加一个 DesigndDemo 的属性配置组件 DesigndDemoProps

### 属性配置组件的命名都在原组件的后面加上 props，保持统一，否则在开发时会导致属性解析错误。

1. 确定你的组件属于那种组件类型，具体对应目录参考上方目录说明，假设这里为高级组件
1. `/src/packages/lowCode/props/advance/`目录下创建文件夹`DesigndDemoProps`（注意：组件名称遵循首字母大写和驼峰规则，后面不再赘述。）
1. `DesigndDemoProps`文件夹下创建`index.vue`（组件内容）和`index.ts`（该组件用于打包导出的信息）文件。
1. `index.ts`内容如下

```javascript
import type { App } from "vue";
import DesigndDemoProps from "./index.vue";
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
DesigndDemoProps.install = function (Vue: App) {
  // 遍历注册全局组件
  Vue.component("DesigndDemoProps", DesigndDemoProps);
};
export default DesigndDemoProps;
```

## 低代码库组件打包流程

1. 在`/src/packages/lowCode.ts`文件中配置打包信息，
2. `/src/packages/lowCode.ts`内容如下

```javascript
import type {App} from "vue";
//示例组件
import DesigndDemo from './lowCode/components/advance/DesigndDemo'
//示例组件属性配置组件
import DesigndDemoProps from './lowCode/props/advance/DesigndDemoProps'
//组件列表
const components = {
    DesigndDemo, //这里添加你的组件至组件列表
    DesigndDemoProps
} as any;

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，那么所有的组件都会被注册
const install = function (Vue: App): void {
    // 遍历注册全局组件
    Object.keys(components).map(name => {
        Vue.component(name, components[name])
    })
};

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install
};
```

## 低代码库使用流程

### 这里要注意低代码库部分组件继承于通用库，所以使用时务必和通用库一同引入项目中。

1. 将打包出来的`CisLowCodeFramework.js`以及`style.css`引入到需要使用的工程中,一般会放到`/src/lib`目录下
2. 使用示例代码如下

```javascript
//组件库
import framework from "@/lib/CisFramework/CisFramework.js";
//组件库css
import "@/lib/CisFramework/style.css";
//低代码库
import CisLowCodeFramework from "@/lib/lowCode/CisLowCodeFramework.js";
//低代码库样式
import "@/lib/lowCode/style.css";

app.use(framework).use(CisLowCodeFramework).mount("#app");
```

## 组件示例

1. `/src/pages/examples/library`通用库组件调试目录，`/src/pages/examples/lowCode`低代码库库组件调试目录
2. `/src/setting.js`配置后将自动生成路由

## 低代码库组件开发注意事项

1. 每次开发完打包留意打包的打印信息，一般每次更新文件大小增长的跨度不会太大。
2. 注意组件命名规范。
3. 若组件使用到请求功能时，请参照通用库中的表格组件 CisTable 的请求
4. CisTable 中使用到的 http 实例

```javascript
//http请使用inject中的实例，而非库本身utils中的请求实例。
const http_ = inject('$http') as any;
```