目录

• 1、初始化vue项目
• 2、新建npmPackage文件夹
• 3、编写代码
• 4、在mj-dialog文件夹里面新建index.js文件
• 5、打包组件
• 6、执行打包命令
• 7、在mj-dialog文件夹里面初始化初始化package.json文件
• 8、发布插件到npm仓库
• 9、下载安装发布的包

1、初始化vue项目

vue create [Project Name]  

使用vue脚手架创建一个vue项目。

2、新建npmPackage文件夹

在vue项目的src文件夹下新建一个npmPackage文件夹，package文件夹用来存放所有需要上传的组件。

3、编写代码

html

<template><el-dialogcustom-class="schedule_task_diaog":show-close="false":center="true":visible.sync="dialogTableVisible":close-on-click-modal="false"><slot></slot></el-dialog></template>

JavaScript

export default {name: "mj-dialog",data() {return {dialogTableVisible: false,};},methods: {// 关闭面板close() {this.dialogTableVisible = false;},// 打开面板openPanel(obj) {this.dialogTableVisible = true;this.$nextTick(() => {let dialogBox = document.getElementsByClassName("schedule_task_diaog"),{ width, height, borderRadius, left, top } = obj;for (let i = 0; i < dialogBox.length; i++) {dialogBox[i].style.width = `${width || 360}px`;dialogBox[i].style.height = `${height || 360}px`;dialogBox[i].style.left = `${left || 0}px`;dialogBox[i].style.top = `${top || 0}px`;dialogBox[i].style.borderRadius = `${borderRadius || 10}px`;}});},},};

css

/deep/ .schedule_task_diaog {padding: 0 !important;}::v-deep .schedule_task_diaog .el-dialog__header {width: 100%;padding: 0px !important;}/deep/ .schedule_task_diaog .el-dialog__body {width: 100%;padding: 0 !important;}

注意：style标签要用lang="less" scoped来修饰，否则样式会全局污染。

4、在mj-dialog文件夹里面新建index.js文件

单个注册组件

// 引入封装好的组件import mjDialog from "./index.vue";const install = function (Vue) {    Vue.component(mjDialog.name, mjDialog);};let install = function (Vue) {Vue.component(mjDialog.name, mjDialog);}export default install; 

批量注册组件

// 引入封装好的组件import mjDialog from "./index.vue";import mjDemo from "../npmPackage/mj-demo/index.vue";const arr = [mjDialog, mjDemo];// 批量组件注册const install = (Vue)=> arr.forEach((item) => Vue.component(item.name, item));export default install; 

这一步是封装组件中的重点，用到vue的install公开方法。这个方法会在使用Vue.use(mjDialog)时被调用，并把插件注册到全局，在子组件的任何地方都可以使用此插件。

5、打包组件

配置vue的package.json文件

vue-cli-service build --target lib ./src/view/npmPackage/packageMjDialog/component/mj-dialog/index.js --name mj-dialog --dest mj-dialog  

--target lib：指定打包的目录
--name：打包后的文件名字
--dest：打包后的文件夹的名称

6、执行打包命令

npm run package

此命令执行成功后，会在src同级目录生成mj-dialog文件夹。

7、在mj-dialog文件夹里面初始化初始化package.json文件

完全步骤

创建package.json的步骤
4.01、package name: 设置包名，也就是下载时所使用的的命令，设置需谨慎。
4.02、version: 设置版本号，如果不设置那就默认版本号。
4.03、description: 包描述，就是对这个包的概括。
4.04、entry point: 设置入口文件，如果不设置会默认为index.js文件。
4.05、test command: 设置测试指令，默认值就是一句不能执行的话，可不设置。
4.06、git repository: 设置或创建git管理库。
4.07、keywords: 设置关键字，也可以不设置。
4.08、author: 设置作者名称，可不设置。
4.09、license: 备案号，可以不设置。
4.10、回车即可生成package.json文件，然后还有一行需要输入yes命令就推出窗口。
4.11、测试package.json文件是否创建成功的命令npm install -g。

默认生成

npm init -y

8、发布插件到npm仓库

注册npm账号

想要发布插件到npm仓库，就必须要有一个账号，先去npm官网注册一个账号，注意记住用户名、密码和邮箱，发布的时候可能会用到。

设置npm源

npm config set registry=https://registry.npmjs.org

有些电脑可能本地的npm镜像源采用的是淘宝镜像源或者其它镜像源，如果想要发布npm包，需要把npm源切换为官方的npm源。不是所有的电脑都这样，我的电脑就不需要操作这一步。

添加npm用户

npm adduser  

进入mj-dialog目录，添加npm用户。指令提示填写用户名等等，如果之前设置过即可跳过此步。

发布插件包到npm服务器

npm publish

在mj-dialog目录下执行命令，如果发布失败可能是名字重复了，改名字即可，发布成功后，可到npm官网查看自己发布的npm包。

9、下载安装发布的包

npm install mj-dialog --save  

关于这个插件的使用请点这里。