Because the business needs to study the package plug-in
1. Create a new webpack-simple project
npm install -g @vue/cli-init
vue init webpack-simple ‘listIcon’
Carriage return all the way
2. Create a new lib folder under src to store business code
Three, modify the configuration file
-
Modify webpack.config.js file configuration
-
Modify index.html file configuration
-
.gitignore file remove dist/
-
pakage.json configuration file
box need to modify their business needs to bind with its own git address
Four, business code configuration, that is, files under lib
index.js code:
//这里为组件封装、挂载部分，有了这部分代码我们就可以在引用时在外部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
The VueComment part is the component code, written in the same way as the usual package component
<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>
Five, local test
First, when testing locally, first package the plug-in in the newly created webpack-simple project, execute the following command, and generate a list-icon-1.0.0.tgz compressed file in the root directory
npm run build
npm pack
Then execute the following command in the referenced project to install the plugin
$ npm install D:/liumingjuan/new framework/testCJ/list-icon/list-icon-1.0.0.tgz
D:/liumingjuan/new framework/testCJ/list-icon/list-icon-1.0.0.tgz is the path in the disk where the compressed file is located, and the
plug-in is successfully installed after the execution is completed. Look in the dependencies of the imported project’s package.json To this line, the
last reference component is introduced
//html
<list-icon :listData="listdata" @clickCell='clickItem'></list-icon>
//js
import listIcon from 'list-icon'
Complete code
<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>
6. Upload the plugin to npm
Log in to https://www.npmjs.com/ to register an account and
execute
npm login
npm publish
A 403 error occurred.
Later, it was found that the mailbox was not authenticated. You need to go to your own mailbox to verify it, re-execute npm publish and then publish successfully
7. Replace the installation package with the online installation package after release
Run the project console to report an error.
Later, it was discovered that it was a pit buried during the introduction.
After filling in the code, it ran successfully
.
