Création d'une bibliothèque personnelle npm - bibliothèque de composants vue

Il est inévitable qu'il y ait plusieurs composants dans le travail, mais si vous copiez simplement le code, il est trop lourd à enregistrer, alors j'ai pensé à créer mon propre package npm pour encapsuler les classes de composants couramment utilisées. Cet article ne parle que de comment créer rapidement une bibliothèque sous vue-cli3.0, et la création native est laissée au prochain article

Prérequis : Créer un projet vue-cli3.0

1. Renommez le dossier src en exemples
2. Ajouter un nouveau dossier de packages dans le répertoire racine
3. Créer un nouveau fichier .npmignore (requis pour télécharger npm)
4. Nouveau vue.config.js
   

Tout d'abord, écrivez les composants que nous devons enregistrer dans le dossier packages.
Le catalogue détaillé est le suivant :

Le fichier .vue dans src est son propre composant et n'affiche plus
le fichier index.js sous 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 sous packages

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

L'opération dans les packages est terminée, puis introduisez la fonction de test de composant dans man.js sous les exemples

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

Ouvrez le fichier d'entrée de configuration vue.config.js, modifiez l'entrée ou le projet ne démarrera pas

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

Une fois les tests terminés, ouvrez .npmignore. bloquer les téléchargements inutiles

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

Ouvrez papckage.json pour écrire la configuration

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

Enfin, si vous avez un compte npm, connectez-vous avec npm login, puis téléchargez avec npm publier pour utiliser votre propre package normalement. Si vous
n'avez pas de compte npm, enregistrez un compte sur le site officiel npm , puis effectuez les opérations ci-dessus