Vite 组件库模板教程

1. 项目的目录结构及介绍

vite-component-library-template/
├── src/
│   ├── components/
│   │   └── MyComponent.vue
│   ├── index.js
│   └── styles/
│       └── main.css
├── public/
│   └── index.html
├── package.json
├── vite.config.js
└── README.md

• src/: 源代码目录，包含组件和入口文件。
  • components/: 存放组件文件，例如 MyComponent.vue。
  • index.js: 项目的入口文件，负责导出组件。
  • styles/: 存放样式文件，例如 main.css。
• public/: 公共资源目录，包含 index.html 文件。
• package.json: 项目依赖和脚本配置文件。
• vite.config.js: Vite 配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件是 src/index.js，其主要作用是导出组件，供其他项目使用。以下是 index.js 的示例代码：

import MyComponent from './components/MyComponent.vue';

export { MyComponent };

该文件导出了 MyComponent 组件，使得其他项目可以通过 import { MyComponent } from 'vite-component-library-template' 的方式引入并使用该组件。

3. 项目的配置文件介绍

vite.config.js

vite.config.js 是 Vite 的配置文件，用于配置项目的构建和开发服务器等。以下是该文件的示例内容：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyLibrary',
      fileName: (format) => `my-library.${format}.js`
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue'
        }
      }
    }
  }
});

• plugins: 配置 Vite 插件，这里使用了 @vitejs/plugin-vue 插件来支持 Vue 组件。
• build: 配置构建选项。
  • lib: 配置库的入口文件、名称和文件名格式。
  • rollupOptions: 配置 Rollup 选项，指定外部依赖和输出格式。

通过这些配置，项目可以被构建为一个独立的库，方便在其他项目中使用。