现在vue的UI框架已经很丰富了，为什么还要封装一套自己的UI框架呢？
vue的UI框架已经有很多（ElementUI，iView 等等），而且组件都很丰富，大体上可以满足我们的需求，不用重复造轮子，但是需求是不定的，在项目中有时候仅凭这些也实现不了，这时我们需要封装自己的组件或者对一些已经存在的组件进行二次封装。
接下来我们就来看看如何自定义自己的组件并使用
一：创建项目
# 创建目录
mkdir tanrj-ui
# cd到目录中
cd tanri-ui
# 初始化项目
vue create .

如下图为项目结构



二：调整项目目录
|-- 重命名src为examples（参考ElementUI），用于测试组件
|-- 新建packages，定义上传的组件库
|-- 新建vue.config.js

调整之后的项目结构



编写vue.config.js
const path = require('path')
const { config } = require('process')

const resolve = dir => path.join(__dirname, dir)

module.exports = {
  pages: {
    index: {
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  },

  chainWebpack: config => {
    config.module
    .rule('js')
    .include
      .add(resolve('packages'))
      .end()
    .use('babel')
      .loader('babel-loader')
      .tap(option => {
        return option
      })
  }
}

三：定义组件
在packages下新建组件（如图）



文件路径：tanrj-ui\packages\date-picker\src\date-picker.vue
<template>
  <div>这是一个datePicker组件</div>
</template>

<script>
export default {
  name: 'datePicker',
};
</script>

<style lang="scss">

</style>

文件路径：tanrj-ui\packages\date-picker\index.js
import datePicker from './src/date-picker.vue'

datePicker.install = function(Vue) {
  Vue.component(datePicker.name, datePicker)
}

export default datePicker


theme-color组件同上

四：注册组件
import datePicker from './date-picker/index'
import themeColor from './theme-color/index'

const components = [
  datePicker,
  themeColor
]

const install = function(Vue) {
  components.forEach(component => {
    Vue.component(component.name, component)
  })
}

if(typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export {
  install,
  datePicker,
  themeColor
}

五：本地测试
我们可以在main.js中全局注册，也可以在页面中直接引入

文件路径：tanrj-ui\examples\main.js
import Vue from 'vue'
import App from './App.vue'

import { datePicker, themeColor } from '../packages/index'

Vue.use(datePicker)
Vue.use(themeColor)
// 或者
// Vue.component(datePicker.name, datePicker)
// Vue.component(themeColor.name, themeColor)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

接着在页面中使用上即可

文件路径：tanrj-ui\examples\App.vue
<template>
  <div id="app">
    <datePicker/>
    <themeColor/>
  </div>
</template>

<script>

export default {
  name: 'App'
}
</script>

<style>

</style>

运行看效果：


六：打包文件
本地测试没问题之后，接着就是上传到npm中

在package.json文件中脚本添加
"script": {
    "build-lib": "vue-cli-service build --target lib --name tanrj-ui --dest lib packages/index.js",
}

执行命令
npm run build-lib


注意：每次定义好组件或添加了新的组件之后都需要上传

此时我们看看项目结构

七：发布到npm

修改packages.json中配置

"private": false,
"main": "lib/tanrj-ui.umd.min.js",
// 可自行决定是否修改
"version": "0.1.3",
"keywords": ["tanrj", "tanrj-ui"],


根目录下添加.npmignore文件

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map


发布npm

# 设置为默认的官方镜像
npm config set registry https://registry.npmjs.org/
# 登录（未注册去npm.js.com或者通过npm adduser注册一个账户）
npm login
# 发布
npm publish

之后我们便可在npm官方网站看到

之前一直在使用 Element UI ，不得不说饿了么团队真的很厉害，人总是有好奇心的，想着自己什么时候也试着做一套自己的组件库，刚好团队需要一套简单的组件库，就做了一些尝试。原本不好意思拿出来讲，想着自己无非是把别人写了一万遍的东西，我又写了第一万零一遍，后来朋友劝我说，别人有时候并不是看你做的东西有多好，只是想看你有没有这方面的经验，后来想想，说的在理，那就把自己的半吊子东西和大家分享一下吧。
前言
在使用 Vue CLI 初始化项目时，我使用的是 webpack 模板，在开发组件库的时候，如何打包是个很重要的问题，因为要满足按需加载和开发预览的需求。 开发预览的问题比较容易解决，将原本的 webpack 开发环境下的配置修改一下entry就可以解决，按需加载则比较麻烦，需要把每一个开发的组件单独打包，我的思路是将webpack 配置为多入口、多出口就ok了。 剩下的问题就是开发组件中遇到的具体问题和将整个组件库打包用于全引入了，后面一一分享。
基础配置
初始化项目：
# 2.x 版本
# 全局安装 vue-cli 工具
npm install -g vue-cli
# 初始化项目
vue init webpack MyComponent
之前，我一直使用的是vue-cli(2.x) 现在已经是3.x，初始化项目会和2.x有一些不同。
# 3.x 版本
# 全局安装 vue-cli 工具
npm install -g @vue/cli
npm install -g @vue/cli-init
# 初始化项目
vue init webpack MyComponent
为了开发时预览，我将src改为example用来写开发样例，测试组件效果，然后再新建一个src文件夹，修改后的目录结构：
这个时候，再修改build文件夹下webpack.base.conf.js，只需要修改 webpack 配置中的entry就好了，这个文件中的信息是作为 webpack 打包的默认配置存在的，后面按照自己需要覆盖这个文件的配置信息就好了。
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  }
  // ...
}
​
// 修改后
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './example/main.js'
  }
  // ...
}
这个时候运行npm run dev命令就可以预览效果了，会看到经典的 Welcome to Your Vue.js App。
开发组件
在新建的src文件夹中新建index.js，这个会在后面的全引入中用到，接着新建一个components文件夹用来存放所有组件，我们先创建一个MyButton组件，文件目录如下：
其中，my-button里的index.js是为后面按需加载准备的。
main.vue内容：
 <!--main.vue-->
<template>
  <button class="my-button"
          :class="['my-button-size-'+size]"
          @click="handleClick">
    <slot></slot>
  </button>
</template>
​
<script>
export default {
  name: 'MyButton',
  props: {
    // size 属性是用来控制按钮的大小样式，通过不同 size 设置不同的类名
    size: {
      type: String,
      default: 'big'
    }
  },
  methods: {
    /**
     * 用于触发 my-button 实例上的 click 事件
     */
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>
​
<style scoped>
  /* 初始化 button 的样式 */
  .my-button {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    color: #000;
    text-align: center;
    outline: none;
    font-size: 14px;
    border-radius: 4px;
  }
​
  /* button big 的样式 */
  .my-button.my-button-size-big {
    padding: 12px 20px;
  }
​
  /* button mid 的样式 */
  .my-button.my-button-size-mid {
    padding: 10px 20px;
  }
​
  /* button small 的样式 */
  .my-button.my-button-size-small {
    padding: 10px 10px;
  }
</style>
​
my-button中的index.js内容，其实如果组件库只是需要满足全引入，这个index.js完全可以省略掉，后面按需引入会对这个文件做一些修改：
'use strict'
// my-button 中的 index.js
import main from './src/main'
​
export default main
src中的index.js内容：
'use strict'
// src 中的 index.js
import MyButton from './components/my-button'
​
const components = [
  MyButton
]
​
// 官方原文：Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
const install = function (Vue) {
  components.forEach(component => {
    // Vue.component：注册或获取全局组件
    Vue.component(component.name, component)
  })
}
​
// 在全局引入组件库时，使用 Vue.use 安装插件，必须提供 install 方法，这里 export default 就是用于 Vue.use
export default {
  install
}
这时再修改example文件夹中的文件用于预览效果，修改后的目录结构：
主要的修改是引入组件，添加路由信息，写组件的 demo。
main.js中添加两行代码全局引入开发的组件：
// ...
// 引入开发的组件库，
import MyComponent from '../src'
​
// 使用 Vue.use 安装开发的组件库
Vue.use(MyComponent)
// ...
这样可以在example自由使用MyButton了。
<template>
  <div class="example-button">
    <my-button @click="clickFunc">
      这是一个按钮
    </my-button>
    <my-button size="mid" @click="clickFunc">
      这是一个按钮
    </my-button>
    <my-button size="small" @click="clickFunc">
      这是一个按钮
    </my-button>
  </div>
</template>
​
<script>
export default {
  name: 'example-button',
  methods: {
    clickFunc () {
      alert('Click')
    }
  }
}
</script>
​
<style scoped>
​
</style>
效果预览：
这是一个非常简单的组件，许多地方没有做，比如：按钮的hover效果，active效果……距离一个成熟的组件还有很大的距离，不过大致思路是这样了，后面可以按照自己的需要添加其他的东西。
Webpack 打包用于全引入
做完以上的工作的确是开发了一个只有一个组件的组件库，这时候需要将组件库打包，先将组件库打包在一个新的目录dist中。
先附上一个连接：webpack 打包 JavaScript library
Webpack 的配置比较复杂，我的大致思路是将原本的entry.js改为src中的index.js，按照 Webpack 打包 Library 的规范修改必要配置就可以了。
用于打包组件库在build文件夹下的webpack.build.conf.js：
// ...
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
​
baseWebpackConfig.entry = {}
​
const webpackConfig = merge(baseWebpackConfig, {
  // ...
  devtool: config.publish.productionSourceMap ? '#source-map' : false,
  entry: {
    myComponent: './src/index.js'
  },
  output: {
    path: config.publish.distRoot + '/dist',
    filename: 'index.js',
    publicPath: config.publish.assetsPublicPath,
    library: 'my-component',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
  // ...
})
​
// ...
每一个配置的用途都可以在 Webpack 官网上找到，就不多说了，附上连接：Webpack 配置
最容易被忽略的是build文件夹下，utils.js会因process.env.NODE_ENV环境变量不同，为 Webpack 各个 loader 生成的路径不同。
最后再修改一下package.json：
{
    // ...
    "private": false,
    "main": "dist/index.js",
    "scripts": {
        // ...
        "build:my-component": "node build/publish.js"
        // ...
    }
}
遮样一个非常小的组件库就完成了，目前只写了全引入的部分，后面会把按需引入的部分加上。
最后贴上github的地址：MyComponent，细节的地方可以看源代码，之前做的组件库因为不是个人成果，里面也有设计同事的工作成果，还是不拿出来给自己贴金了，哈哈哈~
距离一个成熟的组件库还差得非常非常远，不过有这样的经历看起别人成熟的组件库的源代码时会更轻车熟路，希望对大家有帮助~

学完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 <1256230450@qq.com>",//是你创建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": "publishedliu@1.0.0",
  "_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;

之前一直在使用 Element UI ，不得不说饿了么团队真的很厉害，人总是有好奇心的，想着自己什么时候也试着做一套自己的组件库，刚好团队需要一套简单的组件库，就做了一些尝试。原本不好意思拿出来讲，想着自己无非是把别人写了一万遍的东西，我又写了第一万零一遍，后来朋友劝我说，别人有时候并不是看你做的东西有多好，只是想看你有没有这方面的经验，后来想想，说的在理，那就把自己的半吊子东西和大家分享一下吧。
前言
在使用 Vue CLI 初始化项目时，我使用的是 webpack 模板，在开发组件库的时候，如何打包是个很重要的问题，因为要满足按需加载和开发预览的需求。 开发预览的问题比较容易解决，将原本的 webpack 开发环境下的配置修改一下entry就可以解决，按需加载则比较麻烦，需要把每一个开发的组件单独打包，我的思路是将webpack 配置为多入口、多出口就ok了。 剩下的问题就是开发组件中遇到的具体问题和将整个组件库打包用于全引入了，后面一一分享。
基础配置
初始化项目：
# 2.x 版本
# 全局安装 vue-cli 工具
npm install -g vue-cli
# 初始化项目
vue init webpack MyComponent
之前，我一直使用的是vue-cli(2.x) 现在已经是3.x，初始化项目会和2.x有一些不同。
# 3.x 版本
# 全局安装 vue-cli 工具
npm install -g @vue/cli
npm install -g @vue/cli-init
# 初始化项目
vue init webpack MyComponent
为了开发时预览，我将src改为example用来写开发样例，测试组件效果，然后再新建一个src文件夹，修改后的目录结构：
这个时候，再修改build文件夹下webpack.base.conf.js，只需要修改 webpack 配置中的entry就好了，这个文件中的信息是作为 webpack 打包的默认配置存在的，后面按照自己需要覆盖这个文件的配置信息就好了。
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  }
  // ...
}
​
// 修改后
module.exports = {
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './example/main.js'
  }
  // ...
}
这个时候运行npm run dev命令就可以预览效果了，会看到经典的 Welcome to Your Vue.js App。
开发组件
在新建的src文件夹中新建index.js，这个会在后面的全引入中用到，接着新建一个components文件夹用来存放所有组件，我们先创建一个MyButton组件，文件目录如下：
其中，my-button里的index.js是为后面按需加载准备的。
main.vue内容：
 <!--main.vue-->
<template>
  <button class="my-button"
          :class="['my-button-size-'+size]"
          @click="handleClick">
    <slot></slot>
  </button>
</template>
​
<script>
export default {
  name: 'MyButton',
  props: {
    // size 属性是用来控制按钮的大小样式，通过不同 size 设置不同的类名
    size: {
      type: String,
      default: 'big'
    }
  },
  methods: {
    /**
     * 用于触发 my-button 实例上的 click 事件
     */
    handleClick () {
      this.$emit('click')
    }
  }
}
</script>
​
<style scoped>
  /* 初始化 button 的样式 */
  .my-button {
    display: inline-block;
    line-height: 1;
    cursor: pointer;
    background: #fff;
    border: 1px solid #ddd;
    color: #000;
    text-align: center;
    outline: none;
    font-size: 14px;
    border-radius: 4px;
  }
​
  /* button big 的样式 */
  .my-button.my-button-size-big {
    padding: 12px 20px;
  }
​
  /* button mid 的样式 */
  .my-button.my-button-size-mid {
    padding: 10px 20px;
  }
​
  /* button small 的样式 */
  .my-button.my-button-size-small {
    padding: 10px 10px;
  }
</style>
​
my-button中的index.js内容，其实如果组件库只是需要满足全引入，这个index.js完全可以省略掉，后面按需引入会对这个文件做一些修改：
'use strict'
// my-button 中的 index.js
import main from './src/main'
​
export default main
src中的index.js内容：
'use strict'
// src 中的 index.js
import MyButton from './components/my-button'
​
const components = [
  MyButton
]
​
// 官方原文：Vue.js 的插件应该暴露一个 install 方法。这个方法的第一个参数是 Vue 构造器，第二个参数是一个可选的选项对象
const install = function (Vue) {
  components.forEach(component => {
    // Vue.component：注册或获取全局组件
    Vue.component(component.name, component)
  })
}
​
// 在全局引入组件库时，使用 Vue.use 安装插件，必须提供 install 方法，这里 export default 就是用于 Vue.use
export default {
  install
}
这时再修改example文件夹中的文件用于预览效果，修改后的目录结构：
主要的修改是引入组件，添加路由信息，写组件的 demo。
main.js中添加两行代码全局引入开发的组件：
// ...
// 引入开发的组件库，
import MyComponent from '../src'
​
// 使用 Vue.use 安装开发的组件库
Vue.use(MyComponent)
// ...
这样可以在example自由使用MyButton了。
<template>
  <div class="example-button">
    <my-button @click="clickFunc">
      这是一个按钮
    </my-button>
    <my-button size="mid" @click="clickFunc">
      这是一个按钮
    </my-button>
    <my-button size="small" @click="clickFunc">
      这是一个按钮
    </my-button>
  </div>
</template>
​
<script>
export default {
  name: 'example-button',
  methods: {
    clickFunc () {
      alert('Click')
    }
  }
}
</script>
​
<style scoped>
​
</style>
效果预览：
这是一个非常简单的组件，许多地方没有做，比如：按钮的hover效果，active效果……距离一个成熟的组件还有很大的距离，不过大致思路是这样了，后面可以按照自己的需要添加其他的东西。
Webpack 打包用于全引入
做完以上的工作的确是开发了一个只有一个组件的组件库，这时候需要将组件库打包，先将组件库打包在一个新的目录dist中。
先附上一个连接：webpack 打包 JavaScript library
Webpack 的配置比较复杂，我的大致思路是将原本的entry.js改为src中的index.js，按照 Webpack 打包 Library 的规范修改必要配置就可以了。
用于打包组件库在build文件夹下的webpack.build.conf.js：
// ...
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
​
baseWebpackConfig.entry = {}
​
const webpackConfig = merge(baseWebpackConfig, {
  // ...
  devtool: config.publish.productionSourceMap ? '#source-map' : false,
  entry: {
    myComponent: './src/index.js'
  },
  output: {
    path: config.publish.distRoot + '/dist',
    filename: 'index.js',
    publicPath: config.publish.assetsPublicPath,
    library: 'my-component',
    libraryTarget: 'umd',
    umdNamedDefine: true
  },
  externals: {
    vue: {
      root: 'Vue',
      commonjs: 'vue',
      commonjs2: 'vue',
      amd: 'vue'
    }
  },
  // ...
})
​
// ...
每一个配置的用途都可以在 Webpack 官网上找到，就不多说了，附上连接：Webpack 配置
最容易被忽略的是build文件夹下，utils.js会因process.env.NODE_ENV环境变量不同，为 Webpack 各个 loader 生成的路径不同。
最后再修改一下package.json：
{
    // ...
    "private": false,
    "main": "dist/index.js",
    "scripts": {
        // ...
        "build:my-component": "node build/publish.js"
        // ...
    }
}
遮样一个非常小的组件库就完成了，目前只写了全引入的部分，后面会把按需引入的部分加上。
最后贴上github的地址：MyComponent，细节的地方可以看源代码，之前做的组件库因为不是个人成果，里面也有设计同事的工作成果，还是不拿出来给自己贴金了，哈哈哈~
距离一个成熟的组件库还差得非常非常远，不过有这样的经历看起别人成熟的组件库的源代码时会更轻车熟路，希望对大家有帮助~