0
点赞
收藏
分享

微信扫一扫

Vue 开发 UI 组件库

水墨_青花 2022-04-03 阅读 94
cssnode.jsjavascript

Vue 开发 UI 组件库

前言

  • 首先你得会 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 参数支持

参数名参数类型参数描述默认值
typeString按钮值：primary、success、warning、dangerdefault
plainBoolean是否没有背景填充false
circleBoolean是否是圆形按钮false

1.2 事件支持

事件名说明
click用户点击按钮时触发该事件

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 中查看
    在这里插入图片描述

总结

举报

相关推荐

【Vue】学习笔记-Vue UI组件库

qtc++

vue中常用的UI组件库

vue.jsui前端

『收藏』VUE优秀UI组件库合集

日记本前端之路前端开发那些事儿

Vue知识点整理（七）- Vue UI组件库

前端vue

【UI组件库】Menu组件

uireact.jsjavascript

vue UI组件整理

vue.jsui前端

React UI组件库

vue.js前端javascript

Vue学习（六、七）—— 路由（router）、UI组件库

前端vue

Vue 3的高颜值UI组件库

vue.jsjavascriptui

Vue UI 组件库移动端、PC端推荐

uivue.js前端
0 条评论