Creation of personal npm library - vue component library

It is inevitable that there are multiple components in the work, but if you just copy the code, it is too cumbersome to save, so I thought of creating my own npm package to encapsulate commonly used component classes. This article only talks about how to quickly create a library under vue-cli3.0, and the native creation is reserved for the next article

Prerequisite: Create a vue-cli3.0 project

Rename the src folder to examples
Add a new packages folder in the root directory
Create a new .npmignore file (required to upload npm)
New vue.config.js

First, write the components we need to save in the packages folder.
The detailed catalog is as follows:
insert image description here
The .vue file in src is its own component and no longer displays
the index.js file under 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 under 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
}

The operation in packages is completed, and then introduce the component test function in man.js under examples

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

Open the vue.config.js configuration entry file, modify the entry or the project will not start

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

Once the tests are complete, open .npmignore. block unnecessary uploads

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

Open papckage.json to write 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前打包命令
  }
}

Finally, if you have an npm account, log in with npm login, and then upload with npm publish to use your own package normally. If you
don’t have an npm account, register an account on the npm official website, and then perform the above operations

Creation of personal npm library - vue component library

Guess you like