首先我们在本地项目例如kbviewui 目录下执行 命令：
vue create .
#输入项目的名称 和 文件夹名一致，
#选择支持babel 方式
#选择的vue 版本为 2
创建好的vue项目工程目录 如下：
.git
node_module
src
public
babel.config.js
package.js
此时这个项目是一个 vue -cli 的项目，src 是项目源代码，比较常规的 vue项目结构。
因为我们是要开发一个组件包，供其他项目使用，所以改动一下项目的配置和结构；
在kbviewui目录下 新建 packages 目录，修改src目录为example 名目录。
在项目根目录 下创建 vue.config.js文件，内容如下：
const path = require('path')
function resolve (dir) {
return path.join(__dirname, '..', dir)
}
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
chainWebpack: config => {
config.module
.rule('js')
.include
.add( resolve('packages'))
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
return options
})
}
}第四步骤，在packages 目录 创建 组件文件：
packages
components
src
kbdatePicker.js
kbdatePicker.vue
index.js
index.js
下面来组织 代码:
src/kbdatePicker.vue
<template>
<div>
<p>这是一个头部导航组件,你可修改更多的组件方式，不一定就是理由。</p>
</div>
</template>
<script>
export default ({
name: 'kbdatePicker'
})
</script>src/kbdatePicker.js的代码：
import kbdatePicker from "./datePicker.vue";
export default kbdatePicker
components/index.js 的代码：
import kbdatePicker from './src/datePicker.js';
export {
kbdatePicker
}packages/index.js 的代码：
import * as kbComponents from './components/index'
function install(Vue) {
Object.values(kbComponents).forEach((component) => {
Vue.component(component.name, component)
})
}
if( typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
install,
...kbComponents
}这样一个完整的 kbdatePicker 组件就能被应用到其他项目里面了。
测试一下：
在example/main.js 里面引入组件
import Vue from 'vue'
import App from './App.vue'
import kbviewui from './../packages/index'
Vue.use(kbviewui)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')然后运行 npm run serve
测试一下页面 看是否正常运行，正常即可表示我们搭建的组件库可以被第三方项目引入。
现在在本地有另外一个项目。需要用到 kbviewui 组件。
按道理，我们需要把kbviewui组件 发布到npm的 官网上才能通过npm install 安装。
在开发阶段，代码需要经常修改，所以，我们希望再本地直接应用 组件库。
通过 在组件库 kbviewui 目录下执行：
npm link
#创建一个软连接 到 npm的默认 node_module 目录
在需要用到组件库的项目 里执行：
npm link kbviewui
#把kbviewui 添加到 了项目的 node_module目录。
通过这样之后，我们在项目的 main.js 文件加入
import kbviewui from 'kbviewui/packages/index'
Vue.use(kbviewui)
即可 在项目 的任何 vue 文件里面，直接使用 我们创建的 组件了:
例如
<kbdatePicker></kbdatePicker>
好了，本文内容全部结束，感谢你的阅读，希望对你有所帮助。
