adomin-ui
v0.1.0
Published
* `npm run serve` 在examples文件夹下做本地开发和调试,采用`vue-cli`,`vue.config.js`中定义了入口文件`entry: 'examples/main.js'`。
Downloads
3
Readme
本地开发和调试
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.jsnpm 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出