简单封装npm插件

因为业务需要研究一下封装插件

一、新建一个webpack-simple项目

npm install -g @vue/cli-init
vue init webpack-simple ‘listIcon’

一路回车
在这里插入图片描述

二、src下新建lib文件夹存放业务代码

在这里插入图片描述

三、修改配置文件

修改webpack.config.js文件配置
修改index.html文件配置
.gitignore 文件去掉dist/
pakage.json文件配置
框中自己的业务需要修改需要与自己的git地址绑定

四、业务代码配置，即lib下文件

在这里插入图片描述
index.js代码：

//这里为组件封装、挂载部分，有了这部分代码我们就可以在引用时在外部use一个组件了
import VueComment from './VueComment.vue'
const listIcon = {
    
    
  install: function(Vue) {
    
    
    Vue.component(VueComment.name, VueComment)
  }
}
if (typeof window !== 'undefined' && window.Vue) {
    
     
    window.Vue.use(listIcon) 
}
export default listIcon

VueComment部分为组件代码，写法跟平时封装组件是一样的

<template>
	<div class="list-view">
		<div class="list-cell" :style="{ width:100/count+'%' }" @click="clickItem(item)" v-for="(item,index) in listData" :key="index" >
			<img :src="item.imgSrc" width="80%" />
			<p>{
    
    {
    
    item.title}}</p>
		</div>
	</div>
</template>

<script>
	export default{
    
    
		name:'list-icon',
		props:{
    
    
			listData:{
    
    
				type:Array
			},
			count:{
    
    
				type:Number,
				default:4
			}
		},
		methods:{
    
    
			clickItem(item){
    
    
				this.$emit('clickCell',item)
			}
		}
	}
</script>

<style lang="scss" scoped="">
	.list-view{
    
    
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: flex-start;
		.list-cell{
    
    
			margin-bottom: 0.5rem;
			img{
    
    
				height: auto;
			}
			p{
    
    
				line-height: 1.2rem;
				padding: 0;
				margin: 0;
				color: #666;
				font-weight: 600;
				font-size: 0.8rem;
			}
		}
		
	}
</style>

五、本地测试

首先在本地测试时首先在新建的webpack-simple项目中打包插件，执行以下命令，在根目录生成一个list-icon-1.0.0.tgz压缩文件

npm run build
npm pack

然后在引用的项目中执行以下命令安装插件

$ npm install D:/liumingjuan/新搭建框架/testCJ/list-icon/list-icon-1.0.0.tgz

D:/liumingjuan/新搭建框架/testCJ/list-icon/list-icon-1.0.0.tgz为压缩文件所在磁盘中的路径
执行完毕则成功安装插件，在引入项目的package.json的dependencies中看到这一行
在这里插入图片描述
最后引用组件中引入

//html
<list-icon :listData="listdata" @clickCell='clickItem'></list-icon>
//js
import listIcon from 'list-icon'

完整代码

<template>
	<div class="container">
		<commonHeader title="移动端标题页"></commonHeader>
		<list-icon :listData="listdata" @clickCell='clickItem'></list-icon>
	</div>
	
</template>

<script>
	import listIcon from 'list-icon'
	import commonHeader from '../../components/h5/commonHeader.vue'
	export default{
    
    
		components:{
    
    commonHeader},
		data(){
    
    
			return{
    
    
				listdata:[
					{
    
    
						imgSrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg',
						title:'菜单标题'
					},
					{
    
    
						imgSrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg',
						title:'菜单标题'
					},
					{
    
    
						imgSrc:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2574324515,2446667376&fm=26&gp=0.jpg',
						title:'菜单标题'
					},
					
				]
			}
		}		
	}
</script>

<style lang="scss" scoped="">
</style>