Porque la empresa necesita estudiar el complemento del paquete
1. Cree un nuevo proyecto simple de paquete web
npm install -g @ vue / cli-init
vue init webpack-simple 'listIcon'
Retorno de carro hasta el final
2. Cree una nueva carpeta lib en src para almacenar el código comercial
Tres, modificar el archivo de configuración
-
Modificar la configuración del archivo webpack.config.js
-
Modificar la configuración del archivo index.html
-
.gitignore archivo eliminar dist /
-
El
cuadro del archivo de configuración pakage.json necesita modificar sus necesidades comerciales para vincularse con su propia dirección git
Cuatro, configuración de código comercial, es decir, archivos bajo lib
código 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
La parte de VueComment es el código del componente, escrito de la misma manera que el componente empaquetado habitual
<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>
Cinco, prueba local
Primero, cuando realice la prueba local, primero empaque el complemento en el proyecto webpack-simple recién creado, ejecute el siguiente comando y genere un archivo comprimido list-icon-1.0.0.tgz en el directorio raíz
npm ejecutar
compilar paquete npm
Luego ejecute el siguiente comando en el proyecto referenciado para instalar el complemento
$ npm instalar D: / liumingjuan / nuevo marco / testCJ / list-icon / list-icon-1.0.0.tgz
D: / liumingjuan / new framework / testCJ / list-icon / list-icon-1.0.0.tgz es la ruta en el disco donde se encuentra el archivo comprimido y el
complemento se instala con éxito después de que se completa la ejecución. Busque en las dependencias del package.json del proyecto importado. En esta línea,
se introduce el último componente de referencia
//html
<list-icon :listData="listdata" @clickCell='clickItem'></list-icon>
//js
import listIcon from 'list-icon'
Código completo
<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. Sube el complemento a npm
Inicie sesión en https://www.npmjs.com/ para registrar una cuenta y
ejecutar
npm iniciar sesión
npm publicar
Se produjo un error 403.
Más tarde, se descubrió que el buzón no estaba certificado. Debe ir a su propio buzón para verificarlo, volver a ejecutar npm publish y luego la publicación se realizó correctamente.
7. Reemplace el paquete de instalación con el paquete de instalación en línea después del lanzamiento.
Ejecute la consola del proyecto para informar un error.
Más tarde, se descubrió que era un pozo enterrado durante la introducción.
Después de completar el código, se ejecutó correctamente. El
efecto es el siguiente:
