自定义vue的UI组件库

学完vue使用了element-ui 有没有想自己封装一个ui库 不求多好看，只求学习一个技能或者一个知识点，那我可以帮到你，如果你喜欢请点个赞再走吧。
小提示 千万别在props子组件里面直接改父组件的值 需要data过渡赋值一下
分几步
第一步是注册npm账号 这个自行搜索
第二步是自己封装一个组件

这张图

是一个ui组件库基本的结构
publishedliu 是组件库的名字 这个名字的文件夹下面
包含一个src 一个package.json文件

这是用来解释main执行index.js发生了什么 看到这可能迷糊别急 这是解释json里面的main键值对的意思

import Button from 'publishedliu'
Vue.use(Button)//Button其实是导出了install与Button是组件Checkbox也是
执行use的时候 其实是把所有的外部组件全部定义为全局组件 通过install方法

index.js文件

import Button from './components/button/index';
import Checkbox from './components/Checkbox/index';
const components = [
  Button,
  Checkbox,
];
const install = function(Vue, opts = {}) {//vue插件的用法install
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};//install是默认方式与vue.use()结合
export default {
 install
};

{
  "name": "publishedliu",//包的名字
  "version": "1.0.0",//版本 可以 自行修改
  "description": "组件库",//上传成功之后npm库里的提示
  "author": "liuyong-byte <[email protected]>",//是你创建npm账号的邮箱
  "private": false,//这个一定改成false 用于上传npm的时候
  "main": "./src/index.js",//是执行文件夹
  "files": [//上传组件库必须要的文件
    "src/components/*",//上传这个文件夹下面所有文件
    "src/index.js"//导出ui库的时候执行文件 个人觉得这个月理解容易一些
  ],
  "__npminstall_done": "Wed May 27 2020 10:54:02 GMT+0800 (GMT+08:00)",
  "_from": "[email protected]",
  "_resolved": "https://registry.npm.taobao.org/publishedliu/download/publishedliu-1.0.0.tgz"
}

这个是帮助你切换npm镜像与cnpm淘宝使用的

1.设置使用淘宝cnpm

npm config set registry https://registry.npm.taobao.org
2.查看是否配置成功，成功后即可直接使用cnpm命令

npm config get registry
3.还原npm仓库

npm config set registry https://registry.npmjs.org

组件封装 比如上面的Button组件
插槽的那一期https://blog.csdn.net/qq_43505774/article/details/106303148

<template>
    <button class="L-but" :style="{color:this.fColor,backgroundColor:this.bgColor}" @click="click">
        <slot>按钮</slot>//默认插槽 父组件分发子组件
    </button>
</template>

<script>
export default {
    name:"Button",//这个很重要 很重要 是上面的component.name的参数
    //当你导入组件库之后输入的Button组件 它就会找到这个name进行加载 个人理解
    props:{//这个是父组件传参个子组件
        bgColor:{
            type:String,
            value:"skyblue"
        },
        fColor:{
            type:String,
            value:"white"
        }
        
    },
    data() {
        return {
            
        }
    },
    methods:{
        click:function(e){//这个是子组件与父组件通信
        //通信有很多种 attr libar vue.$emit props options slot vuex provide inject等等
            this.$emit('click自定义随便都可以',e)//当点击子组件的时候 父组件通过click方法获取值 @父组件方法 与click 同名就ok
        }
    }
}
</script>

<style scoped>//这是style作用域 当然了你也可以使用less sass 或者src连接
.L-but{
    border: 1px solid white;
}
</style>

现在是上传组件
在登录之前需要切换为npm 源 而不是淘宝cnpm
npm login 登录
输入username password email
然后没有报错 就npm publish
可能会报错 json文件的name名字冲突
如果需要跟换版本号 直接可以在json里面修改 就ok 也可以命令自行搜索
我认为直接修改方便一点

当上传成功 需要等几分钟 cnpm才会映射到 所以先用npm下载
npm install 包名

当你导入ui组件库的时候 它会自动加载执行src 下面的index文件
把组件库导出来
然后vue.use成为全局组件
就 ok了

Button 里面的index.js文件内容 也很重要

import Button from './button.vue';

/* istanbul ignore next */
// Button.install = function(Vue) {
//   Vue.component(Button.name, Button);
// }; 这个你如果重复写在每一个组件index.js里面 那你没必要
//在src的index里面install循环了

export default Button;