adomin-ui v0.1.0

本地开发和调试

• npm run serve 在examples文件夹下做本地开发和调试，采用vue-cli，vue.config.js中定义了入口文件entry: 'examples/main.js'。

打包成库

• npm run lib打包成库，生成myLib/adomin-ui.umd.min myLib/adomin-ui.css等文件。
• npm run lib后运行vue-cli-service build --target lib --dest myLib packages/index.js，定义了打包的入口文件是packages/index.js
• npm publish将myLib/adomin-ui.umd.min myLib/adomin-ui.css等文件上传到npm

使用库

• npm i adomin-ui安装库
• 代码引入

// adomin-ui的package.json中"main": "myLib/adomin-ui.umd.min"，入口文件是库的myLib/adomin-ui.umd.min文件
import AdominUI from 'adomin-ui'
// 引入css
import 'adomin-ui/myLib/adomin-ui.css'
Vue.use(AdominUI)

封装组件用到的知识点

• vue-cli，webpack打包
• css样式
• 单项数据流，props父传子、子组件$emit数据到父组件
• slot、具名slot
• 双向绑定，v-model语法糖，v-model="xxx"等同于:value="xxx" @input="this.xxx=value"
• sync语法糖，:visible.sync等同于:visible="visible" @update:visible="visible=false"，在子组件中this.$emit('update:visible', false)
• provide、inject，在祖先组件中provide this，子孙组件(任意层级)中通过inject拿到
• vue插件机制，Vue.use(xxx)规定了必须定义install方法然后export出