misp-ui-library-test

Misp UI Library 组件库

基于 Vue2 的轻量级 UI 组件库，提供丰富的可复用组件。

特性

• 基于 Vue2 开发
• 支持全局引入和按需引入
• 使用 VuePress 生成文档
• 统一的设计语言
• 使用 Webpack 构建

快速开始

安装

# 全局引入
npm install misp-ui-library

# 按需引入
npm install misp-ui-library/lib/button

使用

// 全局引入
import MispUILibrary from 'misp-ui-library'
import 'misp-ui-library/dist/theme-chalk/css/index.css'

Vue.use(MispUILibrary)

// 按需引入
import Button from 'misp-ui-library/lib/button'
import 'misp-ui-library/dist/theme-chalk/css/button.css'

Vue.component('Button', Button)

文档

• 访问 官方文档 查看完整文档和示例。
• 访问 Git仓库 查看源码。

目录结构

vue2-ui-library/
├── dist/                        # 构建输出目录
├── src/                         # 组件目录
│   ├── index.js                 # 主入口文件
│   ├── directives/              # 自定义指令目录
│   ├── mixins/                  # 混入目录
│   ├── packages/                # 组件目录
│   ├── plugins/                 # 插件目录
│   └── utils/                   # 工具库
├── scripts/                     # 脚本目录
│   ├── build-common.js          # 组件代码打包脚本
│   ├── build-styles.js          # scss 样式构建脚本
│   ├── build-css.js             # css 样式构建脚本
│   ├── component-styles/        # 组件样式目录
│   ├── theme-styles/            # 主题包
│   └── icon-font/               # 字体包
├── docs/                        # 文档目录
│   ├── index.md                 # 首页文档
│   ├── .vuepress/               # VuePress配置
│   ├── components/              # 组件文档
│   └── en/                      # 英文语言文档，同docs/
├── webpack.config.js            # Webpack配置
├── babel.config.js              # Babel配置
├── package.json                 # 项目配置
└── README.md                    # 项目说明

开发

# 安装依赖
npm install

# 开发文档
npm run dev

# 构建组件库
npm run build:lib

# 运行 lint 检查
npm run lint

# 自动修复 lint 错误
npm run lint:fix

发布

1. 修改版本号：package.json 中的 version 字段
2. 发布到npm：npm publish

贡献

欢迎提交 Issue 和 Pull Request！

许可证

MIT License