npm发布vue插件步骤、组件、package、adduser、publish、getElementsByClassName、important、export、default、target、dest

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> 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"; 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文件

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

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

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

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