build: ui包产物结构修改，完善ui包readme

Author: huangmingfu

apps/docs/zh/guide/index.md

@@ -44,7 +44,7 @@ import UI from '@mylib/ui';
 import '@mylib/ui/style.css';
 const app = createApp(App);
 app.use(UI);
-//  tsconfig.json还需要添加以下配置以获得类型提示：
+//  tsconfig.json 还需要添加以下配置以获得类型提示：
 //  "types": ["@mylib/ui/global.d.ts"]
 
 // 按需引入

packages/ui/README.md

@@ -13,59 +13,63 @@ Vue 3 组件库，基于 Vue 3 + TypeScript 构建的现代化组件库。
 ## 安装
 
 ```bash
-npm
 npm install @mylib/ui
 
-yarn
 yarn add @mylib/ui
 
-pnpm
 pnpm add @mylib/ui
 ```
 
 ## 快速开始
 
+### 全局引入
+
 ```ts
 // main.ts
 import { createApp } from 'vue';
+import App from './App.vue';
+
 import VUI from '@mylib/ui';
 import '@mylib/ui/style.css';
-import App from './App.vue';
+
 const app = createApp(App);
 app.use(VUI);
 app.mount('#app');
 ```
 
-## 按需引入
+### 按需引入
 
 ```ts
 // main.ts
 import { createApp } from 'vue';
+import App from './App.vue';
+
 import { Button } from '@mylib/ui';
 import '@mylib/ui/style.css';
-import App from './App.vue';
+
 const app = createApp(App);
 app.use(Button);
 app.mount('#app');
 ```
 
-## 组件列表
-
-### 基础组件
-
-- Button 按钮
-
-### 反馈组件
-
-- Dialog 对话框
-
-## 目录结构
-
-packages/ui/
-├── src/ # 组件源码
-│ ├── components/ # 组件
-│ ├── \_utils/ # 组件内部使用的相关工具函数
-│ └── index.ts # 入口文件
-├── dist/ # 构建输出目录
-├── types/ # 类型声明文件
-└── package.json # 包配置文件
+## 使用示例
+
+```vue
+<template>
+  <VButton @click="open = true">弹窗</VButton>
+  <VButton type="primary">按钮</VButton>
+  <VButton type="success">按钮</VButton>
+  <VButton type="warning">按钮</VButton>
+  <VButton type="danger">按钮</VButton>
+  <VButton type="info">按钮</VButton>
+  <VDialog v-model:open="open">
+    <div> 弹窗测试2222 </div>
+  </VDialog>
+</template>
+
+<script setup lang="ts">
+import { VButton, VDialog } from '@mylib/ui';
+import { ref } from 'vue';
+const open = ref(false);
+</script>
+```

packages/ui/vite.config.ts

@@ -52,10 +52,11 @@ export default defineConfig({
       // 输出格式
       formats: ['es', 'cjs'],
       // 输出文件名
-      fileName: (format) =>
-        `${format === 'es' ? 'esm' : 'cjs'}/index.${format === 'es' ? 'mjs' : 'js'}`,
+      fileName: (format) => {
+        return `${format === 'es' ? 'esm' : 'cjs'}/[name].${format === 'es' ? 'mjs' : 'js'}`;
+      },
       // CSS 输出文件名
-      cssFileName: `style`,
+      cssFileName: 'style',
     },
     rollupOptions: {
       // 外部依赖
@@ -64,6 +65,10 @@ export default defineConfig({
       output: {
         // 导出方式
         exports: 'named',
+        // 保留原始模块结构，而不是将所有模块合并成一个大文件
+        preserveModules: true,
+        // 将 src 目录设置为模块的根目录，这样输出的文件就会直接从 src 的子目录开始，去掉 src 这一层。
+        preserveModulesRoot: 'src',
       },
     },
   },