仿 ElementUI 搭建自己的 vue 组件库

仿 ElementUI 搭建自己的 vue 组件库

  • [一、创建 my-ui-can 项目](#一、创建 my-ui-can 项目)
    • [1. 新建项目](#1. 新建项目)
    • [2. 自定义组件](#2. 自定义组件)
    • [3. 创建 MyButton 组件](#3. 创建 MyButton 组件)
    • [4. 导出组件](#4. 导出组件)
    • [5. package.json](#5. package.json)
  • [二、发布到 npm 仓库](#二、发布到 npm 仓库)
    • [1. npm 账号注册(忽略)](#1. npm 账号注册(忽略))
    • [2. 发布 my-ui-can](#2. 发布 my-ui-can)
  • [二、项目引用 my-ui-can 依赖包](#二、项目引用 my-ui-can 依赖包)

功能描述:仿 ElementUI 组件库的方式创建 一个 my-ui-can 的组件库(简单版,支持按需加载,只有 MyButton 组件)。

一、创建 my-ui-can 项目

1. 新建项目

shell 复制代码
vue create my-ui-can

2. 自定义组件

项目目录如下:

my-ui-can/

├── dist/

├── lib/

│ ├── button/

│ │ ├── src/

│ │ │ └── button.vue

│ │ └── index.js

│ └── index.js

│── package.json

└── vue.config.js

3. 创建 MyButton 组件

vue 复制代码
<!-- button.vue -->
<template>
  <button
    class="my-button"
    @click="handleClick"
    :disabled="disabled"
    :autofocus="autofocus"
    :type="nativeType"
  >
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: 'MyButton',
    inject: {
    },
    props: {
      size: String,
      nativeType: {
        type: String,
        default: 'button'
      },
      loading: Boolean,
      disabled: Boolean,
      autofocus: Boolean
    },
    methods: {
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  };
</script>
js 复制代码
// lib/button/index.js
import MyButton from './src/button';

/* istanbul ignore next */
MyButton.install = function(Vue) {
  Vue.component(MyButton.name, MyButton);
};

export default MyButton;

4. 导出组件

js 复制代码
// my-ui-can/lib/index.js
import Button from './button/index.js';

const components = [
  Button
];

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

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

export default {
  version: '0.1.0',
  install,
  Button
};

5. package.json

json 复制代码
{
  ....
  "name": "my-ui-can",
  "version": "0.1.0",
  "main": "lib/index.js",
  ...
}

二、发布到 npm 仓库

1. npm 账号注册(忽略)

不知道怎么操作的,可以参考 npm 账户注册

2. 发布 my-ui-can

shell 复制代码
npm config set registry https://registry.npmjs.org/
npm login
npm pulish

二、项目引用 my-ui-can 依赖包

npm install my-ui-can

方式一:全局引入

js 复制代码
// main.js
import MyUI from 'my-ui-can'
Vue.use(MyUI)

方式二:局部引入

vue 复制代码
<template>
  <MyButton>222</MyButton>
</template>
<script>
import MyButton from 'my-ui-can/lib/button'
export default {
  name: 'App',
  components: {
    MyButton
  }
}
</script>
相关推荐
中微子8 分钟前
React 状态管理 源码深度解析
前端·react.js
加减法原则1 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele2 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4532 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6732 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
你的人类朋友2 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir2 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴2 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子2 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead3 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构