tis-cli/templates/component/DEV.md

# 框架应用集成业务组件&开发指南

## 1. 前期准备

需要提前下载tis-design代码，目前tis-design代码包含三个package：```web,mobile,components```

克隆tis-design代码仓库：```git clone ssh://git@sekiyika.tpddns.cn:8022/home/git/tis-design.git```

- web；
    基础PC组件

- mobile：
    基础移动端组件

- components：
    公共业务组件，根据业务需要基于tis-ui进行封装开发

要在业务框架和应用开发环境下使用公共业务组件，需要先启动tis-design服务，具体操作：

[1] 到tis-design目录下执行装包命令：```yarn run bootstrap```

[2] 打包一次web组件和mobile组件，执行：```yarn run build:dist```

[3] 启动业务组件components，执行：```yarn run start:component```

启动之后通过访问：http://localhost:9901/lib.bundle.js 可以获取到业务组件的js

样式文件的访问地址：http://localhost:9901/lib/index.css

在框架和应用中通过cdn和external配置的形式进行使用

## 2. 如何开发

开发阶段，在app_demo下的index.html，需要引入以下内容：

```html
<!-- 引入tis-component样式文件，根据不同环境引入 -->
<%=process.env.NODE_ENV==='production' ? '<link rel="stylesheet" href="http://cdn-address.com/tis-component.min.css">' : '<link rel="stylesheet" href="http://localhost:9901/tis-component.min.css">'%>

<!-- CDN的方式引用tis-component,需要先引入vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入tis-component，根据不同环境引入 -->
<%=process.env.NODE_ENV==='production' ? '<script src="http://cdn-address.com/tis-component.min.js"></script>' : '<script src="http://localhost:9901/tis-component.min.js"></script>'%>
```

特别说明：production环境下,需要对应的CDN或者静态资源服务器提供对应的tis-component组件的CSS样式和JS脚本文件的访问地址.此处的 http://cdn-address.com 只是一个示例,需要根据实际CDN地址做对应的替换即可

还需要在vue.config.js中设置对应的externals（目前app_demo下面的vue.config.js已经更新以下代码）：
```javascript
configureWebpack: {
    externals: {
        'tiscom': 'TISCOM',// 业务代码中可以通过 import 'tiscom' 的方式使用,或者全局不需要再import,也可以直接使用tis-component中提供的业务组件
        'vue': {
            root: 'Vue',
            commonjs: 'vue',
            commonjs2: 'vue',
            amd: 'vue'
        }
    }
}
```

启动项目后，即可在全局使用业务组件，例如```src/App.vue```下的代码片段：

以下代码中使用的```<tisc-table-list></tisc-table-list>```可以直接使用,无需再手动import引入,且会根据tis-design下面的components包里的代码修改实时更新

```html
<template>
  <div id="app">
    <div>应用中使用业务组件示例</div>
    <tisc-table-list></tisc-table-list>
  </div>
</template>
```

## 3. 打包上线

打包需要配置对应的cdn或者静态资源服务，存放tis-design相关的打包后的静态资源.

在tis-design仓库下打包 component 库

打包命令：```npm run build:component```

打包后输出的文件目录：

JS文件目录：```tis-design/packages/components/lib/tis-component.min.js```
CSS文件目录：```tis-design/packages/components/lib/tis-component.min.css```

存放到对应的静态资源服务之后，可以在app_demo下的```public/index.html```中替换对应资源的地址，完成最终的打包上线