# 关于vue-giraffe
---

vue-giraffe是一个基于Vue.js的前端 UI 组件库，目前只适用于PC
## 项目目录
```shell

├── build                      // 构建相关  
├── config                     // 配置相关
├── examples
│   ├── assets                 // 主题 字体等静态资源                   
│   ├── components             // 全局公用组件
│   ├── docs                   // md文档
│   ├── pages                  // 视图
│   ├── router                 //路由 
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
│   └── nav.config.json        // 导航目录
├── src                        // 源代码
│   ├── assets                 // 主题 字体等静态资源
│   ├── components             // 全局公用组件。不直接显示
│   ├── directives             // 全局指令
│   ├── mixins                 // 分发 Vue 组件中可复用功能
│   ├── pages                  // view视图层
│   ├── router                 // 路由
│   ├── router                 // 路由
│   ├── App.vue                // 入口页面
│   └── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── index.html                 // html模板
└── package.json               // package.json
```




## 开发规范

组件主要存放再 ```packages``` 目录下，每个子项目单独维护，避免包之间的相互依赖关系

- #### 单个组件创建
  1.文件命名-------为当前组件所代表的功能，全部小写，应清晰明了
  
  2.单个文件内部分别创建```src``` 文件用于存放组件和 ```index.js``` 用于对组件进行注册
  
  3.组件name：为大写字母 "Y" + "功能名"，使用驼峰
  
  4.CSS使用less统一编写，存放目录为```packages>styles>src``` 对应单个组件进行维护
  
  5.CSS命名：采用BEM(block,element,modifier)风格，如，.form-button-text(表单-按钮-文字)；