最近公司的几个项目中,经常会出现重复的组件,一开始还好,但是项目多起来以后,每一次改动,都要在不同项目中更改一次,很麻烦也容易出错,所以自己就花时间研究了一下封装组件库上传到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"
]
}
只需要把xxx换成你组件的名称就可以了。我的组件中也用到了一些第三方库比如axios,element-ui等,不是必须的,也可以不引入。