Por lo general, nuestro front-end no es solo un proyecto, sino que se desarrollan múltiples proyectos al mismo tiempo, pero a menudo hay algunos lugares comunes en el código entre estos múltiples proyectos, como algunos de nuestros componentes, generalmente encontramos los mismos lugares Siempre optarán por copiar directamente, pero este problema también es obvio, es decir, si se cambia un lugar es necesario modificar otros lugares al mismo tiempo, obviamente esto no es razonable y no logra el propósito de la reutilización. Para todas estas situaciones, si desea reutilizar el código, le recomiendo usar npm para administrar nuestro código.
Primero creamos dos proyectos proyecto1 y proyecto2
vue create project1
vue create project2
Luego, necesitamos crear un directorio llamado BaseUI en el directorio src, y luego ingresar este archivo y ejecutar npm init para inicializar el nombre y la versión del paquete y otros detalles. Entonces solemos definir los siguientes archivos:
lib // 这个目录下面方组件文件
.npmignore // 这是忽略文件的
README.md // 这是项目说明文档
package.json // 这是包的信息描述
Tenga en cuenta que nuestro proyecto y los archivos empaquetados de npm se escriben juntos, el propósito es administrarlos cerca, porque generalmente nuestros componentes se modificarán muchas veces, generalmente escribimos componentes comerciales, no como componentes element-UI. Estable, por lo que no es independiente entre sí por conveniencia, pero podemos administrar archivos a través de ramas a través del comando git subtree, que también puede lograr nuestro objetivo:
git subtree push --prefix src/BaseUI origin base-npm
El comando anterior es empujar todos los archivos en el directorio src / BaseUI del proyecto a la rama base-npm. Empujo la carpeta especificada a la rama especificada directamente desde la rama maestra, por lo que cada vez que se cambia el proyecto, solo necesita Simplemente vuelva a enviar el código a la sucursal que envió el paquete.
Luego, cambie a la rama de distribución de paquetes base-npm para ejecutar el comando de distribución de paquetes, y se completará el inicio de sesión de npm y se completará la publicación de npm.
En este momento, podemos instalar nuestro paquete npm en el proyecto 2, y los componentes se pueden importar y usar:
Introducir un componente por separado
import {
BaseButton } from 'base-ui/lib/BaseButton'
Todos nuestros componentes están en la biblioteca y también se pueden configurar para que se carguen a pedido, lo que requiere compatibilidad con el complemento de babel
import {
BaseButton } from 'base-ui'
Babel instala complementos npm install babel-plugin-import --save-devy luego modifica el .babelrcarchivo.
[
"import",
{
"libraryName": "base-ui", // 指向你的组件库名称
"camel2DashComponentName": false, // default: true 取消大小写转化
}
]
Ahora solo comparta los componentes del proyecto 1 para el proyecto 2. Si los componentes del proyecto 2 también quieren usarse para el proyecto 1, también debe hacer lo mismo que antes, definir un directorio de paquete en el proyecto, extraer los archivos en una rama por separado y luego Realizar la operación de subcontratación.
Entonces, ¿por qué se definen varios proyectos como varios paquetes? ¿No se puede definir como un paquete? ¡También se puede poner en una gestión de almacén git! De hecho, esto es posible, pero si el directorio del paquete es independiente del proyecto, el mayor problema es que si desea cambiar un componente, debe cambiarlo en el directorio del paquete. Una vez completado el cambio, publique el paquete y luego instale el paquete en el proyecto. Después de eso, si no funciona, debe continuar enviando el paquete nuevamente, lo cual es muy engorroso.
Por lo tanto, se recomienda usar archivos fuente en un proyecto y usar paquetes en un proyecto, para lograr el propósito de compartir, en lugar de usar paquetes en ambos proyectos.
Mi dirección de proyecto de prueba: enlace de dirección de GitHub