创建 npm 插件

创建vue 项目

vue create [Project Name]  

创建放插件的文件夹 src/views/npmPackage

 插件代码 src/npmPackage/packageMjDialog/index.vue

<template>
    <div>
       <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
			<el-form-item label="活动名称" prop="name">
				<el-input v-model="ruleForm.name">el-input>
			el-form-item>
			
			<el-form-item>
				<el-button type="primary" @click="submitForm('ruleForm')">立即创建el-button>
				<el-button @click="resetForm('ruleForm')">重置el-button>
			el-form-item>
		el-form>
    div>
template>
 
<script>
export default {
	name: "bjw-table",
	props:{
		
	},
	data() {
		return {
			ruleForm: {
				name: '',
				
			},
			rules: {
				name: [
					{ required: true, message: '请输入活动名称', trigger: 'blur' },
				]
			}
		};
	},
	methods: {
		submitForm(formName) {
			this.$refs[formName].validate((valid) => {
			if (valid) {
				alert('submit!');
			} else {
				console.log('error submit!!');
				return false;
			}
			});
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
		initForm(obj){
			this.$nextTick(() => {
				let formDom = document.getElementsByClassName('demo-ruleForm'),
				{width,backgroundColor} = obj
	
				console.log(formDom,'========')
				for (let i = 0; i < formDom.length; i++) {
					formDom[i].style.width = `${width || 660}px`;
					formDom[i].style.backgroundColor = `${backgroundColor}`;
					
					console.log(formDom[i])
					console.log(formDom[i].children)
				}
			})
		}
	}
};
 
script>
 
<style lang="less" scoped>
	.demo-ruleForm{
		widows: 500px;
		border-radius: 10px;
		background: skyblue;
	}
style>

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

在 插件文件夹下创建index.js(src/npmPackage)

单个注册组件

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

批量注册组件

// 引入封装好的组件
import bjwTable from "./packageMjDialog/index.vue";
import bjwButton from "./packageButton/index.vue"
 
const arr = [bjwTable, bjwButton];
const install = (Vue)=> arr.forEach((item) => Vue.component(item.name, item));
export default install; 

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

打包组件

配置vue的package.json文件

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "package": " vue-cli-service build --target lib ./src/views/npmPackage/index.js --name bjw-table --dest bjw-table"
  },

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

执行打包命令

npm run package

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

在bjw-table文件夹里面初始化初始化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

发布插件到npm仓库

注册npm账号 官网

设置npm源

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

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

添加npm用户

npm adduser  

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

发布插件包到npm服务器

npm publish

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

使用npm 插件

下载安装发布的包

npm install bjw-table --save

注册组件

main.js中

// 引入组件结构
import bjwTable from "bjw-table";
// 引入组件样式
import 'bjw-table/bjw-table.css'
// 注册组件到全局
Vue.use(bjwTable);

使用插件

<template>
    <div>
        <bjw-table ref='demoForm'> bjw-table>
        <bjw-btn>bjw-btn>
    div>
template>
 
<script>
    export default {
        data(){
            return{
 
            }
        },
        methods:{
            initDemoFrom(){
                this.$refs.demoForm.initForm({
                    width:600,
                    backgroundColor:'#ffffff'
                })
            }
        },
        mounted(){
            this.initDemoFrom()
            let box = document.getElementsByClassName('box')
            console.log(box[0].children)
        }
    }
script>
<style>
style>

更新插件

1. 打包 src同级目录下  npm run package
2. 初始化 进入打包后生成的文件夹   npm init -y. 或者手动设置 package.json 文件
3. 版本跟新 npm version 1.1.1
4. 发布  npm publish  

注意：版本号不能重复

参考资料

npm发布vue插件步骤、组件、package、adduser、publish、getElementsByClassName、important、export、default、target、dest_web半晨的博客-CSDN博客_vue 发布插件

vue+elementUi+dialog封装自定dialog部分属性，并打包成插件、npm install mj-dialog --save、display、justify、between_web半晨的博客-CSDN博客

Mixed spaces and tabs no-mixed-spaces-and-tabs vue报错 问题解决方法_H@Z*rTE|i的博客-CSDN博客 

npm包如何发布更新_前端劝退师儿的博客-CSDN博客_npm publish 更新

npm publish 报错 【you or one of your dependencies are requesting a package version that is forbidden by your security policy】 - 下小朋友 - 博客园