npm插件开发-多组件(vue3+element-plus)

1. 项目初始化

首先，创建一个新的项目目录并初始化 package.json 文件：

mkdir multi-component-plugin
cd multi-component-plugin
npm init -y

2. 安装依赖

安装 Vue 3 和 ElementPlus：

npm install vue@3 element-plus

3. 项目结构搭建

创建项目的基本结构，通常可以在 src 目录下创建各个组件的文件夹，以及一个用于导出所有组件的入口文件。结构示例如下：

multi-component-plugin/
├── src/
│   ├── components/
│   │   ├── ComponentA/
│   │   │   └── ComponentA.vue
│   │   ├── ComponentB/
│   │   │   └── ComponentB.vue
│   ├── index.js
├── package.json

4. 编写组件

src/components/ComponentA/ComponentA.vue

<template>
  <div>
    <el-button @click="handleClick">Component A Button</el-button>
  </div>
</template>

<script setup>
import { ElButton } from 'element-plus';
const handleClick = () => {
  console.log('Clicked Component A button');
};
</script>

src/components/ComponentB/ComponentB.vue

<template>
  <div>
    <el-input v-model="inputValue" placeholder="Type in Component B"></el-input>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElInput } from 'element-plus';
const inputValue = ref('');
</script>

5. 封装插件并导出组件

在 src/index.js 中封装插件并导出所有组件：

import ComponentA from './components/ComponentA/ComponentA.vue';
import ComponentB from './components/ComponentB/ComponentB.vue';

const components = [
  ComponentA,
  ComponentB
];

const install = (app) => {
  components.forEach(component => {
    app.component(component.name || component.__name, component);
  });
};

export {
  ComponentA,
  ComponentB
};

export default {
  install
};

6. 配置 package.json

在 package.json 中添加必要的字段，指定入口文件等信息：

{
  "name": "multi-component-plugin",
  "version": "1.0.0",
  "description": "A plugin with multiple components using ElementPlus",
  "main": "src/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["vue", "element-plus", "components"],
  //"author": "Your Name",
  "license": "MIT",
  "dependencies": {
    "element-plus": "^2.3.0",
    "vue": "^3.2.47"
  }
}

7. 本地测试（暂时未采用，本人先发布然后 npm i xxx 使用成功）

可以在一个本地的 Vue 3 项目中测试这个插件：
• 创建一个新的 Vue 3 项目：

npm init vite@latest test-vue-project -- --template vue
cd test-vue-project
npm install

• 安装本地的插件：

npm install file:../multi-component-plugin

• 在 src/main.js 中引入并使用插件：

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import MultiComponentPlugin from 'multi-component-plugin';

const app = createApp(App);
app.use(ElementPlus);
app.use(MultiComponentPlugin);
app.mount('#app');

• 在 src/App.vue 中使用组件：

<template>
  <div>
    <ComponentA />
    <ComponentB />
  </div>
</template>

<script setup>
</script>

<style scoped>
</style>

• 启动开发服务器进行测试：

npm run dev

8. 发布到 NPM (确保name值唯一、每次修改后发布前记得修改版本号version)

如果本地测试通过，就可以将插件发布到 NPM 上：
• 确保已经登录到 NPM（发布失败的请将镜像源设置为：https://registry.npmjs.org/ ）：

npm login 

• 发布插件：

npm publish