一个 vue3 组件库

技术栈

vue3+ts+vite

快速上手

安装

npm i sf-v3-ui
yarn add sf-v3-ui

全局引入

import { createApp } from "vue";
import App from "./App.vue";
import sf-v3-ui from "sf-v3-ui";
import "sf-v3-ui/es/style.css"
import "lib-flexible";

createApp(App).use(sf-v3-ui).mount("#app");

按需引入(支持)

默认支持基于 ES modules 的 tree shaking，对于 js 部分，直接引入 import { SFButton } from 'sf-v3-ui' 就会有按需加载的效果。

vite

1. 安装vite-plugin-style-import

npm i vite-plugin-style-import -D

2. vite.config.ts 添加配置

import style from "vite-plugin-style-import";
...
export default defineConfig({
  ...
  plugins: [
    style({
      libs: [
        // 如果没有你需要的resolve，可以在lib内直接写，也可以给我们提供PR
        {
          libraryName: "sf-v3-ui",
          esModule: true,
          resolveStyle: (name) => {
            return `sf-v3-ui/es/style.css`;
          },
        },
      ],
    }),
  ]
})

3. 页面直接使用相应组件即可

import { SFButton} from 'sf-v3-ui''

webpack

1. 安装babel-plugin-import

npm install babel-plugin-import --save-dev

2. 在.babelrc 或 babel.config.js 中添加配置： （随着组件库的丰富，这里的配置可能需要更新）

plugins: [
    [
      "import",
      {
        libraryName: "sf-v3-ui",
        libraryDirectory: "es/packages",
        camel2DashComponentName: false,
        customName: (name) => {
          return `sf-v3-ui/es/packages/${name.slice(1).toLowerCase()}`;
        },
        style: () => {
          return "sf-v3-ui/es/style.css";
        },
      },
    ],
  ],

3. 页面直接使用相应组件即可

import { SFButton} from 'sf-v3-ui''

目录结构

├── README.md
├── examples              -- 运行代码
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.ts
│   ├── shims-vue.d.ts
│   └── vite-env.d.ts
├── index.html            --  入口文件
├── packages              -- 组件库
│   ├── button            -- 组件
│   │   ├── index.ts
│   │   └── src
│   │       ├── button.ts    -- 组件ts定义（如果需要）
│   │       └── button.vue  -- 组件
│   └── index.ts         -- 组件库整体导出
├── public
│   └── favicon.ico
├── tests                 -- 测试用例
│   └── button.spec.ts
├── tsconfig.json
├── vite.config.ts        -- 配置文件
└── yarn.lock

注意

.postcssrc.js 配置
module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-pxtorem": {
      rootValue: 75, //换算基数
    }
  }
}

目录结构

├── README.md
├── examples              -- 运行代码
│   ├── App.vue
│   ├── assets
│   ├── components
│   ├── main.ts
│   ├── shims-vue.d.ts
│   └── vite-env.d.ts
├── index.html            --  入口文件
├── packages              -- 组件库
│   ├── button            -- 组件
│   │   ├── index.ts
│   │   └── src
│   │       ├── button.ts    -- 组件ts定义（如果需要）
│   │       └── button.vue  -- 组件
│   └── index.ts         -- 组件库整体导出
├── public
│   └── favicon.ico
├── tests                 -- 测试用例
│   └── button.spec.ts
├── tsconfig.json
├── vite.config.ts        -- 配置文件
└── yarn.lock

todo

[ ] css拆分