Vue3 + Vite 构建组件库发布到 npm

你有构建完组件库后，因为不知道如何发布到 npm 的烦恼吗？本教程手把手教你用 Vite 构建组件库发布到 npm

搭建项目

1. 这里我们使用 Vite 初始化项目，执行命令：

pnpm create vite my-vue-app --template vue

2. 这里以我的项目 vue3-xmw-table 为例

调整目录结构

1. 首先需要创建一个 packages 目录，用来存放组件
2. 将 src 目录改为 examples 用作示例
3. 启动项目的时候，默认入口文件是 src/main.js，将 src 目录改为 examples 之后，就需要重新配置入口文件，在根目录下创建一个 vue.config.js 文件

  // vue.config.js
  module.exports = {
   
    // 将 examples 目录添加为新的页面
    pages: {
   
      index: {
   
        // page 的入口
        entry: 'examples/main.ts',
        // 模板来源
        template: 'public/index.html',
        // 输出文件名
        filename: 'index.html'
      }
    }
  }

4. 修改根目录入口文件 index.html 中的 main.ts 引入路劲

  <script type="module" src="/examples/main.ts"></script>

5. 完整的目录结构如下：
   

组件开发

1. 之前我们创建的 packages 目录，用来存放组件

2. 该目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出

3. 每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用

4. 这里以组件 xmwTable 为例，完整的 packages 目录结构如下：
   

5. xmwTable/src/main.vue 就是组件的入口文件，这里有一点要非常注意：

需要注意的是，组件必须声明 name，这个 name 就是组件的标签

<script lang="ts">
  export default {
     
    name: "vue3-xmw-table", //这个⾮常重要，就是未来你放到其他项⽬中，组件标签的名字，⽐如：<vue3-xmw-table></vue3-xmw-table>
  };
</script>

整合并导出组件

1. 编辑 packages/xmwTable/index.ts，实现组件的导出

// 导入组件，组件必须声明 name
import XmwTable from './src/main.vue'

// 为组件添加 install 方法，用于按需引入
XmwTable.install = function (Vue: any) {
   
    Vue.