如何写一个自己的组件库，打成NPM包，并上传到NPM远程

从零开始写一个npm包及上传

最近刚好自己需要写公有npm包及上传,虽然百度上资料都能找到,但是都是比较零零碎碎的,个人就来整理下,如何从零开始写一个npm包及上传. 该篇文件只记录一个大概的流程,一些细节没有记录. tips: 这篇文章基于Vue.js 和 github 预备工作 1.首先你需要npm账号和github账号(个人用的是github). 注册账号都比较简单,个人就不再描述. 2.将npm账号和github账号关联,这样才能找到你的代码. 在npm里面找到你的个人设置(Profile Settings),在…

如何写一个自己的组件库，打成NPM包，并上传到NPM远程

1.首先使用vue create my_project 构建一个自己的Vue项目 2.vue.config.js和package.json配置如下,做了些修改 const path = require('path') module.exports = { publicPath: '/', outputDir: 'dist', devServer: { port: 9981, open: true, overlay: { warnings: fals…

SpringBoot项目打成jar包后上传文件到服务器目录与jar包同级问题

看标题好像很简单的样子,但是针对使用jar包发布SpringBoot项目就不一样了.当你使用tomcat发布项目的时候,上传文件存放会变得非常简单,因为你可以随意操作项目路径下的资源.但是当你使用SpringBoot的jar包发布项目的时候,你会发现,你不能像以前一样操作文件了.当你使用File file = new File()的时候根本不知道这个路径怎么办.而且总不能很小的项目也给它构建一个文件服务器吧.所以这次就来解决这样的问题实现因为我们无法操作jar包内容,所以我们只能将文件存放在…

GitHub上传项目到远程库

写文章 GitHub上传项目到远程库 GitHub上传项目到远程库今天把想把文件托管到GitHub仓库,但是执行一系列的命令以后,刷新GitHub网站还是没有任何更新.后来终于找到原因,原来是在执行git push前,我忘了执行git commit命令. 下面,我将列出如何实现托管项目到GitHub上的一系列步骤: 准备:注册GitHub账号,下载及安装git客户端第1步在GitHub上新建一个仓库testGit. 第2步在D盘你创建的目录下右键选择Git Bash Here,创…

Git 使用，本地项目上传到GitHub远程库

Git 使用,本地项目上传到GitHub远程库环境 GitHub账号点此进入github官网 git客户端工具点此进入git下载页本地项目上传到 GitHub 在GitHub中创建一个仓库(远程库) Repository name: 仓库名称 Description(可选): 仓库描述介绍 Public, Private: 仓库权限(公开共享,私有或指定合作者,私有仓库收费) README(可选): 添加一个自述文件 README.md gitignore(可选): 维护不需要进行版本管…

ASP.NET MVC 网站开发总结（二）——一个或多个文件的异步或同步上传

简而言之,直接用代码展示如何实现文件的上传,这里需要使用到一个bootstrap的文件上传插件File Input(请自行下载). 前台页面:  <!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/bootstrap.min.css" />…

自己动手写一个iOS 网络请求库的三部曲[转]

代码示例:https://github.com/johnlui/Swift-On-iOS/blob/master/BuildYourHTTPRequestLibrary 开源项目:Pitaya,适合大文件上传的 HTTP 请求库:https://github.com/johnlui/Pitaya 本系列文章中,我们将尝试使用 NSURLSession 技术构建一个自己的网络请求库. NSURLSession 简介 NSURLSession 是 iOS7 引入的新网络请求接口,在 WWDC2013…

使用TypeScript给Vue 3.0写一个指令实现组件拖拽

最近在用vue3重构后台的一个功能.一个弹窗组件,弹出一个表单.然后点击提交. 早上运维突然跑过来问我,为啥弹窗挡住了下边的表格的数据,我添加的时候,都没法对照表格来看了.你必须给我解决一下. 我参考了一下几大Vue的ui组件库.发现element iview antv.好像都没这个功能.为啥运维需要这个功能?? 但是没办法,只能整一个就是了. 做之前本来想直接做到dialog这个组件中.但是又担心后面其他的组件会用到.于是决定把拖拽功能做到指令中. 整个功能点如图.鼠标在拖拽区域拖动,整个对话…

多个module实体类集合打一个jar包并上传至远程库

本章内容主要分享多个module中的实体类集合生成到一个jar包中,并且发布到远程库:这里采用maven-assembly-plugin插件的功能来操作打包,内容不长却贴近实战切值得拥有,主要节点内容如: 多个module实体类集合打jar包 jar包打入本地库 jar包上传至远程库多个module实体类集合打jar包首先假设下我们拥有多个module,每个module中有一些接口或公用方法的参数实体和响应实体,再或者有公用枚举,此时为了合作方对接方便,我们需要吧这些个实体类.枚举.接口等集…

CentOS安装Nexus（Maven私有库）详细配置及上传本地jar到私服

Nexus原理 Maven的原理就是将jar从远程中央仓库下载到PC磁盘的本地仓库,当本地仓库没有发现需要的jar就会去Maven默认的远程中央仓库Maven Central(由Apache维护)中寻找,每次需要新的jar后都要从远程中央仓库上下载.那么问题来了?这个远程的中央仓库一定有很多人使用那下载速度一定很慢,这个暂且不用考虑. 重要的是万一哪天公司外网连不上了咋办?而Nexus私服恰好可以解决这个问题.搭建私服的好处是Nexus有效解决了Maven对Apache的远程中央仓库的依赖,当项…

将本地项目上传到git远程库（初始化）

准备条件: 首先,有一个远程仓库地址,本文中的地址为“http://git.xxxxxxxx.net.cn/jacun/imagegrap.git”; 第一步:在本地创建初始化仓库: git init 执行初始化命令后,会在文件夹中创建一个.git文件: 查看状态(是否有变化): git status 第二步:将你需要上传的项目复制到本目录中(与.git同级). 查看状态(是否有变化): git status 第三步:提交代码: 首先执行add方法: git add . 然后执行commit方法…

用Canvas+Javascript FileAPI 实现一个跨平台的图片剪切、滤镜处理、上传下载工具

直接上代码,其中上传功能需要自己配置允许跨域的文件服务器地址~ 或者将html文件贴到您的站点下同源上传也OK. 支持: 不同尺寸图片获取. 原图缩小放大. 原图移动. 选择框大小改变. 下载选中的区域. 上传选中的区域. 几种简单的滤镜(自己添加滤镜函数即可添加滤镜效果) 移动端适配要点: ① 替换事件名称 if(/^.*(Android|iPad|iPhone){1}.*$/.test(navigator.userAgent)){ eventName={down:"touchstart&qu…

解决SharePoint 文档库itemadded eventhandler导致的上传完成后，编辑页面保持报错的问题，错误信息为“该文档已经被编辑过 the file has been modified by...”

在文档库中添加itemadded 后,在上传文件后,会自动打开文档属性的编辑页面,在保存的时候就会报错,说这个文档已经被编辑过了.这是应为默认itemadded实践是异步执行的,会在edit页面打开之前就把属性更新完了,知道在保存的时候,属性不一致. 两种解决方法: 1: 使用item.sysupdate(false). 这个false参数非常重要. 2:将handler的执行变为非异步执行,编辑element.xml文件,如下红色部分: <Receiver><Name>AutoD…

如何实现一个通用的IHttpHandler 万能的IHttpHandler HttpWebRequest文件上传

昨天遇到一个比较奇怪的需求,大致是需要在服务器上部署一个http服务,但是服务的具体功能不知道,以后在客服端实现.这里介绍一下系统背景,有一个系统运(部署在美国)行了很多年了,给系统产生了很多文件,现在需要把该系统的文件(依据数据库中的记录)来做相应的archive,做了后发现里面还有一些独立的文件(不与数据库记录相关),那么这时我们需要删除这些独立的文件,或者把它们remove到其他地方,需要得到这些文件的list.后来想了想以后会不会还有别的什么需求啊,所以就想做一个通用的HTTPhandl…

一个很不错的支持Ext JS 4的上传按钮

以前经常使用的swfUpload,自从2010年开始到现在,很久没更新了.而这几年,flash版本已经换了好多个,所以决定抛弃swfupload,使用新找到的上传按钮. 新的上传按钮由harrydeluxe扩展的,下载地址是http://www.sencha.com/forum/showthread.php?205576-File-upload-with-drag-amp-drop-support. 新的上传按钮派生于按钮,因而使用非常方便,它使用了Plupload(http://www.plu…

如何发布一个包到npm && 如何使用自己发布的npm包 && 如何更新发布到npm的package && 如何更新当前项目的包？

如何发布一个包到npm First 在https://www.npmjs.com注册一个账号. Second 编辑好项目,文件大致如下: 其中,gitignore可以如下: .DS_Store node_modules/ dist/ 注意:不能包含 npm-debug.log . Third: npm login Fourth: npm publish 注意:如果使用了cnpm(默认使用),会报错:no_perms Private mode enable, only admin can publ…

iView + vue-quill-editor 实现一个富文本编辑器（包含图片，视频上传）

1. 引入插件(注意IE10以下不支持) npm install vue-quill-editor --savenpm install quill --save (Vue-Quill-Editor需要依赖) 2. main.js 引入 import VueQuillEditor from "vue-quill-editor"; import 'quill/dist/quill.core.css'; import 'quill/dist/quill.snow.css';import 'q…

【Django组件】KindEditor富文本编辑器上传文件，html样式文本，VUE异步提交数据(易懂版)

1:下载与配置适合版本: python3 下载:http://kindeditor.net/down.php 文档:http://kindeditor.net/doc.php 将文件包放入static文件夹内并且配置: settings.py配置: STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), os.path.join(BASE_DIR, "media"), ] # Dja…

【写一个自己的js库】 2.实现自己的调试日志

还是本着学习的目的,实现一个自己的调试日志,界面很简单,就是将调试信息显示在页面的正中央,用一个ul包裹,每条信息就是一个li. 1.新建一个myLogger.js文件,将需要的方法声明一下.其中var声明的是私有成员,可见范围只在构造函数中,每个实例都会保存一套他们的副本.this声明的是特权方法,new的时候会把它绑定到实例上,实例可以直接调用它.在prototype上声明的就是公有方法了,每个实例都可以访问它.最后将一个实例赋值给Lily这个库,Lily就有自己的日志插件了. functi…

【写一个自己的js库】 1.搭个架子先

最近在看<javascript dom 高级程序设计>,想着跟着里面的代码敲一遍吧,也算是做一下学习笔记吧,所以这不是重新发明轮子,只是个学习的过程. 1.先确定自己的命名空间,并且加入几个常用的js方法.命名空间很重要啊,保证了自己库里的变量不污染全局空间,不和其他的库的变量名起冲突.命名空间的惯例就是把代码都放在自执行函数(function(){})()里了,然后暴露个方法给window对象了.所以0.1版本的代码就长下面这样了.(这里暂时没有用继承) (function(){ //命名空…

跟我一起写一个hello-world react组件并发布到npm

第一步:初始化我们的配置 $ mkdir react-hello-world $ cd react-hello-world/ $ npm init -y 修改我们的package.json文件 //package.json { "name": "react-hello-world", "version": "1.0.0", "description": "", "main&qu…

Angular2-编写一个简易的组件

Angular2组件可以这么理解:编写一个类,然后在类的上面用组件装饰器装饰一下,这个类就成组件了. 所以编写组件分两步:1)编写类:2)编写装饰器 1)编写类: export class SimpleComponent {} 2)在类上面编写装饰器: @Component({ selector: 'simple-component', template: `Hello Simple Component!` }) 完整代码如下: @Component({ selector: 'simple-co…

【写一个自己的js库】 5.添加修改样式的方法

1.根据id或class或tag修改样式,样式名是-连接格式的. function setStyleById(elem, styles){ if(!(elem = $(elem)) return false; for(prop in styles){ if(!styles.hasOwnProperty(prop)) continue; if(elem.style.setProperty){ elem.style.setProperty(prop, styles[prop]); }else{ el…