公共组件主要解决了多个应用直接组件的公用问题。
这里使用npm构建我们的组件库。
最终目录
使用vue-cli 搭建一个项目
vue create pubilc-compenent
将生成的项目的src文件夹改成examples (组件示例)
新建vue配置文件,更改入口地址,确保改名后的examples能运行。
新建packages文件夹,存放我们的组件
编写第一个组件,参考element-ui结构
datePicker.vue
<template>
<div>这是一个datePicker组件</div>
</template>
<script>
export default {
name:'datePicker'
}
</script>
<style>
</style>
datePicker/index.js
import datePicker from './src/datePicker.vue'
datePicker.install = function(Vue){
Vue.component(datePicker.name,datePicker)
}
export default datePicker
packages/index.js
import datePicker from './datePicker'
const components = [
datePicker
]
const install = function(Vue){
components.forEach(component => {
Vue.component(component.name,component)
});
}
/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue);
}
export default {
install,
datePicker
}
配置vue.config.js
配置打包lib命令
package.json
使用lib(库模式)
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name datePicterqiu --dest lib packages/index.js"
},
配置包的一些信息
发布npm
注册npm账号 并验证邮箱
登录npm
npm login
输入对应的username、password、邮箱
###### 向npm推送
npm publish
结束。
这样我们就可以在其他应用像使用其他npm上的组件插件一样拉取我们的组件了