简述

Vue+Typescript UI组件库

目录结构

.
├── build
│   ├── config.js
│   ├── create.components.js // 新建组件
│   ├── rollup.build.js  // 组件打包
│   ├── rollup.config.js  // rollup打包配置
│   └── utils.js 
├── lib // 打包后的文件
├── packages // 组件库
│   ├── _styles  // 样式变量及mixin
│   ├── _util   // 组件用到的公共方法
│   ├── button  // 组件
│   │   ├── demo  // 用于显示在站点右侧的组件示例
│   │   │   ├── index.vue  // demo
│   │   ├── index.ts   // 单个组件模块打包配置
│   │   ├── index.vue  // 组件主题内容
│   │   ├── README.md  // 用于显示在站点中间位置的说明文档
│   └── index.ts // 主入口
├── site // 组件库站点
│   ├── public 
│   ├── src  // 站点文件
│   │   ├── assets  // 静态资源
│   │   ├── components
│   │   │   ├── DemoWrap.vue
│   │   │   ├── Laytout.vue
│   │   │   ├── NavItems.vue
│   │   ├── constant  // 站点左侧菜单及中间说明文档的配置
│   │   ├── demo // 站点右侧的demo页面
│   │   ├── router  // 站点路由
│   │   ├── store  
│   │   ├── views  // 站点相关页面
│   │   ├── App.vue
│   │   ├── main.ts //站点入口
├── examples // 开发示例
├── types // 类型定义文件

安装依赖

// npm安装
yarn add th-wallet-ui
// 本地仓库安装
yarn add th-wallet-ui@git+https://jcode.cbpmgt.com/git/th_ui.git#v1.0.21

启动站点服务

yarn start

打包站点

yarn run build:site

打包组件

yarn run build:lib

创建新组件

yarn run create xxx

使用 babel-plugin-import实现按需加载

// 配置babel.config.js
module.exports = {
  ....
  "plugins":[
    [  
      "import",
      {
        // 组件库的名字
        "libraryName": "th-wallet-ui",        
        // 样式文件
        "style": true
      }
    ]
  ]
}