Criação de biblioteca npm pessoal - biblioteca de componentes vue

É inevitável que haja vários componentes no trabalho, mas se você apenas copiar o código, é muito complicado salvar, então pensei em criar meu próprio pacote npm para encapsular as classes de componentes comumente usadas. Este artigo fala apenas sobre como criar rapidamente uma biblioteca no vue-cli3.0, e a criação nativa é reservada para o próximo artigo

Pré-requisito: Criar um projeto vue-cli3.0

1. Renomeie a pasta src para exemplos
2. Adicione uma nova pasta de pacotes no diretório raiz
3. Crie um novo arquivo .npmignore (necessário para carregar o npm)
4. Novo vue.config.js
   

Primeiro, escreva os componentes que precisamos salvar na pasta packages.
O catálogo detalhado é o seguinte:

O arquivo .vue em src é um componente próprio e não exibe mais
o arquivo index.js em textarea

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 em pacotes

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

A operação em pacotes é concluída e, em seguida, introduza a função de teste de componente em man.js em exemplos

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

Abra o arquivo de entrada de configuração vue.config.js, modifique a entrada ou o projeto não será iniciado

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

Após a conclusão dos testes, abra .npmignore. bloquear uploads desnecessários

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

Abra papckage.json para gravar a configuração

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

Por fim, se você tiver uma conta npm, faça login com npm login e, em seguida, carregue com npm publish para usar seu próprio pacote normalmente. Se você
não tiver uma conta npm, registre uma conta no site oficial do npm e execute as operações acima