# cx-element
> cx element
Latest version **0.5.7** (published 2021-06-03) · 0 weekly downloads
## Install
```sh
npm install cx-element
pnpm add cx-element
yarn add cx-element
bun add cx-element
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.5.7 |
| Published | 2021-06-03 |
| First published | 2021-04-23 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 82.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | zheqiuzi |
## Links
- npm: https://www.npmjs.com/package/cx-element
- npm.io page: https://npm.io/package/cx-element
## Dependencies (6)
- [rollup](https://npm.io/package/rollup.md) ^2.50.4
- [rollup-plugin-vue](https://npm.io/package/rollup-plugin-vue.md) ^6.0.0
- [@rollup/plugin-image](https://npm.io/package/@rollup/plugin-image.md) ^2.0.6
- [rollup-plugin-eslint](https://npm.io/package/rollup-plugin-eslint.md) ^7.0.0
- [rollup-plugin-cleaner](https://npm.io/package/rollup-plugin-cleaner.md) ^1.0.0
- [rollup-plugin-typescript2](https://npm.io/package/rollup-plugin-typescript2.md) ^0.30.0
## Recent versions
- 0.5.7 (latest) — 2021-06-03
- 0.5.6 — 2021-06-03
- 0.5.5 — 2021-06-03
- 0.5.4 — 2021-06-03
- 0.5.2 — 2021-06-03
- 0.5.1 — 2021-05-31
- 0.1.34 — 2021-05-30
- 0.1.33 — 2021-05-30
- 0.1.32 — 2021-05-30
- 0.1.31 — 2021-05-30
- 0.1.30 — 2021-05-30
- 0.1.29 — 2021-05-28
- 0.1.27 — 2021-05-28
- 0.1.26 — 2021-05-28
- 0.1.24 — 2021-04-26
- … 22 more at https://npm.io/package/cx-element/versions
## README
# cx-element
## Project setup
```
yarn install
```
### Compiles and hot-reloads for development
```
yarn serve
```
### Compiles and minifies for production
```
yarn build
```
### Run your unit tests
```
yarn test:unit
```
### Run your end-to-end tests
```
yarn test:e2e
```
### Lints and fixes files
```
yarn lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
# 创新UI组件库
创新UI组件库是基于vue3.0 + element-plus搭建的UI组件库，组件库采用源文件与测试及说明文档分离模式，拆分为两个项目，**cx-element** 为组件库开发项目，该项目包含组件组件模块和测试模块，**cx-element-doc**为项目的辅助说明文档。
#### 组件库技术栈：
##### 一、组件开发环境：
1.脚手架：vue3+ts
2.UI库：elementPlus
3.css预处理：scss
4.风格检查：eslint
##### 二、测试工具
1.Unit: [jest](https://www.jestjs.cn/)
2.e2e: [Cypress](https://docs.cypress.io/)
##### 三、文档工具:
1.[storebook](https://storybook.js.org/)
### 组件库文档结构说明：
```
project
│
└───src // 组件源文件目录
│ │ index.ts // 全量组件注册函数
│ │
│ └───组件名称 // 组件模块文件夹
│ │ 组件名称.vue // 组件模块vue
│ │ index.ts //组件注册函数
│
└───dist // 组件打包后的文件
│ │ index.ts // 全量安装组件
│ │
│ └───组件名称 // 组件模块
│ │ 组件名称.js
│ │ style.css
│
│───src // 用于组件开发过程中的测试目录
```
### 开发说明：
#### 获取项目:
``` js
步骤一：git clone xxx
```
#### 安装：
``` js
yarn 或者 npm i
```
###### 组件库开发应包含几个步骤
###### 一、组件设计
组件开发应该充分考虑组件的使用场景、组件的扩展性。
###### 二、组件开发
在components目录下创建一个目录用于组件开发，目录的名称可以使用cx+业务+名称的方式命名如：cx-order-list（短横线命名法,引用时写作: { CxOrderList }），目录下通常包含模块的vue文件和安装脚本（index.ts）
###### 三、组件测试以及测试用例编写
组件开发过程中可以在src目录下编写demo自测，开发完成后需要在tests目录下编写e2e或unit自动化测试文件
启动单元测试
```js
// 单元测试
npm run test:unit
// e2e 测试
npm run test:e2e
```
###### 四、组件文档编写
组件文档包含组件描述、应用场景、组件示例、参数说明、函数说明
```js
// 启动文档工具
npm run storybook
```
###### 五、组件发布
目前暂时没有npm私有库，使用的是git仓库，直接推送到git服务器即可，推送后需要为版本打上[附注标签](https://git-scm.com/book/zh/v2/Git-%E5%9F%BA%E7%A1%80-%E6%89%93%E6%A0%87%E7%AD%BE)，注意：是附注标签需要带备注，附注标签格式如下：
```js
git tag -a tag版本 -m '版本更新描述'
```
#### 组件使用说明
安装
```js
npm i git地址
```
配置按需加载
```js
// 安装按需加载插件
npm i babel-plugin-import
// 配置按需加载插件 babel.config.js
"plugins": [
[
"import",
{
"libraryName": "cx-element",
"style": (name, file) => {
return `${name}/style.css`;
}
}
]
]
```
在项目中使用
全局挂载
```js
// 引用
import { CxElement } from 'cx-element'
// 全局挂载
createApp(App).use(CxElement)
```
组件中使用
```js
// 引用
import { 组件名称 } from 'cx-element'
// 注册组件
@Options({
components: {
组件名称
}
})
// 使用组件
<组件名称/>
```
---
_Source: https://npm.io/package/cx-element · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._