Fes Design

指引 ​

fes-design 为 vue3 组件库，不支持 vue2。

安装 ​

bash
npm i @fesjs/fes-design
bash
pnpm i @fesjs/fes-design

在 SFC 中使用 ​

vue
<template>
    <FButton type="primary">Primary</FButton>
    <CloseCircleFilled />
</template>

<script setup>
import { FButton } from '@fesjs/fes-design';
import { CloseCircleFilled } from '@fesjs/fes-design/icon';
</script>

组件引入 ​

全局部分导入 ​

js
import { FButton } from '@fesjs/fes-design';
app.use(FButton);

全局完整导入 ​

js
import FesDesign from '@fesjs/fes-design'
app.use(FesDesign)

手动导入 ​

vue
<template>
    <FButton>我是 FButton</FButton>
</template>
<script setup>
import { FButton } from '@fesjs/fes-design'
</script>

按需导入 ​

以 Vite 为例。

js
// vite.config.ts

import { defineConfig } from 'vite';
import Components from 'unplugin-vue-components/vite';

export default defineConfig({
    // ...
    plugins: [
        Components({
            resolvers: [
                (componentName) => {
                    if (componentName.match(/^(F[A-Z]|f-[a-z])/)) {
                        return {
                            name: componentName,
                            from: '@fesjs/fes-design',
                        };
                    }
                },
            ],
        }),
    ],
});