# rdj-vue-components

**Repository Path**: RDJ_project/rdj-vue-components

## Basic Information

- **Project Name**: rdj-vue-components
- **Description**: 个人组件库
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: feature
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-12-02
- **Last Updated**: 2022-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# rdj-vue-components

#### 介绍
个人组件库（可做vue2组件模板项目）

#### 软件架构

使用最新版本webpack 配合ts babel搭建的vue2.x组件项目
样式处理使用sass 测试工具使用jest 没有使用vuecli 重头搭建而成

#### 安装教程

安装组件：npm i rdj-vue-component 或者 yarn add rdj-vue-component
下载项目：git clone项目 npm i 或 yarn
启动案例/dev调试：npm run dev 或 yarn dev

#### 项目结构

```
│  .browserslistrc --- 浏览器白名单（做浏览器兼容配置）
│  .eslintrc.js --- js或ts代码风格检测插件配置（配合编辑器插件使用，该项目配合pretter代码风格优化插件不需要自己注意代码风格自动优化） 
│  .eslintignore --- eslint忽略路径配置
│  .gitignore --- git忽略提交配置
│  postcss.config.js --- css代码转换工具配置（可以自动兼容浏览器版本或者利用插件进行样式单位转换，部分配置放在vue.config.js）
│  babel.config.js --- bable 代码转换版本兼容工具配置（有些库框架做成bable插件方便全局引用但是需要配置）
│  webpack.config.ts --- webpack配置文件(整合打包等)
│  dtsgen.config.js --- dts生成工具配置文件
│  lerna.json --- 分包管理工具配置
│  package.json --- node npm模块及指令配置文件
│  README.md --- 说明文档
├─src --- 项目代码主工作目录
│   │  main.ts  --- 入口文件
│   │  mainTypes.ts  --- 全类型生成入口
│   ├─assets --- 静态资源
│   ├─components  --- 常用组件、公用组件 （推荐把props格式抽离）
│   ├─dts --- 全局类型声明文件
│   ├─model --- 数据模型类 （表示数据格式及请求地址）
│   ├─styles --- 样式
│   ├─lang --- 国际化
├─dev --- 案例调试用代码代码工作目录
│   ├─assets --- 资源目录
│   ├─dev_template.html --- 调试用html入口模板
│   ├─main.ts --- 调试用脚本代码入口文件
├─tests --- 测试代码工作目录
│   ├─jest --- 单元测试代码(jest)
│   ├─├─ tsconfig.json --- 测试子项目的ts项目配置
│   ├─├─ xxx.jest.spec.xxx --- 测试代码文件
├─dist --- 打包产出目录
├─bin --- shell脚本等命令
└─node_modules  --- 安装好的npm模块

```

#### 使用说明

container：容器组件 接口参数见代码

#### 注意事项及备注

由于我没使用vue-cli脚手架自行配置webpack做组件项目架构
以及一些主流dts生成工具对vue单文件组件支持不好只能单独抽
出vue组件的ts代码部分这样也能生成正确dts
然后同样jest测试工具由于我没使用vue-cli脚手架并且对vue
文件支持不好所以直接测试引入打包后的js组件代码这样也能正常
测试。注意打包后再测

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request