前端如何搭建ui组件库/封装插件(从零到有)(代码片段)

关键词：

需求

因之前是做外包项目居多，经常用到相同的组件，之前的办法是在一个项目中写一个组件，其他项目直接将compents下的组件复制，粘贴到项目中使用，缺点是维护起来，改一个项目，其他项目也需要修改，所以，自己研究准备去封装一个组件库，

前言

日常在项目中我们经常直接根据 npm install/ npm i 去安装插件/组件库

例如:npm i element-ui -S, npm install vux --save

内容

1.vue项目安装(如已安装，可略过此步骤)

2.新建组件

在项目中找到src/components下新建input.vue组件

<template>
  <div class="about">
    <input :type="typeInput" @change="inputChange" />
  </div>
</template>

<script>
export default 
  props: 
    typeInput: String
  ,
  methods: 
    inputChange(val) 
      this.$emit("change", val);
    
  
;
</script>

3.新建components/index.js

import Vue from "vue";
import Input from "./input/index.vue";

const Components = 
  Input
;

Object.keys(Components).forEach(name => 
  Vue.component(name, Components[name]);
);

export default Components;

4.修改package.json

  "name": "@npm官网中username/项目名",
  "version": "0.1.0", //每次更新库都需要修改版本号，以免影响
  "private": false,  //需要设置为私有
  "main": "./dist/component-library-gao.common.js", //指定该属性后，当引用组件库时，会默认加载main中指定的文件
  "files": [   //引用组件库可以访问的文件
    "dist/*",
    "src/*",
    "public/*",
    "*.json",
    "*.js"
  ],
  "scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-bundle": "vue-cli-service build --target lib --name component-library-gao ./src/components/index.js",  //直接打包项目中的组件，将此发布到npm上
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  ,

源码时代前端干货分享|从零动手封装一个通用的vue按钮组件

我们在使用目前最主流的前端框架vue在开发过程中，组件是一个非常重要的组成部分，可以这么说，所有的vue应用，都是由一个一个的小组件拼装而成的。正是由于vue组件如此重要，所以vue的生态中，也非常多的UI组件库，其中... 查看详情

使用vite和typescript带你从零打造一个属于自己的vue3组件库

前言随着前端技术的发展，业界涌现出了许多的UI组件库。例如我们熟知的ElementUI,Vant，AntDesign等等。但是作为一个前端开发者，你知道一个UI组件库是如何被打造出来的吗?读完这篇文章你将学会:如何使用pnpm搭建出一个Monorepo环... 查看详情

javajvm-自定义类加载器从零到有

自定义文件系统类加载器publicclassLoaderextendsClassLoader{privateStringdir;publicLoader(Stringdir){this.dir=dir;}@OverrideprotectedClass<?>findClass(Stringname)throwsClassNotFoundException{Class<?>c= 查看详情

如何做好一个前端业务组件库(代码片段)

如何做好一个前端业务组件库前言业务组件库与基础组件库的区别技术选型打包文件格式babel配置项目结构依赖包处理package.json的问题webpack配置typescript配置文档配置文档编写单元测试组件化开发国际化（中英文切换）自... 查看详情

三个小时vue3.x从零到实战（typescript的搭建使用及资料）(代码片段)

目录：三个小时vue3.x从零到实战（前）（vue3.x基础）三个小时vue3.x从零到实战（中）（vue3.x高级语法）三个小时vue3.x从零到实战（后）（vue3.x配套工具及项目化构建）三个小时vue3... 查看详情

从零到壹搭建一个商城架构--k8s集群安装(代码片段)

如果想了解其他内容，请点击这里查看目录1、kubeadmkubeadm是官方推出的一个用于快速部署kubernetes集群的工具这个工具能通过两条指令完成一个kubernetes集群的部署：#创建一个Mster节点kubeadminit#将一个Node节点加入到当前集群中kubead... 查看详情

这个前端低代码框架太好用了

...;我是章鱼猫。今天推荐的这个项目是「Sunmao」，一个前端低代码框架。通过Sunmao，可以轻松将各种前端UI组件库和自己开发的前端组件，封装成低代码组件库，从而搭建您自己的低代码UI开发工具，使前端开发... 查看详情

vue组件库基于@vue/cli构建typescript版ui库-环境搭建

使用@vue/cli4脚手架，从零开始搭建typescript版的UI库1.全局安装@vue/cli4官网地址：https://cli.vuejs.org/zh/guid...npminstall-g@vue/cli#ORyarnglobaladd@vue/clivue--version@vue/cli4.5.13#当前版本2.构建项目#创建项目totorovuecreatetotoro#配置选项 查看详情

vue从零独立开发企业级电商系统

...Cli4.0安装/使用Vue-DevTools安装使用学习目标4:项目基础架构前端基本项目架构，通过此章节可搭建一个通用性的前端架构，内容涵盖跨域方案、路由封装、错误拦截等跨域-CORS跨域-JSONP跨域-接口代理接口梳理目录结构设置路由封装... 查看详情

：element-ui组件库

...t组件库Cube组件库1.2PC端常用UI组件库ElementUI组件库饿了么搭建后台管理系统[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-otmVfaMK-1655452008388)(assets/image-20220302172523798.png)]IViewUI组件库项目案例：豆... 查看详情

教你从零到一搭建自动化测试框架（附视频教程+源码）

...模块、自动化测试统计模块等组成的工具集合。以常见的前端UI测试为例，一个测试框架大概包括测试对象，测试组件，基础类和函数，工具类，测试数据，异常处理，测试日志，断言和测试报告等... 查看详情

用javascript实现手势库—封装手势库前端组件化(代码片段)

前端《组件化系列》目录「一」用JSX建立组件Parser（解析器）「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现三次贝塞尔动画库-前端组件化「六」用... 查看详情

用javascript实现手势库—封装手势库前端组件化(代码片段)

前端《组件化系列》目录「一」用JSX建立组件Parser（解析器）「二」使用JSX建立Markup组件风格「三」用JSX实现Carousel轮播组件「四」用JavaScript实现时间轴与动画「五」用JavaScript实现三次贝塞尔动画库-前端组件化「六」用... 查看详情

从零到一开发博客后台管理系统(代码片段)

...顶栏设计home页tab标签页与左侧导航栏动态菜单联动axios的封装2.home页顶栏设计只是用于显示标题，看起来干净一些我们来编辑top.vue<template><div><spanclass="title">博客管理系统</span></div></t 查看详情

插件cinemachine之从零到一

插件Cinemachine的作用？ 安装无他，就是通过PackageManager安装，官方支持，不确定是否要2019后才有PM ，如果Unity2018没有PM，也是可以新版本旧装的，但是对于初学者，还不如直接上Unity2019吧基础知识实战案例一，第三人称过... 查看详情

从零到django大牛的的进阶之路01(代码片段)

搭建创建虚拟环境mkvirtualenvdjango_py3_1.11-ppython3安装Djangopipinstalldjango==1.11.11创建工程django-adminstartproject工程名称工程目录settings.py是项目的整体配置文件。urls.py是项目的URL配置文件。wsgi.py是项目与WSGI兼容的Web服务器入口。manage.py... 查看详情

idea从零到精通08之idea常用插件提升开发效率

文章目录作者简介引言导航热门专栏推荐概述一、插件安装方式二、在Idea中无法直接安装插件三、常用插件1.ECTranslation2.GrepConsole3.CodeGlance4.NyanProgressBar5.PresentationAssistant6.SequenceDiagram7.AlibabaJavaCodingGuidelines8.RainbowBrackets9.Highl 查看详情

[python从零到壹]番外篇之可视化利用d3库实现csdn博客每日统计效果（类似github）(代码片段)

欢迎大家来到“Python从零到壹”，在这里我将分享约200篇Python系列文章，带大家一起去学习和玩耍，看看Python这个有趣的世界。所有文章都将结合案例、代码和作者的经验讲解，真心想把自己近十年的编程经验分... 查看详情