npm 发布 vue 插件和 README.md文件

敢问

已于 2022-08-04 10:08:32 修改

阅读量1.1k

点赞数

分类专栏： VUE 文章标签： vue.js npm 前端

于 2022-07-28 16:27:43 首次发布

本文链接：https://blog.csdn.net/weixin_41040445/article/details/126036878

版权

VUE 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

创建 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>