前言:工作的时候总是使用别人的npm包,然而我有时心底会好奇自己如何发布一个npm包呢,什么时候自己的包能够被很多人喜欢并使用呢...今天我终于迈出了第一步. 前提:会使用 npm,有 vue 基础,了解一点 webpack Are you ready?  Go! 目录 编写自己的npm包 发布npm包 使用自己的npm包 更新npm包 最终效果 一.编写自己的npm包 1. 新建一个空文件夹 2. 进入文件夹,终端(cmd)运行 npm init 完成后会在目录下生成一个 package.js

前言 从去年年初开始,自己便下决心要写一个vue系列的博客,但时至今日,才写系列的第三篇博客,想来甚是惭愧. 但是慢归慢,每一篇都要保证质量,以及要写出自己的心路历程,防止自己工作中填的坑再让读者走一遍. vue上手相对react来说是比较简单的,对于vue的基本指令以及语法,应该没有什么能比官网更详细,更生动的了.仔细想来,vue值得一说的,在项目中会让新手感到困惑的,是vue的组件,今天就最近工作中用到的一个pdf查看组件,和大家聊聊vue的组件.最后会讲如何将自己的代码封装成一个npm包,

此文已由作者吴维伟授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 在编写程序时,总会有一些代码是我们不愿意一遍又一遍重复地去写的,比如一些UI或交互相似组件,或是一些相似的流程或逻辑.以前,面对这样的情况,我会将可以复用的部分抽象出来,做成可以复用的模块,放在专门存放公用模块的文件夹中,便于查找和引用.但是这样只能解决单个项目中公用模块复用的问题,如果你的模块需要被多个项目复用,那么就需要另寻它法了.本文讨论的是通过发布npm包来实现模块复用时有哪些注意事项. 新建一个

1.环境准备 安装node,npm,@vue/cli 2.初始化项目 用@vue/cli创建新项目 vue create mtest-ui 删除public,main.js,App.vue等无关文件,新增packages文件夹存放自己的vue组件 这里我写了一个actionsheet的vue组件放到packages文件夹中 并且在src目录中新增了个js,目录像这样: 其中lib目录是后续打包生成的先不用管 其中index.js是为了把packages中的组件提供一个统一入口来import 代码

亲测好用,如出错,请留言 1.项目初始化 使用vue脚手架创建,但vuecli太重,我们使用简单的工程脚手架进行处理,输入命令 vue init webpack-simple my-project npm  install npm run dev 初始化以后看一下目录: 2. src中写入vue组件  结构类似于这样 考虑其他ui组件的使用,比如vant, import vant from ‘vant’ Vue.use(vant) 等 index.js中代码可以这样写: import decre

一.使用vuecli3创建项目 vue create svgicon 二.修改目录,开发组件前的准备 把src目录改为examples作为查看组件的演示目录,新建packages目录作为组件编写的目录. 在packages下新建index.js作为导出组件入口,作为整个组件库的导出,新建组件文件夹作为组件源码的放置,比如我的组件目录叫做 svg-icon ,在svg-icon文件夹下新建index.js文件对外提供对文件的引用,新建src文件夹并创建svg-icon.vue作为组件文件.整个pa

npm 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用 npm命令 npm -v 来测试是否成功安装 查看当前目录已安装插件:npm list 更新全部插件: npm update [ --save-dev ] 使用 npm 更新对应插件: npm update <name> [ -g ] [ --save-dev] 使用 npm 卸载插件: npm un

VS Code项目中通过npm包的方式共享代码片段的方案实现 上周在 "VS Code项目中共享自定义的代码片段方案" 的文章中提到过一个共享代码片段的方案,上周经过调研后并没有发现现成的插件,就抽了点空实现了这个方案,最终产出Share Snippets 这个插件去实现这个设想 Share Snippets介绍 借助Share Snippets,你可以通过npm包的形式分享你的代码片段,让其它的开发者能够轻松愉快的体验上,更新迭代方便 方案对比 项目级共享代码片段 方案 学习成本 传

NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用. 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用. 版本号 使用NPM下载和发布代码时都会接触到版本号.NPM使用语义版本号来管理代码,这里简单介绍一下. 语义版本号分为X.Y.Z三位,分别代表主版本号.次版本号和补丁版本号.当代

1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容: 以下为package.json内容: { "name": "zgb_npm", "version": "1.0.0&qu

我们基于nodejs平台上面的npm上,可以随意下载很多npm安装包.那我们如何创建自己的npm包呢?很简单,废话少说,开始做~ 开始做之前nodejs默认是要安装的,怎么安装自行百度其他教程. 首先在npm网站上注册一个账号,这个账号之后会用到. npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 注册完毕,回到我们的电脑.Windows直接cmd到命令行: //输入以下命令,会提示输入用户名.密码.邮箱,

第三章  建议学习时间4小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑.编写接口,最后完成一个完整的项目后台,预计共10天课程. npm包管理 什么是npm npm是随同NodeJS一起安装的包管理工具,只要安装了node,我们就可以通过命令行使用npm 启动命令行,运行 npm -v  就可以看到npm的版本号,根据安装的node版本不同,内部集成的npm页不同,只

原文地址:https://www.cnblogs.com/sghy/p/6829747.html 1.npm官网创建npm账户 npm网站地址:https://www.npmjs.com/ npm网站注册地址:https://www.npmjs.com/signup 2.命令行工具登录npm npm login 验证登录是否成功 npm who am i 3.创建npm库 npm init 按照提示输入相应内容: 以下为package.json内容: { "name": "z

Node.js 既是语言也是平台,跳过了 Apache.Nginx 等 HTTP 服务器,直接面向前端开发 JavaScript 是由 ECMAScript.文档对象模型(DOM)和浏览器对象模型(BOM)组成的 而 Mozilla 则指出 JavaScript 由 Core JavaScript 和 Client JavaScript 组成 可以认为,Node.js 中所谓的 JavaScript 只是 Core JavaScript,或者说是 ECMAScript 的一个实现 最出色的一个实

NPM是Node.js的包管理工具,随着Node.js的出现,以及前端开发开始使用gulp.webpack.rollup以及其他各种优秀的编译打包工具(大多数采用Node.js来实现),大家都开始接触到一些Node.js,发现了使用NPM来管理一些第三方模块会很方便.大家搬砖的模式也是从之前的去插件官网下载XXX.min.js改为了npm install XXX,然后在项目中require或者import. 当然,NPM上边不仅仅存在一些用来打包.引用的第三方模块,还有很多优秀的工具(包括部分打

docker部署 Vue 工程包 目录结构 [root@host ~]# tree front/ front/ ├── dist.conf ├── dist.zip ├── Dockerfile └── nginx.conf 编写Dockerfile 这里的基础镜像是我优化过的,大家可以指定官方的 FROM nginx:1.13 MAINTAINER test COPY dist.conf /etc/nginx/conf.d/dist.conf COPY nginx.conf /etc/ngin

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由小明plus发表 很多时候,我们可能想要用 typescript 语言来创建一些模块,并提交到 npm 供别人使用, 那么在 2018 年,如果我想要初始化这样的一个模块,我需要做哪些步骤呢?: 答案是:创建一个优雅的,对开发者友好的模块,至少需要以下 15 个步骤 初始化文件夹,初始化 git 仓库,初始化 npm,初始化 tsc 修改 tsconfig.js 配置 添加 npm 脚本 添加 tslint 校验代码规则以及 ed

NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: a.允许用户从NPM服务器下载别人编写的第三方包到本地使用 b.允许用户从NPM服务器下载并安装别人编写的命令行程到本地使用 c.允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用

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

下雪了,在家闲着,不如写一个npm 包发布.简单的 npm 包的发布网上有很多教程,我就不记录了.这里记录下,一个复杂的 npm 包发布,复杂指的构建环境复杂. 整个工程使用 rollup 来构建,其中会引进 babel 来转译 ES6,利用 Eslint 来规范代码的书写风格,最后代码的发布会经过 uglify 压缩.同时发布 umd.es 格式的版本以供外部调用. 完整目录结构如下: 下面是整个过程的记录 一.初始化工程 yarn init -y 初始化后,修改 package.json 内