vue组件库开发（npm包发布）

公共组件主要解决了多个应用直接组件的公用问题。
这里使用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上的组件插件一样拉取我们的组件了