写一个自己的UI组件库并支持npm install下载

1,503 阅读2分钟

前言

什么叫组件化

将页面拆分开为多个组件,每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护.因为组件是资源独立的,所以可复用性高,组件和组件之间也可以嵌套,对于项目后期的需求变更和维护也更加友好.

如何进行组件化开发

自定义组件必须进行注册,Vue则提供了两种注册方式:全局注册/局部注册

  • 全局注册

    使用Vue.component(tagName, options) 进行全局注册,注册的组件会挂载到 Vue.options.components

  • 局部注册

    使用components在组件的内部进行局部注册,并且挂在到vm.$options.components

因为全局注册挂载的对象不同,这也是全局注册的组件可以任意使用的原因

import HelloWorld from './components/HelloWorld'

export default {
  components: {
    HelloWorld
  }
}

所需技术栈

  • Vue
  • webpack-simpl 只开发组件,不需要那么多的配置,webpack-simpl 作为简化版已经足够

所需基本知识

  • name 组件的名称(必填),js中使用驼峰式命名,html中使用kebab-case命名

  • props组件属性,用于父子组件的通信.接收使用组件的父组件的传值

  • computed处理data或者props中的属性,并返回一个新的属性.

  • slot 插槽分发内容,有传入时显示,无传入DOM时显示默认,分为无名和具名两种.

  • class定义子组件的类名,代码参考props

实现思路

目录结构

参考Element-UI的源码按需引入的思路,构建出的目录结构

  • 先输入 vue init webpack-simple ———— (横线处代表项目名称)构建一个项目,按步骤输入命令,启动项目
src
|——assets  -- 项目样式文件
|——components -- 总组件文件夹
   |——Button  -- 根据不同组件命名封装,便于结构清晰可维护
      |——button.vue  -- 所封装的组件
      |——index.js -- 组件提供 install 安装方法,供按需引入
   |——index.js -- 整合所有的组件,对外导出,即一个完整的组件库

封装组件

封装一个Button组件

<template>
  <button
    class="mia-button"
    @click="handleClick"
    :type="nativeType"
    :disabled="miaDisabled"
    :class="[
     type ? 'mia-button--' + type : '',
     {
      'is-disabled': buttonDisabled,
     }
    ]"

  >
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
  export default {
    name: "miaButton",
    props: {
      type: {
        type: String,
        default: ''
      },
      nativeType: {
        type: String,
        default: 'button'
      },
      disabled: Boolean,
    },
    computed: {
      buttonDisabled() {
        return this.disabled || (this.elForm || {}).disabled;
      }
    },
    methods:{
      handleClick(evt) {
        this.$emit('click', evt);
      }
    }
  }
</script>

css代码就不粘贴了

根据之前整理的组件开发基础知识,就可以看懂以上代码~

按需引入

在组件同级目录下的index.js文件里写入提供install的安装方法

// 导入组件必须声明name
import Button from "./button";
// 为组件提供 install 安装方法
Button.install =  function (Vue) {
    Vue.component(Button.name,Button)
}
// 默认导出组件
export default Button

导出组件

components文件夹下的index.js文件里写入

// 导入下拉按钮组件
import button from './Button/button'
// 存储组件列表
const components = [
  button
]

// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default {
  // 导出的对象必须具有 install,才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  button
}

配置项目

1.修改package.json
  • 修改private字段

    private是true的时候不能发布到npm,需设置成false

  • 增加main字段

    main字段是require方法可以通过这个配置找到入口文件

  "name": "style-library-y", // 文件名是自己起的哈
  "description": "这只是一个用来测试的文档",//描述
  "version": "1.0.20", //版本号,在每次往npm更新前都要改一变版本号
  "author": "", // 署名
  "license": "MIT",
  "private": false, // 发布到npm上要改
  "main": "./dist/style-library-y.js"
2.修改 webpack.config.js
  • 修改entry

    入口会根据开发环境 ,生产环境切换

  • 修改output

3.修改index.html的js引用路径

修改了output 的 filename 所以这块的引用也要更改一下

4. npm run build 打包

npm 发布

  • npm官网注册一个帐号(注册后会往邮箱发两个邮件,有一个是激活邮箱的,一定要点!否则会发布不成功)
  • 在该组件根目录下的终端输入npm login 按提示输入
  • 输入完成后npm publish 就发布完成了
  • 之后在npm官网自己的主页里就可以看到发布的包