将自己写的组件放入npm仓库使用

前言

　　有时候我们经常封装一些通用的组件在项目当中，而这些组件可能会在多个项目中使用，以往的做法是直接粘贴复制过来，但其实放入npm仓库会更方便，这里介绍的是公开的npm包下载，私有的也可以点击这里 配置私有源。

 

第一步：配置组件入口 src/components/index.js

import CatAnimation from "./CatAnimation"

const Components = {
  CatAnimation
}; // 将来如果有其它组件,都可以写到这个数组里
// 批量组件注册
function install(app) {
  Object.keys(Components).forEach( v => {
    app.component(v, Components[v])
  })
}
console.log(Components,'Components');
export default install

　　

 

 

 

第二步：在package.json中设置配置基本信息

"name": "zengxudong-web-component",
  "version": "0.1.0",
  "private": false,
  "author": "zengxudong",
  "description": "PC端组件",
  "main": "./dist/zengxudong-web-component.common.js",
  "files": [
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ],
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "npm run build:component",
    "lint": "vue-cli-service lint",
    "build:component": "vue-cli-service build --target lib --name zengxudong-web-component ./src/components/index.js"
  },

　　

第三步：npm run build 打包

 

第四步：npm publish --access public 发布npm上

 

第五步：查看自己发布的包版本和相关信息

　　npm view zengxudong-web-component versions  查看版本

　　npm info zengxudong-web-component   查看信息

 

 

 

　　 也可以直接到npm官网查看自己上传的包，网址：https://www.npmjs.com/settings/tom-and-jerry/packages

 

 

 

 

 

 

第六步：当成UI库导入到需要的项目中

　　1. npm install zengxudong-web-component  这个是我写的demo，公开的，大家应该都能下载到
　　2. 在main.js中全局导入

import { createApp } from 'vue'
import App from './App.vue'
import install from 'zengxudong-web-component';
import 'zengxudong-web-component/dist/zengxudong-web-component.css'

createApp(App).use(install).mount('#app')

　　

　　3. 在需要的地方使用自己定义的组件即可，因为已经全局引入过了，所以这里无需再次引入，当然自己也可以改成按需引入的方式

 

　　 效果图：