vue组件库开发,webpack打包,发布npm

做一个像elment-ui一样的vue组件库
那多好啊!这是我前几年就想做的
但webpack真的太难用,也许是我功力不够
今天看到一个视频,早上6-13点,终于实现了,呜呜

感谢视频的分享-来龙去脉-大家可以看这个视频:https://www.bilibili.com/video/BV1Zf4y1u75o?p=9&vd_source=125d808bbbad2b8400f221b816a0f674

有些能力你可能不用,但你必须具备,就像这个vue组件库开发

1.我终于发布了一个自己的组件库

1.1在npm上面
在这里插入图片描述

1.2 别人如何使用:
在这里插入图片描述
1.3 本地使用效果:
在这里插入图片描述

2.核心代码

全部源码地址:https://gitee.com/618859/yiz-ui
核心文件1:webpack.config.js

// 不懂可以微信我yizheng369
const path = require('path');
// const VueLoaderPlugin = require('vue-loader/lib/plugin');
const { VueLoaderPlugin } = require("vue-loader");
const { CleanWebpackPlugin } = require('clean-webpack-plugin');module.exports = {mode: 'development',// entry: './src/components/index.js',entry: {// 把组件一个个写到这里才能正常打包喔card: './src/components/card/index.js',myInput: './src/components/my-input/index.js',yizTitle: './src/components/yiz-title/index.js',index: './src/components/index.js',},output: {path: path.resolve(__dirname, 'dist'),filename: '[name].umd.js',library: 'YizUI',libraryTarget: 'umd',},// resolve: {//   alias: {//     '@': path.resolve(__dirname, 'src'),//   },// },plugins: [// 先删除原来的文件,再打包new CleanWebpackPlugin(),new VueLoaderPlugin()],module: {rules: [{test: /\.css$/,use: ['style-loader', 'vue-style-loader', 'css-loader']},{test: /\.vue$/,use: [{loader: 'vue-loader'}]},]}
}

核心文件2: 集中注册文件

// 集中在这里注册
import Card from './card/src/main.vue'
import MyInput from './my-input/src/main.vue'
import yizTitle from './yiz-title/src/main.vue'
// console.log('card', Card);
const components = [Card, MyInput, yizTitle]
function install(Vue){components.forEach(component => {// 全局注册组件Vue.component(component.name, component)})
}
// 将注册函数导出去
export default { install }

大家将源码下载下来,一看就明白了。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/80933.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C语言】【数据存储】用%u打印char类型?用char存128?

1.题目一&#xff1a; #include <stdio.h> int main() {char a -128;printf("%u\n",a);return 0; }%u 是打印无符号整型 解题逻辑&#xff1a; 1. 原反补互换&#xff0c;截断 -128 原码&#xff1a;10000000…10000000 补码&#xff1a;11111111…10000000…

ztree中获取zTree 的全部节点数据

//根据 treeId 获取 zTree 对象的方法 var zTree $.fn.zTree.getZTreeObj("tree"); //获取根节点 var nodes zTree.getNodes(); //获取 zTree 当前被选中的节点数据集合 var nodes zTree.getNodes();

uniapp项目实践总结(十六)自定义下拉刷新组件

导语&#xff1a;在日常的开发过程中&#xff0c;我们经常遇到下拉刷新的场景&#xff0c;很方便的刷新游览的内容&#xff0c;在此我也实现了一个下拉刷新的自定义组件。 目录 准备工作原理分析组件实现实战演练内置刷新案例展示 准备工作 在components新建一个q-pull文件夹…

LVS负载均衡群集(NAT模式、IP隧道模式、DR模式)

目录 一、集群 1.1 含义即特点 1.2 群集的类型 1.3 LVS 的三种工作模式&#xff1a; 1.4 LVS 调度算法 1.5 负载均衡群集的结构 1.6 ipvsadm 工具 二、NAT模式 LVS-NAT模式配置步骤&#xff1a; 实例&#xff1a; 配置NFS服务器192.168.20.100 配置web1服务器192.168…

Linux学习之MySQL主从复制

MySQL配置一主一从 环境准备&#xff1a; 两台服务器&#xff1a; Master&#xff1a;192.168.88.53&#xff0c;Slave&#xff1a;192.168.88.54 在两台服务器上安装mysql-server # 配置主服务器192.168.88.53 # 启用binlog日志 [rootmysql53 ~]# yum -y install mysql-ser…

C++11线程库简介

前言 在c11之前涉及多线程的问题都是和平台相关的&#xff0c;比如windows和linux都有一套自己的接口&#xff0c;这使得代码的可移植性变差。C11中最重要的特性就是对线程进行了支持&#xff0c;使得C在编程时不再依赖第三方库&#xff0c;而且原子操作中还引入了原子类的概念…

Android13-图片视频选择器

在compileSDK 33 时&#xff0c;谷歌在安卓新增了 图片选择器 功能&#xff0c;支持单选、多选、选图片、视频等操作&#xff0c;并且不需要额外获取照片/音频权限。 具体实现如下&#xff1a; 1&#xff1a;请求 Log.d(TAG, "Build.VERSION.SDK_INT" Build.VERS…

Java计算机毕业设计 基于SpringBoot+Vue的毕业生信息招聘平台的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

代码大全阅读随笔(六)

语句 本章以数据为中心的编程观点转到语句为中心的观点上。本章介绍最简单的控制流&#xff0c;即按照先后顺序放置语句和语句块。 尽管组织直线型代码是一个相对简单的任务&#xff0c;但代码结构上的一些微妙之处&#xff0c;还是对代码质量&#xff0c;正确性&#xff0c;可…

网络请求【小程序】

一、get 二、post 1.获取相应数据 Page({/*** 页面的初始数据*/data: { inptValue:, isArr:[]},/*** 生命周期函数--监听页面加载*/onLoad(options) {},onSubmit(){// console.log(this.data.inptValue)//2.后台请求数据wx.request({url: https://tea.qingnian8.com/demoArt/…

CentOS7安装MySQL

文章目录 前言一、MySQL5.71.1 安装wget1.2 下载&安装MySQL的rpm源1.3 修改MySQL安装版本1.4 下载并启动MySQL1.5 开启MySQL远程连接用户 二、MySQL8.0注意事项 前言 CentOS7的安装&#xff0c;采用的是yum的方式安装。 yum方式安装&#xff0c;就类似在Windows下不停的下…

flink时间处理语义

背景 在flink中有两种不同的时间处理语义&#xff0c;一种是基于算子处理时间的时间&#xff0c;也就是以flink的算子所在的机器的本地时间为准&#xff0c;一种是事件发生的实际时间&#xff0c;它只与事件发生时的时间有关&#xff0c;而与flink算子的所在的本地机器的本地时…

Swagger生成Markdown文档

前提条件 1、 本地安装node.js&#xff0c;或者解压安装包 配置环境变量→ 任意路径输入CMD 配置环境变量→ 解压路径输入CMD2、npm换源&#xff08;不然下载仓库有可能报错&#xff09; npm config get registry 查看源n…

API商品数据接口:实现电子商务应用程序的核心功能

随着电子商务的飞速发展&#xff0c;许多电商平台都提供了应用程序接口&#xff08;API&#xff09;&#xff0c;允许开发者调用特定的功能&#xff0c;如商品查询、购物车管理、订单处理以及支付等。这些API为开发者提供了在应用程序中嵌入电商功能的机会&#xff0c;从而为用…

机器学习——决策树/随机森林

0、前言&#xff1a; 决策树可以做分类也可以做回归&#xff0c;决策树容易过拟合决策树算法的基本原理是依据信息学熵的概念设计的&#xff08;Logistic回归和贝叶斯是基于概率论&#xff09;&#xff0c;熵最早起源于物理学&#xff0c;在信息学当中表示不确定性的度量&…

WorkPlus | 好用、专业、安全的局域网即时通讯及协同办公平台

自国家于2022年发布的《关于加强数字政府建设的指导意见》以来&#xff0c;我国数字政府建设已经迈入了一个全新的里程碑&#xff0c;迎来了全面改革和深化升级的全新阶段。 WorkPlus作为自主可控、可信安全、专属定制的数字化平台&#xff0c;扮演着政务机关、政府单位以及各…

JDK19特性

文章目录 JAVA19概述1. 记录模式(预览版本)2.Linux/RISC-V 移植3.外部函数和内存 API &#xff08;预览版&#xff09;4.虚拟线程(预览版)5.Vector API &#xff08;第四次孵化&#xff09;6.Switch 模式匹配&#xff08;第三预览版&#xff09;7.结构化并发&#xff08;孵化阶…

【算法专题突破】滑动窗口 - 串联所有单词的子串(15)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;30. 串联所有单词的子串 - 力扣&#xff08;LeetCode&#xff09; 这道题其实也很好理解&#xff0c;看一下示例就基本知道是什么意思了&#xff0c; 主要就是找 s 里面…

linux 查看可支持的shell

查看可支持的shell linux中支持多种shell类型&#xff0c;所以在shell文件的第一行需要指定所使用的shell #!/bin/bash 指定该脚本使用的是/bin/bash&#xff0c;这样的机制使得我们可以轻松地引用任何的解释器 查看该linux系统支持的shell cat /etc/shells/bin/sh/bin/bash/us…

Spring Authorization Server常见问题解答(FAQ)

文章导航 Spring Authorization Server入门 (一) 初识SpringAuthorizationServer和OAuth2.1协议 Spring Authorization Server入门 (二) springboot整合Spring Authorization Server Spring Authorization Server入门 (三) 集成流程说明、细节补充和各种方式获取token测试 Spr…