任务分解(Task)

  • 引入 UnoCSS 样式；
  • 实现组件属性定制按钮样式；
  • 实现【Icon图标按钮】。

原子样式

每个组件库都有一套完备的样式系统，确保组件样式风格的统一。经典的组件库 (ElementUI) 的样式系统都是遵循「Semantic CSS 」(语义化 CSS )搭建的

组件库通常都需要搭建一个 CSS 子工程，用于实现自己的类型系统。比如 Element 就是基于 Sass + Gulp 搭建的，不过随着原子样式的出现，有了一些替代方案，无需搭建样式系统也可以完成类似效果 可以看一下 Vite 的社区模板库，tailwind 几乎就是标配

image.png

2020年一种叫做AtomicCSS的组件风格横空出世，代表作就是 TailwindCSS。最近两年，TailwindCSS 一直保持高热度。

为什么选 UnoCSS 实现 AtomicCSS 而不是 Tailwind


原子样式也有很多选择，最著名的就是 Tailwind。 Tailwind 虽然好，但是性能上有一些不足。由于Tailwind 会生成大量样式定义。全量的 CSS 文件往往体积会多至数 MB。这个对于页面性能是完全不可接受的。

开源界一个叫做 Antfu 的大神设计了 UnoCSS。UnoCSS 是一个拥有高性能且具灵活性的即时原子化 CSS 引擎，可以兼顾产物体积和开发性能。
GitHub - unocss/unocss: The instant on-demand atomic CSS engine.

入门使用

安装

  1. pnpm i -D unocss@"0.45.6"
  2. pnpm i -D @iconify-json/ic@"1.1.4"

图标库
Icônes

配置vite

  1. import { presetUno, presetAttributify, presetIcons } from "unocss";
  2. import Unocss from "unocss/vite";
  4. defineConfig({
  5.   plugins:[
  6.     ...,
  7.     // 添加UnoCSS插件
  8.     Unocss({
  9.         presets: [presetUno(), presetAttributify(), presetIcons()],
  10.     }),
  11.     ...
  12.   ]
  13. })

unocss的Vscode配套插件

image.png

测试使用unocss

  1. import { defineComponent} from "vue";
  3. import "uno.css";
  4. export default defineComponent({
  5.   name: "SButton",
  6.   setup(props, {slots}) {
  7.     return () => <button 
  8.       class={`
  9.       py-2 
  10.       px-4 
  11.       font-semibold 
  12.       rounded-lg 
  13.       shadow-md 
  14.       text-white 
  15.       bg-green-500 
  16.       hover:bg-green-700 
  17.       border-none 
  18.       cursor-pointer 
  19.       `}
  20.         > 
  21.         {slots.default ? slots.default() : ''}
  22.      </button>
  23.   }
  24. });
  1.  import { createApp } from "vue"
  2. import SmartyUI from './entry'
  4. createApp({
  5.   template: `
  6.   <div>
  7.   <SButton>普通按钮</SButton>
  8. </div>
  9. `
  10. }).use(SmartyUI).mount("#app");
  1. import MyButton from "./button/index.jsx";
  2. import SFCButton from "./SFCButton.vue"; // 关于ts类型警告，通过.d.ts声明文件去除警告
  3. import JSXButton from "./JSXButton.jsx";
  4. import { App } from "vue";
  6. // 导出单独组件
  7. export { MyButton, SFCButton, JSXButton };
  9. // 编写一个插件，实现一个install方法
  10. export default {
  11.   install(app: App): void {
  12.     app.component(MyButton.name, MyButton);
  13.     app.component(SFCButton.name, SFCButton);
  14.     app.component(JSXButton.name, JSXButton);
  15.   },
  17. };

测试运行-报错 [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias “vue” to “vue/dist/vue.esm-bundler.js”. at image.png

  2. import { createApp } from "vue/dist/vue.esm-bundler.js";
  3. // import { createApp } from "vue"
  4. import SmartyUI from './entry'
  6. createApp({
  7.   template: `
  8.   <div>
  9.   <SButton>普通按钮</SButton>
  10. </div>
  11. `
  12. }).use(SmartyUI).mount("#app");

image.png

将unocss组合自定义组件实现自定义样式配置

  1. import { defineComponent} from "vue";
  2. import "uno.css";
  4. export const props = {
  5.   color: {
  6.     type: String,
  7.     default: 'blue'  // 设定默认颜色
  8.   },
  9. }
  12. export default defineComponent({
  13.   name: "SButton",
  14.   props, // 注册属性
  15.   setup(props, {slots}) {
  16.     return () => <button 
  17.       class={`
  18.       py-2 
  19.       px-4 
  20.       font-semibold 
  21.       rounded-lg 
  22.       shadow-md 
  23.       text-white 
  24.       bg-${props.color}-500 
  25.       hover:bg-${props.color}-700 
  26.       border-none 
  27.       cursor-pointer 
  28.       `}
  29.         > 
  30.         {slots.default ? slots.default() : ''}
  31.      </button>
  32.   }
  33. });

浏览器显示
image.png

这里出现了异常，我们配置的默认颜色没有生效 ，应该是unocss的相关配置问题，需要到官网或者论坛查找答案 主要原因是 UnoCSS 默认是按需生成方式。也就是说只生成代码中使用过的样式。那如果在 class 属性中使用变量，是无法分析变量的取值的。这样也就无法动态生成样式了。

重构Unocss配置

  1. import { presetUno, presetAttributify, presetIcons } from "unocss";
  2. import Unocss from "unocss/vite";
  5. const colors = [
  6.   "white",
  7.   "black",
  8.   "gray",
  9.   "red",
  10.   "yellow",
  11.   "green",
  12.   "blue",
  13.   "indigo",
  14.   "purple",
  15.   "pink",
  16. ];
  18. const safelist = [
  19.   ...colors.map((v) => `bg-${v}-100`),
  20.   ...colors.map((v) => `bg-${v}-400`),
  21.   ...colors.map((v) => `bg-${v}-500`),
  22.   ...colors.map((v) => `hover:bg-${v}-100`),
  23.   ...colors.map((v) => `hover:bg-${v}-300`),
  24.   ...colors.map((v) => `hover:bg-${v}-400`),
  25.   ...colors.map((v) => `hover:bg-${v}-500`),
  26.   ...colors.map((v) => `border-${v}-400`),
  27.   ...colors.map((v) => `border-${v}-500`),
  28.   ...colors.map((v) => `text-${v}-500`),
  29.   ...colors.map((v) => `hover:text-${v}-500`),
  30.   'text-white',
  31.   ...Array.from({ length: 8 }, (_, i) => `px-${i + 1}`),
  32.   ...Array.from({ length: 8 }, (_, i) => `py-${i + 1}`),
  33.   ...["xs", "sm", "base", "lg", "xl", "2xl", "3xl"].map((v) => `text-${v}`),
  34.   ...["rounded-full", "rounded-lg"],
  35.   ...[
  36.     "search",
  37.     "edit",
  38.     "check",
  39.     "message",
  40.     "star-off",
  41.     "delete",
  42.     "add",
  43.     "share",
  44.   ].map((v) => `i-ic-baseline-${v}`),
  45. ];
  48. export default () =>
  49.   Unocss({
  50.     safelist,
  51.     presets: [presetUno(), presetAttributify(), presetIcons()],
  52.   });

修改vite配置

  1. import Unocss from "./config/unpcss";
  4. defineConfig({
  5.   ...
  6.    plugins: [
  7.     vue(),
  8.         // 添加UnoCSS插件
  9.     Unocss(),
  10.     // 添加JSX插件
  11.     vueJsx({
  12.       // options are passed on to @vue/babel-plugin-jsx
  13.     }),
  14.   ],
  15.   ...
  16. })

按钮组件重构

  1. import { defineComponent , PropType} from "vue";
  2. import "uno.css";
  4. export type ISize = "small" | "medium" | "large";
  5. export type IColor =
  6.   | "black"
  7.   | "gray"
  8.   | "red"
  9.   | "yellow"
  10.   | "green"
  11.   | "blue"
  12.   | "indigo"
  13.   | "purple"
  14.   | "pink";
  15. export const props = {
  16.     // 新增
  17.     size: {
  18.       type: String as PropType<ISize>,
  19.       default: "medium",
  20.     },
  22.     color: {
  23.       type: String as PropType<IColor>,
  24.       default: "blue",
  25.     },
  26.   textColor: {
  27.     type: String,
  28.     default: "#ffffff", // 设定默认颜色
  29.   },
  30.   round: {
  31.     type: Boolean,
  32.     default: false,
  33.   },
  35.   plain: {
  36.     type: Boolean,
  37.     default: false,
  38.   },
  40.   icon: {
  41.     type: String,
  42.     default: "",
  43.   },
  44. } as const;
  45. // as const 也是类型断言
  47. export default defineComponent({
  48.   name: "SButton",
  49.   props, // 注册属性
  50.   setup(props, { slots }) {
  51.     console.log(`html`, document.querySelector(`#app`)?.innerHTML);
  52.     const size = {
  53.       small: {
  54.         x: "2",
  55.         y: "1",
  56.         text: "sm",
  57.       },
  58.       medium: {
  59.         x: "3",
  60.         y: "1.5",
  61.         text: "base",
  62.       },
  63.       large: {
  64.         x: "4",
  65.         y: "2",
  66.         text: "lg",
  67.       },
  68.     };
  70.     return () => (
  71.       <button  class={`
  72.       py-${size[props.size].y}
  73.       px-${size[props.size].x}
  74.       ${props.round ? "rounded-full" : "rounded-lg"}
  75.       bg-${props.color}-${props.plain ? "100" : "500"}
  76.       hover:bg-${props.color}-400
  77.       border-${props.color}-${props.plain ? "500" : "500"}
  78.       cursor-pointer
  79.       border-solid
  80.       text-${props.plain ? props.color + "-500" : "white"}
  81.       text-${size[props.size].text}
  82.       hover:text-white
  83.       transition duration-300 ease-in-out transform hover:scale-105
  84.       mx-1
  85.       `}
  86.       >
  87.         {props.icon !== "" ? (
  88.           <i class={`i-ic-baseline-${props.icon} p-3`}></i>
  89.         ) : (
  90.           ""
  91.         )}
  92.         {slots.default ? slots.default() : ""}
  93.       </button>
  94.     );
  95.   },
  96. });

结果预览

image.png

源代码参考

webkubor/KUI