@h3/thinking-ui

# 项目接入

# 安装

npm install --save @h3/thinking-ui

# 加载

# 全量加载

直接引就完了，但是样式文件要单独导入;

但是代码必定会与 Antd 有重复，所以不推荐

import { H3Button } from '@h3/thinking-ui';
import '@h3/thinking-ui/dist/index.less';

# 按需加载

按需加载需要引入 babel 插件babel-plugin-import,

而 typescript 中要实现按需加载，则需要额外一个插件ts-import-plugin

# babel-plugin-import

在babel.config.js中配置插件，可以参考官方文档，babel-plugin-import

// babel.config.js
module.exports = {
  presets: ['@vue/app'],
  plugins: [['import', { libraryName: '@h3/thinking-ui', libraryDirectory: 'lib', style: true }]],
};

# ts-import-plugin

ts-import-plugin插件是一个ts-loader插件，可以实现 ts 内的按需加载。


















 













// webpack.config.js
module.exports = {
// ...
module: {
  rules: [
    // ...
    {
      test: /\.tsx?$/,
      use: [
        'babel-loader',
        {
          loader: 'ts-loader',
          options: {
            transpileOnly: true,
            happyPackMode: true,
            appendTsxSuffixTo: ['\\.vue$'],
            getCustomTransformers: () => ({
              before: [ tsImportPluginFactory({
                libraryName: '@h3/thinking-ui',
                libraryDirectory: 'lib',
                style: true
              })]
            }),
          }
        }
      ],
    },
  ]
}
// ...

# 定制主题

组件库内创建了一套默认的标准规范主题；该主题适用于氚云，云枢需要使用主题可以联系系统组定制 （纯手工定制，打造属于你的独一无二）（误）

# 通过 less-loader 配置（推荐）

推荐使用 less-loader 的配置导入主题，组件库内已创建好了默认配置；这种方式好处在于：

  • 支持全局 less 变量，调用更方便;
  • 支持按需加载，不会导入未引入的组件的样式;

只需要引入@h3/theme-mobile/presets/h3yun/default并在 webpack 配置中，按照如下配置即可；














 














// webpack.config.js
const lessVars = require('@h3/theme-mobile/presets/h3yun/default');
// ... 其他配置
module: {
  rules: [
    // ... 其他配置
    {
      test: /\.less$/,
      use: [
        // ... 其他loader
        {
          loader: 'less-loader',
          options: { // less-loader@5.0.0-
            ...lessVars,
            javascriptEnabled: true,
          },
          options: { // less-loader@6.0.0+
            lessOptions: {
              ...lessVars,
              javascriptEnabled: true,
            },
          },
        },
      ],
    },
  ];
}

若是在 vue-cli 3.0+ 中，则更简单








 












// vue.config.js
const lessVars = require('@h3/theme-mobile/presets/h3yun/default');

{
  css: {
    loaderOptions: {
      less: {
        ...lessVars, // less-loader@5.0.0-
        javascriptEnabled: true,

        lessOptions: { // less-loader@6.0.0+
            ...lessVars,
            javascriptEnabled: true,
          },
        },
      },
    },
  },
}

理解原理，看一下less-vars.json文件内容，就可以理解；

  • globalVars 是 less 全局变量，可以在不导入 less 文件情况下直接引用；
  • modifyVars 是 less 修改变量，最后编译的结果会以这其中的定义值为准；通过这里对 Antd 的变量进行了覆盖；
{
  "globalVars": {
    "h3-primary-color": "#107fff"
  },
  "modifyVars": {
    "primary-color": "@h3-primary-color"
  }
}

# 项目中导入 less 文件

导入 less 文件也可以配置主题，此不支持样式的按需加载，不推荐!!!；

在 less 文件中，也可覆盖变量；

@import '~@h3/thinking-ui/style/override.less';

@h3-primary-color: #123456;

← 规范 →