1. 初步想法

1. 自定义组件放入 npm 平台。

2. 在 vite + vue3 + ts + elementPlus 的基础上封装组件放入 npm 平台。

3. npm 平台 组件多了以后 放入 npm组中管理。

4. 至少公司或个人项目可以随时方便调用，方便管理。

2. 使用 Vite 初始化代码

1. 初始化指令 文档地址

   <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="bash" cid="n25" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> yarn create vite

   OR

   yarn create vite my-cus-com --template vue-ts # 使用该模板

   yarn

   yarn dev # 启动项目</pre>

   按照提示 运行起来。

2. 安装 elementPlus

   <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="bash" cid="n28" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> yarn add element-plus</pre>

   使用全局引入方式 官方文档

3. 编写代码

1. 在 src 目录下 新增 packages 目录。并新增文件index.ts 作为打包时候的入口文件。新增 cus-table 目录用来存放自定义的 table 组件。

   <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="vue" cid="n83" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> # pacages/cus-table/index.vue
   <script setup lang='ts'>
   /**

   • ! 注意：name 属性一点要定义
   • 这个是你最后引入插件的时候，使用的全局组件的名称
     */
     defineOptions({
     name: 'cusTable'
     })
     import { ref } from 'vue'
     import type { Ref } from 'vue'
     const msg:Ref<string> = ref('hello vue3 component')
     </script>
     <template>
     <div>{{ msg }}</div>
     </template>
     <style lang="less" scoped>
     </style>
     </pre>

   <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="tsx" cid="n86" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> # packages/index.ts

   import CusTable from './cus-table/index.vue'

   // 使用数组，方便后续更多组件进行注册时使用
   const coms = [CusTable]

   const install = (App:any/* , options:any */) => {
   coms.forEach(com => {
   App.component(com.name, com)
   })
   }

   export default { install }</pre>

2. 完整的代码 参考代码

4. 修改配置文件

• 修改 vite.config.ts 文件。

  <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="tsx" cid="n80" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;">
  // @ts-nocheck
  import { fileURLToPath, URL } from "node:url"
  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'

  // 这里不让用 require('path')，所以使用下面的方法
  import { resolve } from 'path'

  export default defineConfig({
  plugins: [vue()],
  resolve: {
  alias: {
  '@': fileURLToPath(new URL('./src', import.meta.url))
  }
  },
  build: {
  lib: {
  entry: resolve(__dirname, "src/packages/index.ts"),
  name: "cusTable",
  fileName: (format) => cus-table.${format}.js
  },
  rollupOptions: {
  // 确保外部化处理那些你不想打包进库的依赖
  external: ["vue"],
  output: {
  // 在 UMD 构建模式下为这些外部化的依赖提供一个全局变量
  globals: {
  vue: "Vue"
  }
  }
  }
  }
  })
  </pre>

• 修改 package.json 文件。 添加描述，主体，关键字，作者，版权等信息。参考代码 参考代码

5. 打包插件

打包指令

<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="bash" cid="n97" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> yarn build</pre>

会在根目录生成 dist 目录。按照上面的配置 会生成如下文件：

<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="bash" cid="n102" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> dist

cus-table.es.js # 即为要使用的文件
cus-table.umd.js</pre>

6. 测试插件

测试方式1:

• 在 main.ts 文件中 引入 组件，并全局注册。

  <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="tsx" cid="n112" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> import cusTable from '../dist/cus-table.es.js'

  app.use(cusTable)
  </pre>

• 在 App.vue 调用 组件。

  <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="vue" cid="n118" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> <cusTable /></pre>

测试方式2：

等把组件上传到 npm 后，执行安装来进行测试。

<pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="basic" cid="n161" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> yarn add cus-table-com</pre>

7. 发布插件

1. 注册 npm 平台账号，参考文档

2. 进入 dist 目录下

   <pre class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" spellcheck="false" lang="basic" cid="n147" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px 0px; margin-bottom: 15px; margin-top: 15px; width: inherit;"> npm init

   按照提示生成 package.json 文件。 具体参考 git 参考代码

   npm login # 如果登录过可以不用再次登录。
   npm publish</pre>

   注意事项：

   • 一定要使用 官方源 * https://registry.npmjs.org/。*

   • package.json的name名称一定要 整个 npm 平台唯一。

   • package.json的private要 false。

3. 可以去 npm 平台查看自己的插件，发布完成。

8. 本文档对应代码Git

参考代码