tis-cli/templates/component/README.md

## 开发说明

组件二次开发说明

### 1. 开发流程

#### 1.1 装包

装包前请确保安装了 yarn，建议使用yarn来进行包管理

安装yarn

```
npm install -g yarn
```

装包

```bash
yarn run bootstrap
```

#### 1.2 启动项目

启动开发模式

```bash
yarn start
```

开发模式启动之后，即可进行组件的二次开发

这里需要特别注意的一点是，在修改移动的组件的时候，需要进行build才能在开发模式下查看到最新的修改

移动端组件的build命令：

```
yarn run build:mobile
```

#### 1.3 组件库展示站点打包

需要确保node环境是 大于等于 v10.19.0

可以安装n来进行node版本的管理

为了确保打包的是最新的代码，需要先对移动端组件代码进行build：

```
yarn run build:mobile
```

然后打包整体组件&站点

```
yarn run build tis-ui
```

打包好之后最终的站点的根目录在，若需要部署需要知道这个目录位置，否则不需要关心：

```
tis-design/packages/web/examples/tis-ui
```

以下三条命令请确保已经对整体组件&站点进行了build打包操作，否则可能执行之后也不会有效果

启动打包后的站点页面服务：

```
yarn run server
```

保持长期监听启动部署站点服务：

```
yarn run server:keep
```

关闭站点服务：

```
yarn run server:stop
```

一站式开发平台访问地址：http://localhost:9999/#/zh-CN

#### 1.4 组件库整体打包

一站式开发平台打包：

组件库整体文档站点的打包命令：

```
yarn run build:all
```

组件库lib打包：

打包之前需要确保已经执行过一次bootstrap，即```npm run bootstrap```

```
yarn run build:dist
```

#### 1.5 组件库使用

将tis-ui文件夹放置在与业务项目同级的目录下

设置业务项目的package.json，加入下面的配置：

```json
"dependencies": {
    "tis-ui": "file:../tis-design/packages/web"
}
```

业务项目需要重新```yarn install```

业务代码中的使用
```javascript
import Vue from 'vue';
import TisUi from 'tis-ui/lib/index.js';
import 'tis-ui/lib/theme-chalk/index.css';

Vue.use(TisUi);
```

组件使用：
```html
<template>
  <tis-button>这是一个按钮</tis-button>
</template>
```

#### 1.6 修改组件库主题

修改组件库主题需要修改样式文件,样式文件地址：```tis-design/packages/web/packages/theme-chalk/src/common/var.scss```

直接修改一下主要变量即可：

```scss
/// 主颜色
$--color-primary:#2CB8B8 !default;
/// 主文字颜色
$--color-white: #000000 !default;
/// 主背景色
$--color-black: #FFFFFF !default;
// 圆角的修改
$--border-radius-base: 4px !default;
/// borderRadius|1|Radius|0
$--border-radius-small: 2px !default;
/// borderRadius|1|Radius|0
$--border-radius-circle: 100% !default;
/// borderRadius|1|Radius|0
$--border-radius-zero: 0 !default;

/// 下面是一些功能颜色
$--color-success: #2CB8B8 !default;
$--color-warning: #FFCE6D !default;
$--color-danger: #FF6D6D !default;
$--color-info: #333333 !default;

// 其他更多颜色和对应的每一个单独组件的主题样式详见var.scss后面各个变量
```

- 如果只是需要看到组件库修改后的效果，可以重新执行：```yarn start```即可在一站式开发平台看到效果

- 如果需要在其他业务或者业务组件中进行使用，则需要执行组件库的包，执行：```yarn run build:dist```执行打包命令，之后就可以参照1.5在业务中进行使用了

### 2. 其他说明

packages下面有两个重要的包，一个存放的是pc端的组件源码，一个存放移动端的组件

pc组件相关的源码在```web/packages```文件夹目录下

移动端组件相关的源码在```mobile/src```文件夹下