脚本说明

• npm run bootstrap

  • 安装依赖

• make new (组件英文名字) (组件中文名字)

  • 会执行build/bin下面的new.js，进行新组件的创建。
    • 这里说明一下new.js中的逻辑
      • 1. 在/packages目录下新建组件目录,并完成目录结构的构建，写入模板中配置好的组件基础代码
      • 2. 创建语言的组件文档,/examples/docs/{lang}/t-dict-select.md
      • 3. 创建组件样式文件,/packages/theme-chalk/src/t-dict-select.scss
      • 4. 在 components.json文件中配置组件信息
      • 5. 添加到 nav.config.json，作为官网的组件说明

• npm run build:file

  • 1. node build/bin/build-entry.js
    • 根据components.json文件中配置组件信息，生成全部组件的导出信息
  • 2. node build/bin/i18n.js
    • 读取中文的注释，处理官网的文档输出，这里主要是官网的文件生成

• npm run build:theme 这一步主要是打包处理样式文件

  • node build/bin/gen-cssfile
    • 将全部package/theme-chalk里面组件的样式文件，集合到index.scss文件中去
  • gulp build --gulpfile packages/theme-chalk/gulpfile.js
    • 将全部package/theme-chalk里面组件的scss文件打包成css，放在lib下
  • cp-cli packages/theme-chalk/lib lib/theme-chalk
    • 把lib下的文件移动到外部的lib下面

• npm run dev

  • 会本地启动localhost:8085 演示组件库的具体使用文档

• npm run dev:play

  • 会在本地localhost:8085/play路由下，建立自己的playground，文件在/examples/play/index.vue, 你可以在这里测试你上传的组件，但是注意代码不用提交

• npm run dist

  • npm run clean
    • 清除缓存
  • npm run build:file
    • 处理导出信息和官网文档信息
  • webpack --config build/webpack.conf.js
    • 先走一下基础的config文件，定义一下文件别名
    • 定义入口文件是src下面的index
    • 出口文件是/lib
  • webpack --config build/webpack.common.js
    • 定义文件处理的loader
  • webpack --config build/webpack.component.js
    • 定义文件处理的loader
  • npm run build:utils
    • 是使用 babel 工具将 src 目录下的文件编译到 lib 目录中，并忽略编译 src/index.js 文件
  • npm run build:theme

    • 这一步主要是打包处理样式文件

Install

npm i @threecat/threecat -S

Quick Start

import threecat from "@threecat/threecat"
Vue.use(threecat)

Browser Support

Modern browsers and Internet Explorer 10+.