# ap-content-ui开发指导文档

## 准备开发

### 目录结构

```
├── build                       // webpack配置
├── dist                        // 示例展示项目打包
├── src                         // 示例展示，调试项目
├── lib                         // 组件库打包代码（发布npm仓库核心代码）
├── packages                    // 组件库源代码
├── public                      // 静态资源
├── eslintrc.js                 // eslint 配置项
├── .gitignore                  // git提交 忽略项
├── .npmignore                  // npm发布 忽略项
└── package.json                // package.json
```

### 安装依赖
```
yarn install
```

### 运行demo项目
```
yarn serve
```

### 开发组件

1. 组件开发，在路径`packages`
1.1. 在`packages/index.js`增加相关引用。
2. 组件的样式开发，在`packages/theme/src/`增加一个sccs文件。
2.1. 在`packages/theme/src/index.scss`增加相关引用。
3. 组件的测试，在路径`src/views/demo`增加demo文件。
3.1. 在`src/router/index.js`增加相关路由。
3.2. 在`src/app.vue`增加入口。


### 组件库打包代码，构建npm包

注意点：
> 1. 目录`packages/theme`下安装`npm install`
> 2. 目录`packages/theme`下gulp要用3.9的版本
> 3. node要用10的版本

```
yarn build-lib
```



### 打包demo项目(实际上没有意义)
```
yarn build
```

### 发布到npm仓库(公共)
npm login
npm publish
```

### 组件库文档，开发
1. 运行开发命令
```
yarn dev
```
2. 浏览器打开`localhost:8085`即可预览
3. 新增组件的路由，在`examples/nav.config.json`增加`path`和`title`。
4. 新增文档（增加`.md`文件），在`examples/docs/zh-CN`增加`.md`文件，文件名与`nav.config.json`的`path`一致。

### 组件库文档，打包
```
yarn deploy:build
```

### Lints检查
```
yarn lint
```

### 参考文章
https://www.cnblogs.com/luoluo-snow/p/11636943.html
