tis-cli

tis-cli前端项目快速搭建命令行工具

3.7 KiB

Raw Permalink Blame History

开发说明

组件二次开发说明

1. 开发流程

1.1 装包

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

安装yarn

npm install -g yarn

装包

yarn run bootstrap

1.2 启动项目

启动开发模式

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，加入下面的配置：

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

业务项目需要重新yarn install

业务代码中的使用

import Vue from 'vue';
import TisUi from 'tis-ui/lib/index.js';
import 'tis-ui/lib/theme-chalk/index.css';

Vue.use(TisUi);

组件使用：

<template>
  <tis-button>这是一个按钮</tis-button>
</template>

1.6 修改组件库主题

修改组件库主题需要修改样式文件,样式文件地址：tis-design/packages/web/packages/theme-chalk/src/common/var.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文件夹下

3.7 KiB Raw Permalink Blame History