文章目录
- 一、写组件
- 1、注册全局组件方法
- 2、组件1
- 3、组件2
- 二、测试
- 三、发布
- 1、配置package.json
- 2、生成库包
- 3、配置发布信息
- 4、发布
- 四、使用
- 1、安装
- 2、使用
一、写组件
1、注册全局组件方法
plugins/index.js
const requireComponent = require.context('./', true, /\.vue$/)
const install = (Vue) => {
if (install.installed) return
install.installed
requireComponent.keys().forEach(element => {
const config = requireComponent(element)
if (config && config.default.name) {
const componentName = config.default.name
Vue.component(componentName, config.default || config)
}
});
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install
}
2、组件1
plugins/msg/index.vue
<template>
<div>
vue-msg
</div>
</template>
<script>
export default {
name: "vue-msg",
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
<style scoped></style>
3、组件2
plugins/button/index.vue
<template>
<div>
<button @click="onStart">点击</button>
</div>
</template>
<script>
export default {
name: "vue-button",
data() {
return {
};
},
methods: {
onStart() {
console.log("测试");
},
},
mounted() {
},
};
</script>
<style scoped></style>
二、测试
main.js
import install from './plugins'
Vue.use(install)
app.vue
<template>
<div>
<vue-msg></vue-msg>
<vue-button></vue-button>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
<style scoped></style>
三、发布
1、配置package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib --name zouComponent --dest zouComponent/lib src/plugins/index.js",
},
2、生成库包
npm run lib
这是生成的zouComponent文件夹。
3、配置发布信息
在zouComponent文件夹里面创建package.json文件
配置发布信息
{
"name": "zou-component",
"version": "0.1.2",
"private": false,
"license": "MIT",
"description": "今天我发布一个zouComponent组件库",
"main": "lib/zouComponent.umd.min.js",
"scripts": {
},
"dependencies": {
},
"devDependencies": {
}
}
4、发布
配置npm源
npm set registry http://localhost:4873/
在zouComponent文件夹里面执行发布命令
npm publish
或者
npm publish --registry http://localhost:4873
四、使用
1、安装
npm install zouComponent
2、使用
main.js
import zouComponent from 'zou-component'
Vue.use(zouComponent)
app.vue
<template>
<div>
<vue-msg></vue-msg>
<vue-button></vue-button>
</div>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
},
mounted() {
},
};
</script>
<style scoped></style>
