从零开始搭建自己的vue组件库——01创建_vue构建自己的组件库-程序员宅基地

技术标签: 自己的vue组件库  vue  npm  

从零开始搭建自己的vue组件库——01创建

引言

因工作需要,要打造一套属于自己团队的组件库,本人也是第一次接到这种任务,虽然不着急,但是之前从来没做过,因此特意再此记录下过程,也希望自己能坚持下去,当然,过程中少不了查阅各种资料,也会再次记录下各种各样的问题,本组件库的开发基于vue2.0,主要用于pc端,会参考element-ui进行开发
处于一定需要,库的实际名称不会再后续文章中展示出来

历史导航

后一篇:从零开始搭建自己的vue组件库——02测试发布

项目创建

首先第一步是要创建一个vue工程
vue create xxxx
创建具体流程在这里不再详细说明,创建完目录如下
在这里插入图片描述

修改目录结构

新增一个文件夹packages,将src文件夹改名examples,增加两个文件:.npmignore和vue.config.js
在这里插入图片描述

结构是仿的element-ui,packages文件夹会存放写好的各个组件,examples可以作为写组件库过程中的测试工程,如果想的话,也可以在这里写一个例子项目,打包部署以便其他人使用

.npmignore文件是在上传组件库到npm时的忽略文件,被忽略的文件不会上传到npm,内容如下

examples/
packages/
public/
vue.config.js
jest.config.js
babel.config.js
*.map

vue.config.js是vue配置文件,内容如下,和传统项目用到的稍稍不同,只需将pages的index只想examles/main.js,并且wepack配置里使用babel解析packages即可,代码如下

const path = require("path"
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u014050961/article/details/109366444

智能推荐

Web Config 配置档详解_bwp config-程序员宅基地

文章浏览阅读1.8k次。 1.当前文件夹2.父文件夹3.Framework自定义的两个config文件(web.config和machine.config)注意:子目录的配置设置可以提供除从父目录继承的配置信息以外的配置信息,也可以重写或修改父目录中定义的设置。运行时对Web.config文件的修改不需要重启服务就可以生效(注: 节例外);Web.config文件是可以扩展的。你可以自定义新配置参数并编写配置节处理程_bwp config

java实时监控系统_JavaMonitor-程序员宅基地

文章浏览阅读4.2k次。Java应用性能监控系统(JM)1.简介JM(Java应用监控系统)是基于Java8制作而成的一款在线监控系统。JM适用于监控所有Java应用,具有堆内存监控、方法区监控、GC监控、类加载监控、类编译监控与线程监控等,提供堆快照下载,线程快照下载等功能。JM的使用非常简单,只需要把它扔在你的服务器上执行即可,它会立即检测当前机器上的所有Java应用并进行监控。JM使用webSocket建立客户端与..._java监控系统

Linux安装JDK1.8 & tomcat & MariaDB(MySQL删减版) & MySQL安装(重要)-程序员宅基地

文章浏览阅读752次,点赞24次,收藏18次。Linux安装JDK1.8 & tomcat & MariaDB(MySQL删减版) & MySQL安装(重要)

神经网络学习小记录20——ResNet50模型的复现详解_resnet50复现-程序员宅基地

文章浏览阅读6.8w次,点赞184次,收藏941次。神经网络学习小记录20——ResNet50模型的复现详解学习前言什么是残差网络什么是ResNet50模型ResNet50网络部分实现代码图片预测学习前言最近看yolo3里面讲到了残差网络,对这个网络结构很感兴趣,于是了解到这个网络结构最初的使用是在ResNet网络里。什么是残差网络Residual net(残差网络):将靠前若干层的某一层数据输出直接跳过多层引入到后面数据层的输入部分。..._resnet50复现

AI之Tool:机器学习/深度学习常用工具(python/Anaconda等)的简介、安装、使用方法之详细攻略_python库 ai robot tool 怎么用起来-程序员宅基地

文章浏览阅读1.7k次,点赞18次,收藏21次。Matlab是一种用于科学计算和工程领域的高级编程语言和环境,广泛用于数学建模、数据分析和信号处理。它有丰富的库和框架,如NumPy、Pandas、Scikit-learn、TensorFlow和PyTorch,使其成为研究和实际应用中的首选语言。:Java在企业级应用中有很大的影响力,而且也有一些用于机器学习和深度学习的库,如Deeplearning4j。: 由GitHub开发,是一个开源的文本编辑器,支持Python和其他多种语言。: Python的标准发行版中自带的简单集成开发环境,适合初学者。_python库 ai robot tool 怎么用起来

N76E003初次搭建工程及遇到Keil 警告:UNCALLED SEGMENT,IGNORED FOR OVERLAY PROCESS时的解决方案_*** warning l25: data types different-程序员宅基地

文章浏览阅读1.7k次。问题描述初次接触N76E003开发板,主要根据以下三篇文章搭建了基本的环境:[N76E003安装环境教程] https://www.cnblogs.com/zhugeanran/p/9554822.html (本文调试遇到警告例子为该文末尾程序)[N76快速入门及常见坑] https://blog.csdn.net/qlexcel/article/details/81069808[单片机..._*** warning l25: data types different

随便推点

CUDA和CUDNN安装和版本验证_cudnn 版本-程序员宅基地

文章浏览阅读1.9k次。使用CUDA开发AI项目必然离不开CUDA和CUDNN的安装,今天这篇文章就是教你怎么验证CUDA和CUDNN是否安装成功和验证版本是不是安装对了。1、方法还有很多,两个就够了2、如果环境有问题,大概率测试程序是跑不完的。_cudnn 版本

《TCP IP 详解卷1:协议》阅读笔记 - 第八章 -程序员宅基地

文章浏览阅读202次。阅读须知:笔记为阅读《TCP IP 详解卷1:协议》后摘抄的一些知识点,其间也有加入一些根据英文原版的自己翻译和结合网上知识后的理解,所以有些段落之间并不能够串联上或者知识点与书上略有差别(基本差别不大,参考的资料属RFC官方文档)。第八章:ICMPv4和ICMPv6: Internet控制报文协议ICMP是一种面向无连接的协议,负责传递可能需要..._《tcp/ip详解 卷1:协议》的第8章

使用egret白鹭引擎开发h5游戏的入门demo_egret demo-程序员宅基地

文章浏览阅读3.5k次。使用egret开发h5游戏的入门demomain类代码main类代码基本的代码如下所示,都写了注释,应该很好懂的。就不再一步一步分析了:/** * 定义全局变量 *///定义一个透明度的值用来判断是否需要隐藏或者显示var number: number;//定义一个值来表示是图片序号var count: number = 1;//定义三个按钮let button = new ..._egret demo

“无用发明家”告诉你,5G推开了三重门-程序员宅基地

文章浏览阅读141次。不知道从什么时候起,“无用发明家”的概念开始兴起。国内有大家耳熟能详的手工耿,日本有“无用发明家”麻里菜。这些动手能力极强的视频博主,不断向观众展示一件件极富创意却并没有什么用处的作品,成...

【MySQL】数据库的安装与连接, 常见问题的解决-程序员宅基地

文章浏览阅读126次。文章目录Mysql 8数据库学习的目的数据库的三种模型层次模型网状模型关系模型Mysql 8 常见问题安装window时遇到的一些问题安装Linux时遇到的一些问题连接数据库在系统终端中工具中Mysql 8数据库学习的目的1.数据可持久化保存2.方便统一化管理以及实现结构化查询本质上数据库是一个按照特定的规则存储在磁盘上的一个用来存储数据的仓库, 通过数据库管理系统,统一的对其中储存的数据进行管理和使用.数据库的三种模型层次模型层次模型就是按照数据类型的层次关系来分类优点: -->查

Spring Cloud系列(一)之 Eureka、Zookeeper、Consul_springcloud和zookeeper学习先后-程序员宅基地

文章浏览阅读1.1k次。Spring Cloud系列之Eureka、Zookeeper、Consul一、微服务架构介绍1.1 架构的演变1.2 Spring Cloud介绍二、微服务架构业务场景2.1 创建服务提供者(provider)工程2.2 创建服务消费者(consumer)工程三、Eureka服务注册与发现3.1 搭建注册中心3.2 服务注册(消费者集群)3.2.1 服务提供者注册3.2.2 服务消费者注册3.3 EurekaServer集群环境构建3.4 搭建服务提供者集群和负载均衡3.5 微服务信息完善3.6 服务发现_springcloud和zookeeper学习先后

推荐文章

热门文章

相关标签