@h3/thinking-ui

# 规范

此规范氚云系统组开发组件适用；

# 项目结构

build # 打包构建配置
├── webpack.lib.config.js # 项目打包配置
docs # 文档
├── .vuepress # vuepress 配置目录
│   ├── config # vuepress 约定目录
│   │   ├── markdown.config.js # markdown 相关配置
│   │   ├── theme.config.js # vuepress主题配置，导航结构 相关配置
│   │   ├── webpack.config.js # webpack配置
│   ├── config.js # vuepress 配置
├── package # 打包结果配置
│   ├── components.json # 组件配置
│   ├── directives.json # 指令配置
│   ├── plugins.json  # 插件配置
├── src # 组件源码
│   ├── components # 组件源码，目录内每一个文件夹对应一个组件
│   │   ├── 【componentName】 # 名字为【componentName】的一个组件
│   ├── config  # 相关配置类代码
│   ├── directives # 指令源码，目录内每一个文件夹对应一个指令
│   │   ├── 【directiveName】 # 名字为【directiveName】的一个指令
│   ├── helpers # 帮助类代码
│   ├── utils # 工具类代码
├── style # 样式源码
│   ├── js # 用于生成样式的js代码，在编译过程执行
│   ├── mixins # less mixins样式
│   ├── preset # 辅助类样式 class
│   ├── theme # 主题变量
│   ├── index.less # 默认导出出口
├── typings # 类型代码

# 多入口打包配置

组件库要支持按需加载，所以要多入口分组件打包；在package文件夹下，一看就懂；分了component，directives，plugins，分别对应vue的组件，指令，插件；

json的key是组件的名，最后打包后会统一加上前缀h3, 并按Pascal规范命名，后面的值是路径地址；

{
  "modal": "./src/components/modal/index.js"
}

如上，modal最后打包会生成一个名为H3Modal的组件

# 组件/指令/插件

  • 组件/指令/插件的样式不得写在.vue文件中，统一写到style文件夹下的less文件中;
  • 每个组件/指令/插件都必须要有一个style文件夹，文件夹内有一个index.less的文件，或者index.js文件;

# config/helpers/utils

src 文件夹下的config, helpers, utils三个文件夹内的文件，只能存放一级，若有多级，也要确保，对外的引用，也是通过文件名来引用省略了的index.js

WARNING

这么做是为了按需加载；但并不是不可绕过，只是这样定义规范之后更清晰；

# bad
├── utils
├── ├── debug
├── ├──  ├── date.js # 这个文件将引用不到
├── ├──  ├── error.js # 这个文件将引用不到
# good
├── utils
├── ├── debug-date.js # utils 文件夹下只有一级
├── ├── debug-error.js # utils 文件夹下只有一级
# good
├── utils
├── ├── debug
├── ├── ├── date.js # 这个文件只被index.js 导入，不会被外部导入
├── ├── ├── error.js # 这个文件只被index.js 导入，不会被外部导入
├── ├── ├── index.js # 外部导入这个文件

# 引用路径

当一个组件导入其他外部文件的情况，我们约定只能用用固定的webpack别名@h3/thinking-ui引入。具体为什么，看下一篇原理

// webpack.config.js
module.exports = {
  resolve: {
    // ...
    alias: {
      '@h3/thinking-ui': path.resolve(process.cwd()),
    },
  },
}

import { getDocumentDir } from "@h3/thinking-ui/src/helpers/DOM";
import H3Button from "@h3/thinking-ui/components/button";

← 原理 →