Создание личной библиотеки npm - библиотека компонентов vue

Неизбежно, что в работе будет несколько компонентов, но если вы просто скопируете код, его будет слишком громоздко сохранять, поэтому я подумал о создании собственного пакета npm для инкапсуляции часто используемых классов компонентов. В этой статье рассказывается только о том, как быстро создать библиотеку под vue-cli3.0, а нативное создание оставим на следующую статью

Предварительное условие: создать проект vue-cli3.0.

Переименуйте папку src в examples
Добавьте новую папку пакетов в корневой каталог
Создайте новый файл .npmignore (необходим для загрузки npm)
Новый vue.config.js

Во-первых, напишите компоненты, которые нам нужно сохранить в папке пакетов.Подробный
каталог выглядит следующим образом:
вставьте сюда описание изображения
Файл .vue в src является собственным компонентом и больше не отображает
файл index.js в текстовой области.

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 в пакетах

// 导入整合组件
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
}

Работа в пакетах завершена, а затем введите функцию проверки компонента в man.js по примерам

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

Откройте файл записи конфигурации vue.config.js, измените запись, иначе проект не запустится.

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

После завершения тестов откройте .npmignore. блокировать ненужные загрузки

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

Откройте papckage.json для записи конфигурации

{
    
    
  "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前打包命令
  }
}

Наконец, если у вас есть учетная запись npm, войдите в систему с логином npm, а затем загрузите с npm publish, чтобы использовать свой собственный пакет в обычном режиме.Если у вас
нет учетной записи npm, зарегистрируйте учетную запись на официальном сайте npm , а затем выполните вышеуказанные операции.

Создание личной библиотеки npm - библиотека компонентов vue

рекомендация