基于 vue-cli4,参考 element-ui 封装的一个 UI 组件库
v-easyui123组件使用:
安装:
cnpm i v-easyui123 --save
cnpm install babel-plugin-import --save-dev
配置见babel.config.js文件
使用组件:
全部加载:
import HmUI from 'v-easyui123'
Vue.use(HmUI)
按需加载
import { Switch } from "v-easyui123";
Vue.use(Switch);
编写组件涉及知识点:
1.vue基础语法
2.组件基本语法
3.组件通讯(sync,provide,inject)
4.插槽使用
5.props校验
6.过渡与动画处理
7.计算属性与监听属性
8.v-model语法糖
9.vue插件机制
10.npm发布
按需加载:
babel-plugin-component
babel-plugin-import
https://www.jianshu.com/p/87efabb6a333
{ "libraryName": "antd", style: "css" }
import { Button } from 'antd';
ReactDOM.render();
var _button = require('antd/lib/button');
require('antd/lib/button/style/css');
ReactDOM.render(<_button>xxxx);
打包发布package.json:
"build": "vue-cli-service build"
"lib":"vue-cli-service build --target lib packages/index.js"
参考文档:
vue-cli3.0/4.0
https://www.mk2048.com/blog/blog_hjb00j1a01cbb.html
https://www.jb51.net/article/186015.htm
vue-cli2.0
https://zhuanlan.zhihu.com/p/30948290
https://www.jb51.net/article/166455.htm
https://www.cnblogs.com/fan-zha/p/10917675.html
细节:
1.$slots.default 控制slot显示与隐藏 子组件改变值:
2.sync 使用
语法糖:
子组件:
this.$emit('update:myMessage',params);
3.v-model 父组件
语法糖:
子组件:
props值必须为value props: { value: { type: Number, default: 100 }
this.$emit('input', zoom) //事件名必须为input