npm上传发布自定义组件超详细流程

本文介绍: 基于 element Plus 的el–table二次封装表格并且上传到npm上，让别人可以通过npm 安装你的插件。 vue3，vite，npm，自定义 npm 插件

前言

vue3，vite，基于 element Plus 的el–table二次封装表格并且上传到npm上，让别人可以通过npm 安装你的插件。

一、创建 一个新的vue 项目

npm create vue@latest

自己取一个名字，然后一直回车

完成以后进入项目npm i,有用到element Ui也要安装下

npm install element-plus –save

安装完成在main.js 里面引入

import { createApp } from "vue";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";

createApp(App).use(ElementPlus).mount("#app");

二、编写 插件 代码

在src下新建一个package文件夹，文件夹下面新建commonTable存放你写的组件，package文件夹下再新建一个index.js,用来打包时候的入口文件.
比较重要的点是这个组件名称一定要填好，这个是你最后引入插件的时候，使用的全局组件的名称.

你编写的组件代码：

Index.js

import LyTableLast from "./commonTable/index.vue"; // 引入封装好的组件

const components = [LyTableLast];
const install = function (App, options) {
  components.forEach((component) =&gt; {
    // 这个name是你创建组件的时候要填写好的
    App.component(component.name, component);
  });
};
export default { install };

三、修改 配置文件

修改 vite.config.js文件

import { fileURLToPath, URL } from "node:url";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// 第一步
import path from "path";

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

修改 package.json 文件

{
  "name": "last-table",
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "element-plus": "^2.4.3",
    "ly-table-last": "^1.0.1",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "vite": "^4.4.11"
  },
  "description": "This template should help get you started developing with Vue 3 in Vite.",
  "main": "vite.config.js",
  "keywords": [],
  "author": "",
  "license": "ISC"
}

四、打包插件

修改完之后执行，会得到一个dist文件夹这个就是打包以后的文件

 npm run build

五、测试插件

测试插件是否正常执行，这里面的LyTableLast可以随便取名但是你引用组件的时候需要引用你的组件内创建的那个名称

import { createApp } from "vue";
import App from "./App.vue";

import ElementPlus from "element-plus";
import "element-plus/dist/index.css";


// 打包之前测试
// import LyTableLast from './package';
// 打包之后测试方法
import LyTableLast from "../dist/common-table.es.js";
// 上线之后测试
// import LyTableLast from "ly-table-last";

createApp(App).use(ElementPlus).use(LyTableLast).mount("#app");