因为业务需要研究一下封装插件
一、新建一个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压缩文件
扫描二维码关注公众号,回复:
13084216 查看本文章
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>
六、将插件上传到npm
登录 https://www.npmjs.com/ 网站 注册账号
执行
npm login
npm publish
出现一个403报错
后来发现是邮箱未认证,需要去自己的邮箱认证一下,重新执行npm publish 然后则发布成功
七、发布后将安装包替换为线上的安装包
运行项目控制台报错
后来发现是引入时埋下的坑
补齐代码后运行成功
效果如图: