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.

创新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

 三、文档工具:

  1.storebook

组件库文档结构说明：

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: {
    组件名称
  }
})
// 使用组件
<组件名称/>