holo-ui

holo-ui

使用vue-cli3.0的脚手架搭建的项目
使用vue2.0
文档编辑使用 vuepress

项目说明

1.组件在哪里写

1. 组件统一放置在packages目录下；
2. 单个组件以文件夹存放，并且首字母大写（例如，Icon组件、Button组件）；
3. 单个组件文件夹下需必须存在一个对外输出的文件，默认为index.ts。

::: warning Note .
├── Button (实例展示)
│   ├── button.vue/index.vue (vue组件)
│   └── index.ts (输出，命名请采用index.ts)
:::

2.文档在哪里写

在 .vuepress/config.js 里面配置路由
在 .vuepress/enhanceApp.js 里面引入组件
详情参考已有的例子，例如docs/components/button.md, 或者访问vuepress官网获取更多内容。

目录结构

由于项目内的文件名单数、复数等都不太统一，所以专门来定一下规则，让代码结构更加美观一些。

1. 文件（夹）名统一用单数；
2. packages下的组件相关的文件夹，统一为大驼峰（首字母大写的驼峰）；
3. 除组件文件夹外的其他文件夹，统一为小驼峰（首字母小写的驼峰）；
4. 文件统一用小写，多个字母之间用-中划线隔开；

待调整：

• tests、scripts文件夹单复数调整
• [] packages和docs文件夹单复数调整
• [] tests和scripts子文件单复数调整

::: warning Note .
├── config (配置文件)
├── docs (文档编写)
│   ├── .vuepress (存放vurpress全局的配置、组件、静态资源等)
│   │   ├── config.js (配置文件的入口文件)
│   │ 
│   └── README.md (文档首页)
│ 
├── example (实例展示)
│   ├── assets (静态资源)
│   ├── router (路由配置)
│   ├── views (存放页面)
│   ├── app.vue (layout页面)
│   └── main.ts (入口文件)
├── packages (存放组件)
│   └── _helper (存放组件相关的帮助方法、公共组件、数据等)
│   └── _style (存放组件相关的公共样式内容)
│   └── index.ts (所有组件的入口文件)
├── script(相关指令文件)_
└── package.json
:::

开发说明

如何运行项目

运行 npm run serve 以开发模式跑 example 目录
运行 npm run docs:dev 以开发模式跑 文档
运行 npm run build 打包packages目录，生成组件库，组件库生成在lib目录下

单元测试

(单元测试工具调整，此处内容待更新) 为了让组件提供的功能更加具有可信度，我们增加了单元测试的内容，推荐的文件命名为 FileName.spec.ts，以下命令可以帮助你很快创建一个单元测试文件，并且跑起来。 （测试覆盖率后期会补充）

采用的技术：karma, mocha, chai, sinion, typescript 相关配置：karma.config.js

1. 创建一个单元测试文件（如下，以Button为例），以下命令会在 tests 目录下创建 Button.spec.ts 文件。

yarn test:create button
// or
npm run test:create button

1. 运行单元测试

yarn test
// or
npm run test

1. 运行单个单元测试

yarn test --file=Button
// or 
npm run test --file=Button

1. 只运行一次单元测试（不wath），也可修改配置文件

yarn test --single-run=true
// or
npm run test --single-run=true