Vue 开发 UI 组件库

• 前言
• 一、开发环境搭建
• • 1、项目初始化
  • 2、开发前准备
• 二、Vue 实现常用组件
• • 1、button 组件
  • • 1.1 参数支持
    • 1.2 事件支持
    • 1.3 Button 组件
    • 1.4 测试使用
• 三、UI 组件库的封装
• 四、发布到 npm 与 gitee
• • 1、上传到 Gitee
  • 2、发布到 npm
  • • 2.1 注册 npm 账号
    • 2.2 发布到 npm
• 总结

前言

• 首先你得会 Vue 的使用

一、开发环境搭建

1、项目初始化

• 使用 Vue-Cli 脚手架搭建一个项目

vue create 项目名

• 选择手动选择
  
• 上下按钮控制“箭头指向”，空格键确定选择
  
  
• 这里我选择“Less”
  
• 不想受 Eslant 困扰的话选择只有报错时才校验
  
• 保存时校验
  
• 安装到 package.json
  
• 是否保存这次的选择方便以后使用，输入“n”不保存
  

2、开发前准备

• 清空 assets、components 目录，并在 components 目录下创建一个用于测试的组件

// Button.vue
<template>
  <div class="button">Button</div>
</template>
<script>
export default {
  name: "TestButton",
};
</script>

<style lang="less" scoped></style>

• 全局注册组件

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Button from "./components/Button.vue"

const app = createApp(App)

// 全局注册组件
app.component(Button.name, Button)

app.mount('#app')

• 使用组件

// App.vue
<template>
  <div>
    <test-button></test-button>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style></style>

二、Vue 实现常用组件

1、button 组件

1.1 参数支持

1.2 事件支持

1.3 Button 组件

• Button 组件

<template>
  <button
    class="button"
    :class="[`button-${type}`, { 'is-plain': plain, 'is-circle': circle }]"
    @click="handleClick"
  >
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>
<script>
export default {
  name: "LgkButton",
  props: {
    type: {
      type: String,
      default() {
        return "default";
      },
    },
    plain: {
      type: Boolean,
      default() {
        return false;
      },
    },
    circle: {
      type: Boolean,
      default() {
        return false;
      },
    },
    icon: {
      type: String,
      default() {
        return "";
      },
    },
  },
  methods: {
    handleClick(e) {
      this.$emit("click", e);
    },
  },
};
</script>

<style scoped>
.button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  /* 禁止元素的文字被选中 */
  -moz-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}
.button:hover,
.button:focus {
  color: #409eff;
  border-color: #c6e2ff;
}

.button-primary {
  color: #fff;
  background: #409eff;
  border-color: #409eff;
}
.button-primary:hover,
.button-primary:focus {
  color: #409eff;
  border-color: #c6e2ff;
}

.button-success {
  color: #fff;
  background: #67c23a;
  border-color: #67c23a;
}
.button-success:hover,
.button-success:focus {
  color: #67c23a;
  border-color: #c6e2ff;
}

.button-warning {
  color: #fff;
  background: #e6a23c;
  border-color: #e6a23c;
}
.button-warning:hover,
.button-warning:focus {
  color: #e6a23c;
  border-color: #c6e2ff;
}

.button-danger {
  color: #fff;
  background: #f56c6c;
  border-color: #f56c6c;
}
.button-danger:hover,
.button-danger:focus {
  color: #f56c6c;
  border-color: #c6e2ff;
}

/* 朴素的按钮 */
.button.is-plain:hover,
.button.is-plain:focus {
  background: #fff;
  border-color: #409eff;
  color: #409eff;
}

.button-primary.is-plain {
  background: #ecf5ff;
  border-color: #b3d8ff;
  color: #409eff;
}
.button-primary.is-plain:hover,
.button-primary.is-plain:focus {
  background: #fff;
  border-color: #409eff;
  color: #409eff;
}

.button-success.is-plain {
  background: #f0f9eb;
  border-color: #c2e7b0;
  color: #67c23a;
}
.button-success.is-plain:hover,
.button-success.is-plain:focus {
  background: #67c23a;
  border-color: #67c23a;
  color: #fff;
}

.button-warning.is-plain {
  background: #fdf6ec;
  border-color: #f5bad1;
  color: #e6a23c;
}
.button-warning.is-plain:hover,
.button-warning.is-plain:focus {
  background: #e6a23c;
  border-color: #e6a23c;
  color: #fff;
}

.button-danger.is-plain {
  background: #fef0f0;
  border-color: #fbc4c4;
  color: #f56c6c;
}
.button-danger.is-plain:hover,
.button-danger.is-plain:focus {
  background: #f56c6c;
  border-color: #f56c6c;
  color: #fff;
}

/* 圆 */
.button.is-circle {
  border-radius: 50%;
  padding: 10px;
}
.button.icon {
  margin-left: 5px;
}
</style>

1.4 测试使用

• App.vue 文件中测试使用

<template>
  <div>
    <lgk-button>按钮</lgk-button>
    <lgk-button type="primary">按钮</lgk-button>
    <lgk-button type="success">按钮</lgk-button>
    <lgk-button type="warning">按钮</lgk-button>
    <lgk-button type="danger" @click="handleClick">按钮</lgk-button>
  </div>
  <div>
    <lgk-button plain>按钮</lgk-button>
    <lgk-button type="primary" plain>按钮</lgk-button>
    <lgk-button type="success" plain>按钮</lgk-button>
    <lgk-button type="warning" plain>按钮</lgk-button>
    <lgk-button type="danger" plain>按钮</lgk-button>
  </div>
  <div>
    <lgk-button circle>图</lgk-button>
    <lgk-button type="primary" circle>图</lgk-button>
    <lgk-button type="success" circle>图</lgk-button>
    <lgk-button type="warning" circle>图</lgk-button>
    <lgk-button type="danger" circle>图</lgk-button>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    handleClick() {
      // console.log("hello world");
    },
  },
};
</script>

<style></style>

三、UI 组件库的封装

• 在项目下创建一个 packages 目录，用于存放所有组件
• 然后在 packages 目录下创建一个入口文件 index.js，用于全局注册组件

// packages/index.js
/**
 * packages 的入口文件
 */
import Button from "./Button.vue"

const components = [Button]
const install = function (Vue) {
  // 全局注册组件
  components.forEach(item => {
    Vue.component(item.name, item)
  })
}

// 判断是否是直接引入文件，如果是，就不用调用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}

export default { install }

• 在 vue.config.js 文件中添加对 packages 目录的编译

const path = require('path')

module.exports = {
  // 扩展 webpack 配置，使 packages 加入编译
  chainWebpack: config => {
    config.module.rule('js')
      .include.add(path.resolve(__dirname, 'packages')).end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        return options
      })
  }
}

• 在 package.json 文件中添加打包成库的命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib packages/index.js"
  },

• 然后执行 nom run lib 进行打包

四、发布到 npm 与 gitee

1、上传到 Gitee

• 后续待补！！！

2、发布到 npm

2.1 注册 npm 账号

• npm 注册:https://www.npmjs.com/signup
• 填写个人注册信息，用户名、邮箱、密码
• 勾选接受协议，点击“Create an Account”
  

2.2 发布到 npm

发布前准备：

• 需要将 package.json 中的 private 属性值改为 false
• 保证在 npm 中没有相同名字的库，即修改 package.json 中的 name 属性值唯一
• 指定下载的文件，在 package.json 中添加 main 属性用于指定下载文件
• 指定作者、描述、协议等（可填可不填）

  "name": "项目名唯一",
  "version": "0.1.0",
  "private": false,
  "main": "dist/项目名.umd.min.js",
  "author": {
    "name": "lgk"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib packages/index.js"
  },

• 创建一个 .npmignore 文件，用于将一些没必要上传到 npm 的文件剔除

// .npmignore
# 剔除的目录
packages/
public/
src/

# 剔除的文件
vue.config.js
babel.config.js
*.map
.gitignore

发布到 npm：

• 查看当前所使用的源

npm get registry

• 检查现在所使用的 npm 源，如果不是 npm 源，需要切换回来

nrm ls

• 切换 npm 源为 https://registry.npmjs.org/

// 切换为 npm 源
npm config set registry https://registry.npmjs.org/
// 切换为 taobao 源
npm config set registry http://registry.npm.taobao.org/

• 登录 npm，输入用户名、密码、邮箱、验证码

npm login

• 进入项目内
• 使用命令发布到 npm 仓库

npm publish

• 如果显示如下图信息表示发布成功，也可以登录到 npm 中查看
  

总结