目录
1、初始化vue项目
vue create [Project Name]使用vue脚手架创建一个vue项目。
2、新建npmPackage文件夹
在vue项目的src文件夹下新建一个npmPackage文件夹，package文件夹用来存放所有需要上传的组件。
3、编写代码
html
<template>
<el-dialog
custom-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)时被调用，并把插件注册到全局，在子组件的任何地方都可以使用此插件。扫描二维码关注公众号，回复： 14255503 查看本文章
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关于这个插件的使用请点这里。