前端使用npm封装自定义插件

前端使用npm封装自定义插件

提示：以下采用截图记录
项目A是：用来封装插件的项目
项目B是：已有项目，用来引入插件使用

---

项目是 jg-npm-plugin

---

一、创建项目A，用于封装插件

1.创建项目A，用于封装插件

创建vue2项目jg-npm-plugin参考步骤

2.在项目A内下载其他依赖和组件库，用于封装具体的组件页面使用

2.1在main.js引入依赖

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 引入ant组件和package内所需要使用的第三方库
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
Vue.use(Antd, {
  locale: zhCN,
});
Vue.use(Antd)

import _ from 'lodash'
Vue.prototype._ = _


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.因为我们可能会封装多个组件，所以在src下面新建一个/src/package文件夹用来存放所有需要上传的组件。

4.编写具体某个插件功能

在/src/package新建多个vue页面
这个页面就是后期你的插件页面内容，可以先随意写个按钮测试内容或文字
一定要注意该vue文件的命名name:“jg-plugin-button”,这个name命名就是后期你再其他页面引入插件后所使用的具体组件名。 类似于a-button、el-input等，这里命名啥，那在项目B里使用时候就是啥。

<template>
  <div>
    <a-button type="primary">默认按钮按钮</a-button>
  </div>
</template>

<script>
export default {
  props:{
  },
  name: "JgPluginButton", //这个就是下载插件后使用的组件名称
  data() {
    return {
    }
  },
  created () {
  },
  methods: {
  },
}
</script>

<style scoped>

</style>

5.入口文件index.js（src/package/index.js）

自定义插件的入口文件（类似于main.js文件），主要是将你写的组件，统一引入并注册
可参考elemen-ui的依赖包封装
这一步是封装组件中的重点，用到了Vue提供的一个公开方法：install。这个方法会在你使用Vue.use(plugin)时被调用，这样使得我们的插件注册到了全局，在子组件的任何地方都可以使用。

//自定义插件的入口文件（类似于main.js文件）

// 此项目A：指当前我用来封装自定义插件的项目
// 个人项目B：指以后某个想使用该插件的新项目

// 第三方的组件或者库 例如lodash 都在需要在A项目使用的页面去单独引用（或者在A项目的main.js） 否则会报错Uncaught TypeError: Cannot read properties of undefined (reading 'call')
// 当然首先要此项目A已安装第三方那些依赖
// 然后你个人项目B在使用此项目A所自定义封装的插件时候，就不需要单独下载第三方的库或者插件了

// 引入封装好的组件
import JgPluginButton from "./jg-plugin-button/index.vue";
import JgPluginEmpty from "./jg-plugin-empty/index.vue";
import JgPluginForm from "./jg-plugin-form/index.vue";
import JgPluginLoading from "./jg-plugin-loading/index.vue";
import JgPluginLodash from "./jg-plugin-lodash/index.vue";
import JgPluginProgress from "./jg-plugin-progress/index.vue";
import JgPluginUpload from "./jg-plugin-upload/index.vue";

const coms = [JgPluginButton,JgPluginEmpty,JgPluginForm,JgPluginLoading,JgPluginLodash,JgPluginProgress,JgPluginUpload]; // 将来如果有其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com); // com.name的name就是你自定义封装的组件的name：'JgPluginButton',后期在个人项目B里使用的就是<JgPluginButton></JgPluginButton>
  });

  if (typeof window !== "undefined" && window.Vue) {
    install(window.Vue);
  }

};

// export default install; // 这个方法以后再使用的时候可以被use调用

// 参考element-ui的写法 将每个组件返回可以直接.语法(JgNpmPlugin.JgPluginButton)取出使用 也可单独使用
export default {
  // version: '2.15.6',
  install, JgPluginButton,JgPluginEmpty,JgPluginForm,JgPluginLoading,JgPluginLodash,JgPluginProgress,JgPluginUpload
}

6.在 项目A内引入刚才封装的插件

在项目A的magin.js内引入自测。这样可以在项目A内边封装开发，边看到封装效果

// 在当前的项目直接引入插件入口文件进行测试 测试封装的组件功能完整性（否则你需要使用components方式引入测试其完整性）
import JgNpmPlugin from '../package/index.js'
// import "../../node_modules/gxx-plugin-ui/gxx-plugin-ui.css" // 本地测试无需引入css 但是发布后 在别的项目B使用记得引入css
Vue.use(JgNpmPlugin)

7.在App.vue内自测插件

<JgPluginButton></JgPluginButton>

==== 自测没问题，到此为止，组件的封装工作已完成，下面开始打包 ====

二、打包插件

2.1在package.json内创建打包命令

打包命令解释：
–target lib 关键字 指定打包的目录
–name 打包后的文件名字
–dest 打包后的文件夹的名称

"package": "vue-cli-service build --target lib ./src/package/index.js --name jg-npm-plugin --dest jg-npm-plugin"

2.2打包命令

注意是在src下执行该命令

npm run package

打包成功的结果如图（只会生成少量的js文件，那么此次打包就是成功的）

注意：也可能会遇到打包失败的情况，如图

2.3手动添加一个描述文件，介绍该插件如何使用（非必要）

9、发布到npm
初始化

npm init -y

npm官网地址

10、在别的项目里使用该插件
下载

npm i jg-npm-plugin

在main.js引入

// 引入自己的组件
import JgNpmPlugin from 'jg-npm-plugin'
import '../../node_modules/jg-npm-plugin/jg-npm-plugin.css'
Vue.use(JgNpmPlugin)

=========================================

以下是可能出现的报错信息：
1、组件找不到

2、引入图片资源错误
图片资源封装办法