vue封装组件库并上传到npm

最新推荐文章于 2024-11-25 11:09:50 发布

原创最新推荐文章于 2024-11-25 11:09:50 发布 · 589 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #node.js

本文详细介绍了如何将Vue项目的重复组件封装成独立的组件库，并发布到npm，以便于在多个项目中复用。通过创建新项目、调整目录结构、编写组件和安装方法、配置webpack、更新package.json以及执行发布命令，实现了一次编写，到处使用的高效开发模式。

最近公司的几个项目中，经常会出现重复的组件，一开始还好，但是项目多起来以后，每一次改动，都要在不同项目中更改一次，很麻烦也容易出错，所以自己就花时间研究了一下封装组件库上传到npm。这样每次只需要改这个组件库，然后在不同的项目中，通过npm uppdate xxx即可。下面是具体的步骤

1.创建一个项目

vue create mylib

2.把项目中现有的src包名改成example,然后新增两个目录，一个是packages，用于存放组件，一个是src, 用于写index.js文件。项目结构。

在这里插入图片描述

3.packages的里面新建一个colortext文件，在里面新建一个index.js，在同级再建一个src文件，里面写ColorText.vue。具体层级如下：

在这里插入图片描述

4.ColorText.vue

<!-- color-button.vue -->
<template>
	<span :style="{'color': color}">{{text}}</span>
</template>

<script>
	export default {
		name: 'ColorText',
		props: {
			color: {
				type: String,
				default: '#999999'
			},
			text: {
				type: String,
				default: ''
			}
		},

	}
</script>

<style>

</style>

5.colortext的index.js

// 导入组件，组件必须声明 name
import ColorText from './src/ColorText.vue'

// 为组件提供 install 安装方法，供按需引入
ColorText.install = function (Vue) {
  Vue.component(ColorText.name, ColorText)
}

// 默认导出组件
export default ColorText

6.根目录下src文件里的index.js

//第三方库
import Vue from 'vue'
import Element from 'element-ui'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/css/swiper.css'
import 'element-ui/lib/theme-chalk/index.css';
//自己的组件
import xxx from '../packages/xxx/index.js'
import xxx from '../packages/xxx/index.js'
import xxx from '../packages/xxx/index.js'
import xxx from '../packages/xxx/index.js'
import ColorText from '../packages/colortext/index.js'

// 存储组件列表
const components = [
	ColorText,
	xxx,
	xxx,
	xxx,
	xxx
]
Vue.use(Element)
Vue.use(VueAwesomeSwiper)
/* 
  定义install 方法，接收Vue作为参数，如果使用use注册插件，则所有的组件都将被注册
*/
const install = function(Vue) {
	// 判断是否安装
	if (install.installed) {
		return
	}
	// 遍历所有组件
	components.map(item => {
		Vue.component(item.name, item)
	})

}
// 判断是否引入文件
if (typeof window !== 'undefined' && window.Vue) {
	install(window.Vue)
}
export default {
	install,
	...components
};

7. vueconfig.js

module.exports = {
  // 修改 src 目录 为 examples 目录
  pages: {
    index: {
      // page 的入口
      entry: 'examples/main.js',   // 把src 修改为examples
      // 模板来源
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html'
    }
  },
  // 扩展 webpack 配置，使 packages 加入编译
  /* chainWebpack 是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。 */
  chainWebpack: config => {
    config.module
      .rule('js')
      .include
        .add(__dirname + 'packages')  // 注意这里需要绝对路径，所有要拼接__dirname
        .end()
      .use('babel')
        .loader('babel-loader')
        .tap(options => {
          // 修改它的选项...
          return options
        })
  }
}

8.package.json

{
	"name": "xxx",
	"version": "1.1.3",
	"description": "this is my lib",
	"main": "lib/xxx.umd.min.js",
	"private": false,
	"scripts": {
		"lib": "vue-cli-service build --target lib --name xxx --dest lib src/index.js",
		"serve": "vue-cli-service serve",
		"build": "vue-cli-service build",
		"lint": "vue-cli-service lint"
	},
	"dependencies": {
		"axios": "^0.21.1",
		"core-js": "^3.6.5",
		"element-ui": "^2.15.5",
		"swiper": "^5.4.5",
		"vue": "^2.6.11",
		"vue-awesome-swiper": "^4.1.1",
		"vue-router": "^3.2.0"
		
	},
	"devDependencies": {
		"@vue/cli-plugin-babel": "~4.5.0",
		"@vue/cli-plugin-eslint": "~4.5.0",
		"@vue/cli-plugin-router": "~4.5.0",
		"@vue/cli-plugin-vuex": "~4.5.0",
		"@vue/cli-service": "~4.5.0",
		"babel-eslint": "^10.1.0",
		"eslint": "^6.7.2",
		"eslint-plugin-vue": "^6.2.2",
		"vue-template-compiler": "^2.6.11"
	},
	"eslintConfig": {
		"root": true,
		"env": {
			"node": true
		},
		"extends": [
			"plugin:vue/essential",
			"eslint:recommended"
		],
		"parserOptions": {
			"parser": "babel-eslint"
		},
		"rules": {}
	},
	"browserslist": [
		"> 1%",
		"last 2 versions",
		"not dead"
	]
}