Comparta una práctica herramienta de andamiaje de biblioteca de componentes vite + vue3 para mejorar la eficiencia del desarrollo.Utilice el
andamio yyg-cli listo para usar: cree rápidamente una biblioteca de componentes vue3 y un proyecto de depósito de la familia vue3
Práctica elegante de nivel empresarial de Vue3 - marco de biblioteca de componentes - 1 Compilación pnpm monorepo Elegancia a nivel empresarial de Vue3
en la práctica - Marco de biblioteca de componentes - 2 Inicialización de la raíz del espacio de trabajo
Elegancia a nivel empresarial de Vue3 en la práctica - Marco de biblioteca de componentes - 3 Creación de un entorno de desarrollo de biblioteca de componentes
Elegancia a nivel empresarial de Vue3 en la práctica - Marco de biblioteca de componentes - 4 Arquitectura CSS del Biblioteca de componentes
Este artículo continúa la construcción del entorno de desarrollo de la biblioteca de componentes. Los dos primeros artículos introdujeron la inicialización de proyectos de componentes en la biblioteca de componentes y la arquitectura CSS de la biblioteca de componentes. Este artículo presenta la construcción de una biblioteca de herramientas general. Durante el proceso de desarrollo de componentes, se pueden llamar algunas funciones de herramientas comunes y estas funciones de herramientas se pueden extraer en un paquete npm independiente.
1 Crear kit de herramientas
1.1 Kit de herramientas de inicialización
Hasta ahora, hay tres paquetes en el directorio de paquetes : componente de muestra foo , estilo scss , agregación de biblioteca de componentes yyg-demo-ui y ahora cree el cuarto: utils .
Ingrese al directorio utils en la línea de comando y use pnpm para inicializar.
pnpm init
Modifique el nombre y principal en el archivo package.json generado automáticamente , el contenido es el siguiente:
{
"name": "@yyg-demo-ui/utils",
"version": "1.0.0",
"description": "通用工具函数",
"main": "index.ts",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Dado que el kit de herramientas también está escrito en TypeScript, también se proporciona un archivo tsconfig.json en utils :
{
"compilerOptions": {
"target": "es2015",
"lib": [
"es2015"
],
"module": "commonjs",
"rootDir": "./",
"allowJs": true,
"isolatedModules": false,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
1.2 Escribe la primera función de herramienta.
Descripción del requisito: La comunicación entre componentes es un requisito rígido. Cuando hay muchos niveles de componentes, se puede utilizar un bus global para comunicarse. EventBus generalmente se usa como bus global en Vue 2.x, mientras que Vue 3.x puede usar mitt . mitt es de tamaño pequeño, admite el monitoreo de todos los eventos y la eliminación por lotes, no depende de instancias de Vue y se puede usar en todos los marcos. La primera función de nuestra herramienta es simplemente encapsular mitt y exportar el objeto mitt.
Primero instale las dependencias de mitt en el paquete utils :
pnpm install [email protected]
Los estudiantes cuidadosos encontrarán que el hermano Yaya especificó el número de versión 1.1.3 al presentar mitt, esto se debe a que el hermano Yaya siempre genera un error de tipo o no puede encontrar el archivo de declaración de tipo cuando usa la última versión 3.0.0, porque no hay una declaración de tipo. archivo Si está vacío, simplemente se degradará a la versión 1.1.3.
Cree el directorio de código fuente src en el directorio utils y cree el archivo emitter.ts en src .
utils/src/emitter.ts :
import mitt from 'mitt'
const Mitt = mitt
export const emitter: mitt.Emitter = new Mitt()
export default emitter
La segunda línea de código anterior parece redundante, porque es esencialmente new mitt() , lo que se hace para satisfacer las reglas de eslint:
El nombre de un constructor no debe comenzar con una letra minúscula.
1.3 Escribe la función de la segunda herramienta.
El objeto emisor anterior se usará en el desarrollo de componentes posteriores, pero no se usa en foo, así que creemos una función de herramienta para realizar pruebas.
utils/src/Cree el archivo test-log.ts en el directorio :
export const testLog = (str: string) => {
console.log('test log: ', str)
}
1.4 Archivo de entrada
El paquete.json anterior especifica main como index.ts , crea el archivo index.ts en el directorio utils , importa y exporta todas las funciones de la herramienta, etc.
export {
emitter } from './src/emitter'
export {
testLog } from './src/test-log'
En resumen, la estructura de directorios del kit de herramientas universal de la biblioteca de componentes es la siguiente:
packages/
|- utils/
|- src/
|- emitter.ts
|- test-log.ts
|- index.ts
|- tsconfig.json
|- package.json
2 Uso de kits de herramientas en componentes
2.1 Instalar dependencias
El componente de muestra foo se ha desarrollado anteriormente . Si este componente quiere utilizar el kit de herramientas, primero debe instalar las dependencias. Ingrese el directorio foo en la línea de comando :
pnpm install @yyg-demo-ui/utils
Después de la ejecución, habrá una línea más de dependencias en el package.json de foo:
"dependencies": {
"@yyg-demo-ui/utils": "workspace:^1.0.0"
}
2.2 Usando herramientas
Dado que el paquete utils especifica el principal como index.ts , y todas las herramientas se importan y exportan en index.ts , solo necesita introducir el paquete utils cuando lo use .
Por ejemplo, para utilizar la función testLog creada anteriormente , sólo necesitas introducirla en el código de la siguiente manera:
import {
testLog } from '@yyg-demo-ui/utils'
Este método se llama en el evento de clic del botón en la configuración :
const onBtnClick = () => {
console.log('点击按钮测试', props.msg)
testLog(props.msg)
}
Si se agregan nuevas funciones de herramientas más adelante en el proceso de desarrollo, como el análisis de esquemas JSON, etc., simplemente agréguelas a utils e impórtelas y expórtelas uniformemente en utils/index.ts .
Gracias por leer este artículo. Si este artículo le ha brindado un poco de ayuda o inspiración, apóyelo tres veces seguidas, dé me gusta, síganos y recopile. El programador Elegant Brother continuará compartiendo más información útil con usted.