cx-element v0.5.7
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
创新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
2.e2e: Cypress
三、文档工具:
组件库文档结构说明:
project
│
└───src // 组件源文件目录
│ │ index.ts // 全量组件注册函数
│ │
│ └───组件名称 // 组件模块文件夹
│ │ 组件名称.vue // 组件模块vue
│ │ index.ts //组件注册函数
│
└───dist // 组件打包后的文件
│ │ index.ts // 全量安装组件
│ │
│ └───组件名称 // 组件模块
│ │ 组件名称.js
│ │ style.css
│
│───src // 用于组件开发过程中的测试目录
开发说明:
获取项目:
步骤一:git clone xxx
安装:
yarn 或者 npm i
组件库开发应包含几个步骤
一、组件设计
组件开发应该充分考虑组件的使用场景、组件的扩展性。
二、组件开发
在components目录下创建一个目录用于组件开发,目录的名称可以使用cx+业务+名称的方式命名如:cx-order-list(短横线命名法,引用时写作: { CxOrderList }),目录下通常包含模块的vue文件和安装脚本(index.ts)
三、组件测试以及测试用例编写
组件开发过程中可以在src目录下编写demo自测,开发完成后需要在tests目录下编写e2e或unit自动化测试文件
启动单元测试
// 单元测试
npm run test:unit
// e2e 测试
npm run test:e2e
四、组件文档编写
组件文档包含组件描述、应用场景、组件示例、参数说明、函数说明
// 启动文档工具
npm run storybook
五、组件发布
目前暂时没有npm私有库,使用的是git仓库,直接推送到git服务器即可,推送后需要为版本打上附注标签,注意:是附注标签需要带备注,附注标签格式如下:
git tag -a tag版本 -m '版本更新描述'
组件使用说明
安装
npm i git地址
配置按需加载
// 安装按需加载插件
npm i babel-plugin-import
// 配置按需加载插件 babel.config.js
"plugins": [
[
"import",
{
"libraryName": "cx-element",
"style": (name, file) => {
return `${name}/style.css`;
}
}
]
]
在项目中使用 全局挂载
// 引用
import { CxElement } from 'cx-element'
// 全局挂载
createApp(App).use(CxElement)
组件中使用
// 引用
import { 组件名称 } from 'cx-element'
// 注册组件
@Options({
components: {
组件名称
}
})
// 使用组件
<组件名称/>
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago