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…

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…

C++11线程库简介

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

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

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

网络请求【小程序】

一、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算子的所在的本地机器的本地时…

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

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 里面…

基于springboot+vue的药店管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战 主要内容&#xff1a;毕业设计(Javaweb项目|小程序等)、简历模板、学习资料、面试题库、技术咨询 文末联系获取 项目介绍…

HTML+CSS画一个卡通中秋月饼

HTMLCSS画一个卡通中秋月饼&#x1f96e;&#x1f96e;&#x1f96e; 中秋活动水个文章 整个divcss实现个月饼&#xff0c;给前端初学者一个练手的demo 效果图 思路 HTMl 先来个轮廓画脸上的东西&#xff1a;眼睛、眉毛、腮红、嘴巴眼睛丰富下瞳孔画20个花瓣 CSS 轮廓是要外…

css中BFC外边距塌陷解决办法

什么是BFC 块级格式化上下文&#xff0c;独立的渲染区域&#xff0c;与外部毫不相干&#xff0c;上下两个元素都设置了外边距&#xff0c;结果会出现重叠的部分合并 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /&…

[EI复现】基于主从博弈的新型城镇配电系统产消者竞价策略(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【网络】计算机网络基础

Linux网络 对网络的理解 在网络传输中存在的问题&#xff1a; 找到我们所需要传输的主机解决远距离数据传输丢失的问题怎么进行数据转发&#xff0c;路径选择的问题 有问题&#xff0c;就有解决方案&#xff1b; 我们把相同性质的问题放在一起&#xff0c;做出解决方案 解…

【系统架构】什么是集群?为什么要使用集群架构?

什么是集群&#xff1f;为什么要使用集群架构&#xff1f; 1.什么是集群&#xff1f;2.为什么要使用集群&#xff1f;2.1 高性能2.2 价格有效性2.3 可伸缩性2.4 高可用性2.5 透明性2.6 可管理性2.7 可编程性 3.集群的常见分类3.1 负载均衡集群3.2 高可用性集群3.3 高性能计算集…

LeetCode 2596. 检查骑士巡视方案

【LetMeFly】2596.检查骑士巡视方案 力扣题目链接&#xff1a;https://leetcode.cn/problems/check-knight-tour-configuration/ 骑士在一张 n x n 的棋盘上巡视。在有效的巡视方案中&#xff0c;骑士会从棋盘的 左上角 出发&#xff0c;并且访问棋盘上的每个格子 恰好一次 。…

输入学生成绩,函数返回最大元素的数组下标,求最高分学生成绩(输入负数表示输入结束)

scanfscore()函数用于输入学生的成绩 int scanfscore(int score[N])//输入学生的成绩 {int i -1;do {i;printf("输入学生成绩:");scanf("%d", &score[i]);} while (score[i] > 0);return i; } findmax()用于寻找最大值 int findmax(int score[N…