npm publica la biblioteca de componentes personalizados de vue3: método 2

npm lanza la biblioteca de componentes personalizados vue3

Crear proyecto

vue create test-ui

Componente personalizado

Cree un componente personalizado. El nombre del componente se basa en sus necesidades. Es mejor tener un componente por carpeta. La siguiente imagen es mi ejemplo.
El

componente src/components es el mismo que cuando escribes una página. Los llamados componentes son convenientes y prácticos. No necesitas mover repetidamente la página a diferentes proyectos. Puedes instalarlo directamente en tu proyecto local. La siguiente figura es un ejemplo de un componente.

Después de escribir el componente, puede probar si se puede usar normalmente en App.vue.

publicar configuración

Registrar componente

Cree un nuevo archivo index.js en el directorio de componentes y escriba los componentes que desea publicar en él.

Modificar el archivo vue.config.js

const {
    
     defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    
    
  transpileDependencies: true,
  pages: {
    
    
    index: {
    
    
      // page 的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
})

Modifique el archivo package.json y configure los comandos de empaquetado y la información de la biblioteca de componentes

Comando de empaquetado:
–la palabra clave target lib especifica el directorio para el empaquetado
–name el nombre del archivo empaquetado
–dest el nombre de la carpeta empaquetada

"lib": "set NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build --target lib --name cjuly-ui --dest lib ./src/components/index.js"

Información del componente:

name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。

Nota: Recuerde que nadie ha publicado el nombre del paquete de la biblioteca de componentes en npm, de lo contrario no se puede publicar. Puede ir al sitio web oficial de npm para comprobar si alguien ha publicado el mismo nombre.
https://www.npmjs.com/

Establecer ignorar archivos

Cree un archivo .npmignore en el directorio src y configure el archivo para ignorar. La sintaxis de este archivo es la misma que la de .gitignore. Configure qué directorios o archivos ignorar al publicar en npm.

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
jsconfig.json
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

Empezar a empacar

Ejecutar comando de empaquetado

npm run lib

Una vez completado el empaquetado, habrá una carpeta lib adicional en el directorio del proyecto, que almacena los archivos empaquetados.

Registrar cuenta npm

https://www.npmjs.com/signup

Inicie sesión localmente después del registro

# 切换到npm地址
npm config set registry=https://registry.npmjs.org
# 登录，然后输入你的账号，密码，邮箱及验证码
npm login

Publicar y usar

liberar

Ejecutar comando de liberación

npm publish

usar

Instálelo e introdúzcalo en el proyecto en el que desea utilizar esta biblioteca de componentes.

Instale la biblioteca de componentes. Si el componente se actualiza, vuelva a ejecutar este comando.

npm install cjuly-ui

Introducido globalmente en main.js

# vue2引入
import cjuly-ui from 'cjuly-ui'
Vue.use(cjuly-ui);

# vue3引入
import cjuly-ui from 'cjuly-ui'
createApp(App).use(cjuly-ui).mount('#app')

Úselo directamente como elemento

Actualizar biblioteca de componentes

Si su componente se modifica, debe actualizarlo en el directorio empaquetado
de npm en el proyecto de la biblioteca de componentes y ejecutar el siguiente comando:

npm run lib
npm version patch
npm publish

Es posible que se informe un error cuando se parchea la versión de npm. Simplemente ejecute el siguiente comando y luego vuelva a ejecutar el comando de lanzamiento de actualización de versión anterior.

git add .
git commit -m "publish to npm"

Nota: Después de la publicación, es mejor volver a configurar la dirección npm en el espejo de Taobao y luego cambiar a la dirección npm cuando se publique nuevamente.

# npm发布地址
npm config set registry=https://registry.npmjs.org
# npm淘宝镜像
npm config set registry https://registry.npm.taobao.org/