@lateinos/awesome-ui

# 项目接入

# 安装

npm install --save @lateinos/awesome-ui

# 加载

# 全量加载

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

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

import { H3Button } from '@lateinos/awesome-ui';
import '@lateinos/awesome-ui/dist/index.less';

# 按需加载

按需加载需要引入babel插件babel-plugin-import (opens new window),

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

# babel-plugin-import

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

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

# ts-import-plugin

ts-import-plugin (opens new window)插件是一个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: '@lateinos/awesome-ui',
                libraryDirectory: 'lib',
                style: true
              })]
            }),
          }
        }
      ],
    },
  ]
}
// ...

# 主题

主题库独立于awesome-ui组件库，但是同时在 awesome-ui 组件库维护，

通过 lerna 来单独发包和相互依赖

不同项目可以根据需要引用不同的主题配置；

# 预置主题

主题定制由系统组开发，通过引入@/h3/theme/presets下的文件，即可配置主题；

presets # 主题预置
├── cloudpivot # 云枢主题库
│   ├── portal # 云枢PC端前台主题
│   ├── back # 云枢PC端后台主题
├── h3yun # 氚云主题库
│   ├── default # 氚云PC端默认主题
│   ├── deep3.0 # 氚云3.0 PC端默认主题

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

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

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

只需要引入@/h3/theme/presets下对应的预置主题，并在webpack配置中，按照如下配置即可；














 















// webpack.config.js
// 以氚云PC端主题为例
const lessVars = require('@/h3/theme/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/presets/h3yun/pc/default');

{
  css: {
    loaderOptions: {
      less: {
        ...lessVars,
        javascriptEnabled: true,
      },
    },
  },
}

理解原理，看一下导入的lessVars里的内容，就可以理解；

  • globalVars是less全局变量，可以在不 导入less文件情况下直接引用；

  • modifyVars是less修改变量，最后编译的结果会以这其中的定义值为准；

    通过这里对Antd的变量进行了覆盖；

{
  "globalVars": {
    "h3-primary-color": "#107fff"
  },
  "modifyVars": {
    "primary-color": "@h3-primary-color"
  }
}

# 项目中导入less文件

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

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

@import '@h3/theme/presets/h3yun/pc/default/vars.less';

@h3-primary-color: #123456;

← 开发规范 →