v-easyui123

基于vue-cli3,参考element-ui封装的一个UI组件库

Usage no npm install needed!

<script type="module">
  import vEasyui123 from 'https://cdn.skypack.dev/v-easyui123';
</script>

README

基于 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