Creación de biblioteca personal npm - biblioteca de componentes vue

Es inevitable que haya varios componentes en el trabajo, pero si solo copia el código, es demasiado complicado de guardar, así que pensé en crear mi propio paquete npm para encapsular las clases de componentes de uso común. Este artículo solo habla sobre cómo crear rápidamente una biblioteca en vue-cli3.0, y la creación nativa se deja para el siguiente artículo.

Requisito previo: crear un proyecto vue-cli3.0

Cambiar el nombre de la carpeta src a ejemplos
Agregue una nueva carpeta de paquetes en el directorio raíz
Cree un nuevo archivo .npmignore (requerido para cargar npm)
Nuevo vue.config.js

Primero, escriba los componentes que necesitamos guardar en la carpeta de paquetes.
El catálogo detallado es el siguiente:
inserte la descripción de la imagen aquí
El archivo .vue en src es su propio componente y ya no muestra
el archivo index.js en el área de texto.

import Virtual from './src/main.vue'
import CircleProgress from './src/circleProgressBar.vue'
import Redio from './src/redio.vue'

Virtual.install = function (Vue) {
    
    
  Vue.component(Virtual.name, Virtual)
}

CircleProgress.install = function (Vue) {
    
    
  Vue.component(CircleProgress.name, CircleProgress)
}

Redio.install = function (Vue) {
    
    
  Vue.component(Redio.name, Redio)
}

export default [Virtual, CircleProgress, Redio]

index.js en paquetes

// 导入整合组件
import Virtual from './textarea/index'
// 存储组件列表
const textareas = Virtual

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
    
    
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  textareas.map(component => Vue.component(component.name, component))
}

if (typeof window !== 'undefined' && window.Vue) {
    
    
  install(window.Vue)
}

export default {
    
    
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  textareas
}

La operación en paquetes se completa y luego introduce la función de prueba de componentes en man.js en los ejemplos

import TagTextarea from '../packages/index'
Vue.use(TagTextarea)

Abra el archivo de entrada de configuración vue.config.js, modifique la entrada o el proyecto no se iniciará

module.exports = {
    
    
  // 将 examples 目录添加为新的页面
  pages: {
    
    
    index: {
    
    
      // page 的入口
      entry: 'examples/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  },
  productionSourceMap: false
}

Una vez que las pruebas estén completas, abra .npmignore. bloquear subidas innecesarias

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

Abra papkage.json para escribir la configuración

{
    
    
  "name": "wuyi-template", //包名
  "version": "0.1.2", //版本
  "description": "Personal component library of cy", //介绍
  "main": "lib/cy-virtual.umd.min.js", 入口文件
  "private": false, // 是否私人
  "license": "MIT", // 许可证
  "scripts": {
    
    
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name cy --dest lib packages/index.js" // 发布npm前打包命令
  }
}

Finalmente, si tiene una cuenta npm, inicie sesión con npm login, y luego cargue con npm Publish para usar su propio paquete normalmente.Si no tiene
una cuenta npm, registre una cuenta en el sitio web oficial de npm y luego realice las operaciones anteriores

Creación de biblioteca personal npm - biblioteca de componentes vue

Supongo que te gusta