Cool UI

🚀安装 Cool UI 

npm install @coollu/cool-ui
# OR
yarn add @coollu/cool-ui
1
2
3

⚙️使用组件

以Button组件为例说明。

【推荐】自动按需引入

TIP

配合unplugin-vue-components实现自动按需引入，免去了全局注册或者局部注册的繁琐。

unplugin-vue-components 能够自动扫描模板中的组件标签，根据 resolver 配置注册组件，并生成对应的 d.ts 类型。

  • vite.config.ts配置如下：
import Components from "unplugin-vue-components/vite";
import { AntDesignVueResolver } from "unplugin-vue-components/resolvers";
// 由于部分 pro 组件逻辑较重，采用了 tsx 写法，而 unplugin-vue-components 暂不支持自动识别 tsx，所以这里配合 vite-plugin-style-import 将样式的按需引入做好兼容
import {
  createStyleImportPlugin,
  AndDesignVueResolve,
} from "vite-plugin-style-import";

export default defineConfig({
  plugins: [
    Components({
      resolvers: [
        AntDesignVueResolver({ resolveIcons: true }),
        (componentName) => {
          // where `componentName` is always CapitalCase
          if (/Cl[A-Z]/.test(componentName)) {
            return {
              name: componentName.slice(2),
              from: "@coollu/cool-ui",
              as: componentName,
            };
          }
        },
      ],
    }),
    createStyleImportPlugin({
      resolves: [AndDesignVueResolve()],
    }),
  ],
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
  • 组件使用时，无需通过use或者components再次注册，可以直接在模板中使用。

局部注册

  • 首先引入并局部注册组件：
import { defineComponent } from 'vue';
import { Button as ClButton } from "@coollu/cool-ui";

export defineComponent({
  components: {
    ClButton
  }
})
1
2
3
4
5
6
7
8
  • 模板使用：
<cl-button type="primary">按钮</cl-button>
1

TIP

当然也支持在 JSX/TSX 中使用。😄

全局注册

【推荐】可以全局注册某个组件

import { createApp } from "vue";
import { Button } from "@coollu/cool-ui";

const app = createApp();

// 全局注册 Button 组件
app.use(Button);
1
2
3
4
5
6
7

【不建议】也可以全局注册所有组件

import { createApp } from "vue";
import CoolUI from "@coollu/cool-ui";

const app = createApp();

// 全部引入，会导致包体积较大
app.use(CoolUI);
1
2
3
4
5
6
7