Prefacio
Este artículo está preparado para no escribir, porque escribí el complemento de uniapp para cargar npm y luego agregué el componente de barra de pasos de VUE escrito a mano. Este artículo menciona que este componente de barra de pasos se cargará en el almacén de npm más tarde, y luego lo usará La forma de cargar el complemento uniapp es intentar cargar el complemento VUE. La carga se puede cargar, pero el complemento no se puede instalar cuando npm está instalado en el proyecto VUE. Así que lo pienso de nuevo. Oh, resulta que la carga del complemento uniapp y la carga del complemento VUE todavía no son lo mismo, ¡así que hay este artículo!
Secarse
1. Cree un proyecto de VUE vacío. Al crear un proyecto de VUE
antes, debe usar el siguiente comando
vue init webpack you-project
Pero no somos un proyecto de desarrollo, sino un complemento, por lo que no es necesario crear un entorno VUE completo, solo use el siguiente comando para crear
vue init webpack-simple you-project
La diferencia entre los dos
básicamente no necesita cambiar ninguna información, mi complemento en esta barra de pasos necesita usar la dependencia sass, ¡así que el entorno se puede instalar aquí! ¡La estructura completa del proyecto es la siguiente!
2. Inicie el proyecto,
primero ejecute el siguiente comando
npm install
La instalación aquí lleva mucho tiempo, no use el espejo cnpm Taobao, porque si cambia al espejo Taobao aquí, debe reemplazarlo cuando presione el complemento npm más tarde. Después de instalar la dependencia del entorno, inicie el proyecto
npm run dev
¡Empezado con éxito!
3. Elimina algunos archivos innecesarios.
Este paso se puede hacer o no. Lo principal es permitir que los colegas que usan nuestro complemento no se obsesionen tanto con la dependencia del complemento. ¡La comparación de las dos imágenes comprenderá claramente el significado de este paso!
Este es un complemento
que no se ha eliminado. Este es un complemento que se ha eliminado.
No se preocupe por esta dist. Hablaremos de esto más adelante.
Elimine el directorio de activos. Este directorio es para almacenar recursos. Si no hay recursos estáticos en el complemento, puede eliminarlo. ¡No es necesario mover los demás!
4. Escribir complementos
Si la cantidad de proyectos de complementos es relativamente grande, puede crear directorios separados. Mi complemento es relativamente simple, por lo que no quiero construir un estante tan grande. La estructura es la siguiente :
simple-step-bar.vue, este es el código del componente de barras del paso, index.js es el archivo que expone nuestros componentes al mundo exterior. Lo que debe tenerse en cuenta aquí es instalar. Los complementos de Vue deben proporcionar una instalación de método público, que se llamará cuando use el complemento, es decir, Vue.use (su complemento). De esta manera, todos sus componentes se inyectan globalmente en Vue.
5. Modifique el elemento de configuración webpack.config.js
entry: './src/plugin/index.js',//指定插件的对外暴露文件
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',//build后项目生成目录
filename: 'simple-step-bar.js',//build后的文件名
library: 'simple-step-bar', // 指定的就是你使用require时的模块名
libraryTarget: 'umd', // 指定输出格式
umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
- biblioteca: especifica el nombre del módulo cuando usa require
- libraryTarget: para admitir múltiples escenarios de uso, debemos elegir un formato de empaquetado adecuado. Los formatos de empaquetado comunes son CMD, AMD, UMD. CMD solo se puede ejecutar en el entorno Node, AMD solo se puede ejecutar en el lado del navegador y UMD admite dos entornos de ejecución al mismo tiempo. Evidentemente, deberíamos elegir el formato UMD.
- umdNamedDefine: nombre del módulo AMD en el proceso de construcción de UMD. De lo contrario, use la definición anónima.
A veces queremos desarrollar una biblioteca, como lodash, subrayado y otras bibliotecas de herramientas. Estas bibliotecas pueden usarse en commonjs y amd o introducirse en un script.
En este momento, necesitamos usar library y libraryTarget, solo necesitamos usar ES6 para escribir el código, compilarlo en un UMD universal y entregarlo a webpack
6. Compile el complemento
npm run build
7. Modifique el archivo package.json para
liberar el código abierto, por lo que debe cambiar este campo a falso
"privado": falso,
Esto se refiere a la ruta
"principal" que recuperará al importar simple-step-bar : "dist / simple-step-bar.js",
注意这里如果不指定这个文件会导致引用组件是找不到这个组件
8. Escriba el archivo README.md.
Si desea que el usuario adivine el complemento que escribió, no es necesario que realice este paso. Si no lo desea, escriba el archivo README.md en detalle cómo utilizar el complemento!
Después de que el complemento cargue npm, este archivo guiará al usuario después de que otros ingresen al complemento. Como se muestra abajo
9. Inicie sesión en npm localmente
npm login
Si no tiene una cuenta de npm, vaya al sitio web oficial para registrar una y habrá terminado en el sitio web oficial de npm . Preste atención al problema de la verificación del correo electrónico; de lo contrario, no podrá cargar complementos. El complemento de uniapp que carga npm se describe en este artículo
10. Plugin push npm
npm publish
Una vez que la inserción es exitosa, la consola es como arriba, y luego la notificación se enviará al buzón vinculado, ¡no es necesario verificar!
¡Entonces el backend del almacén de npm cambiará la cantidad de complementos!
Este es el complemento de barra de pasos simple que presionamos. No se mostrará de inmediato. Solo cambia el número de complementos de almacén. ¡Solo se mostrará después de unos 2 minutos!
Luego, cargue el complemento VUE en npm aquí y estará completo.
11.npm descarga de prueba del complemento
npm i super-step-bar
Una vez que la instalación sea exitosa, habrá complementos actuales en node_modules
12. El proyecto utiliza un complemento de barra de pasos simple
import simpleStepBar from 'simple-step-bar'
Vue.use(simpleStepBar);
Use el
código de prueba en la interfaz vue
<template>
<div id="app">
<div class="description-div">默认</div>
<simple-step-bar></simple-step-bar>
<div class="description-div">rem单位</div>
<div>
<button @click="less(1)">后退</button>
<button @click="plus(1)">前进</button>
</div>
<simple-step-bar
:totalWidth='80' :totalHeight='3' :unit='"rem"'
:stepList="stepList1" :currentStep="currentStep1"
:itemWidth='40' :lienWidth='0.1'
></simple-step-bar>
<div class="description-div">px单位</div>
<div>
<button @click="less(2)">后退</button>
<button @click="plus(2)">前进</button>
</div>
<simple-step-bar
:totalWidth='720' :totalHeight='48' :unit='"px"'
:stepList="stepList2" :currentStep="currentStep2"
:itemWidth='240' :lienWidth='2'
></simple-step-bar>
<div class="description-div">个性化样式</div>
<div>
<button @click="less(3)">后退</button>
<button @click="plus(3)">前进</button>
</div>
<simple-step-bar
:totalWidth='80' :totalHeight='3'
:unit='"rem"' :stepBackground='"#FFFFFF"'
:stepList="stepList3" :currentStep="currentStep3"
:itemWidth='20' :lienWidth='0.1' :lienColor='"red"'
:processingFontColor='"#ffffff"' :processingFontColorN='"#FF0005"'
:processingBackground='"#ef5e41"' :stepBorderColor='"#FF0005"'
></simple-step-bar>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
stepList1:["步骤a","步骤b"],
stepList2:["步骤1","步骤2","步骤3"],
stepList3:["步骤一","步骤二","步骤三","步骤四"],
currentStep1:1,
currentStep2:2,
currentStep3:3,
}
},
methods:{
plus(type){
switch (type) {
case 1:
this.currentStep1++;
break;
case 2:
this.currentStep2++;
break;
case 3:
this.currentStep3++;
break;
}
},
less(type){
switch (type) {
case 1:
this.currentStep1--;
break;
case 2:
this.currentStep2--;
break;
case 3:
this.currentStep3--;
break;
}
}
}
}
</script>
<style lang="scss">
#app {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.description-div{
margin-top: 2rem;
height: 2rem;
}
</style>
Con respecto al uso detallado del componente , escribir a mano el componente de barra de pasos de VUE , mal, solo quería escribir una función de barra de pasos, pero estaba escrito como un complemento, ¡y ahora que se ha servido el npm de montaje de código abierto!
npm ：simple-step-bar
gitee ：simple-step-bar
otro
El nombre del complemento subido por npm no puede ser el mismo que el de los complementos de otras personas. La versión no se puede duplicar
, por lo que debe modificar la versión después de cada cambio.
npm version 1.1.0
Cada vez que carga una nueva versión, debe reconstruirla antes de poder enviarla.
npm run build
Si ya tiene un complemento en su almacén, puede usar el nombre eliminado solo 24 horas después de eliminarlo.
npm unpublish guitest@1.0.1 //指定版本号
Además, se debe principalmente a consideraciones de seguridad. Después del evento de retiro del NPM de Azerbaiyán, npm anunció una nueva versión de las reglas, de la siguiente manera
- Se permite eliminar los paquetes cuya versión de actualización sea inferior a 24 horas;
- El encargado de mantenimiento de npm debe ser contactado para la eliminación de paquetes durante 24 horas;
- Si participan los mantenedores de npm, npm comprobará si hay otros paquetes que dependan del paquete y, de ser así, no se permitirá que se elimine;
- Si se eliminan todas las versiones de un paquete, npm cargará un paquete de marcador de posición vacío para evitar que los usuarios posteriores citen accidentalmente un reemplazo malicioso.