如果喜欢各位小哥哥小姐姐给个小星星鼓励一下哈， 请勿在生产环境中使用，供学习&交流~~
完整项目目录结构
git clone到本地安装依赖后，执行npm run serve进行本地组件库开发，npm run docs:dev进行组件库官网开发。一般在src/demo.vue进行单个组件测试通过后，再引入到.vuepress/components中放入组件库官网。
├─docs // vuepress开发目录
│ ├─.vuepress
│ │ ├─components // 在markdown中可以使用的vue组件
│ │ ├─dist // vuepress打包目录
│ │ │ ├─assets
│ │ │ │ ├─css
│ │ │ │ ├─img
│ │ │ │ └─js
│ │ │ ├─components
│ │ │ │ ├─basic
│ │ │ │ ├─form
│ │ │ │ ├─navigation
│ │ │ │ ├─notice
│ │ │ │ └─other
│ │ │ └─guide
│ │ │
│ │ ├─config.js // vurepess配置修改入口,包括左边sidebar,右上方nav导航菜单,favicon等
│ │ ├─style.style // 覆盖vuerpress默认主题样式
│ │ └─public //公共资源入口，如favicon
│ ├─static
│ │ ├─img
│ │ └─js
│ └─views // vuepress视图文件，格式是markdown
│ ├─components
│ │ ├─basic
│ │ ├─form
│ │ ├─navigation
│ │ ├─notice
│ │ └─other
│ ├─design
│ │ └─color
│ └─guide
├─src // 组件库源码目录
│ ├─button
│ ├─cascader
│ ├─collapse
│ ├─container
│ ├─datepicker
│ ├─form
│ ├─icon
│ ├─layout
│ ├─notice
│ ├─plugins
│ ├─slide
│ ├─tab
│ ├─step
│ ├─sticky
│ └─index.js // 组件库源码组件入口文件,执行npm run build的目标文件
├─package.json // 与npm发布相关，记录版本号，包入口文件地址
学习组件库制作会收获
学习组件封装技能，良好的接口设计, 掌握组件设计套路
夯实js/css基础
深入对vue的理解
制作流程
组件设计/开发
发布npm
制作官网展示
组件设计/开发
频繁涉及到的vue api包括
$children ： 获取当前组件子组件。
$parent： 获取当前组件父组件。
$options: 用于当前 Vue 实例的初始化选项, 可以用此选项获得组件的name。
$refs： 一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。
$el: Vue 实例使用的根 DOM 元素。
provide & inject ：这对选项需要一起使用，允许一个祖先组件向其所有子孙后代注入一个依赖,注意不是响应式的。注入的对象可以是个vue实例的eventBus。
$on： 组件监听自定义事件。
$emit： 组件触发自定义事件。
.sync：语法糖，单向数据流中，父组件监听到子组件修改props的意图后父组件修改传入的props，用了.sync不需要显式在父组件监听组件内部触发的自定义事件去修改值, 父组件只要写:x.sync="bindValue", 注意此时子组件触发的事件必须是"update:x"此语法糖才生效。
updated 生命周期钩子函数，由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子, 在父子组件通信可能用到。