1-10是开发流程,后面的是发布流程

1. 在Git里面…新建项目

 

2. 克隆项目到本地用来开发

  git clone https://github.com/***/vue-prevent-browser-back.git

3. 运行命令行,初始化项目,生成package.json    

  npm init –y

4. npm install 安装包

5. 在安装vue-cli的情况下执行

  vue-init webpack-simple创建项目结构

6. 删除多余文件 index.html清空src文件夹内容

7.  把插件内容复制到src

8. 修改package.json配置内容

9. 修改webpack.config.js的output部分配置

10. 打包输出插件 npm run build

  有的插件不需要打包直接把代码复制到dist文件就好了

11. 去注册npm账号

   https://www.npmjs.com/

12. 发布前要配置要发布的内容,要不会把各种乱七八糟的文件都发布了

a. 使用 .npmignore 设置忽略哪些文件

  如果项目没有使用 git或者 没有 .gitignore 文件, 那么可以添加 .npmignore 文件来设置忽略哪些文件,.npmignore 的写法跟 .gitignore 的规则完全一样。 需要注意的是如果同时使用了 .npmignore 和 .gitignore 的话, 只有 .npmignore 会生效, 优先级比较高。

b. 使用 package.json 的 files 字段选择发布哪些文件

  上面两种方式都是设置忽略哪些文件, 有时可能只想发布编译打包后的几个文件或者目录, 如果按照上面的设置会很麻烦, 这是可以直接在 package.json 中 files 字段设置发布哪些文件或目录, 这样的话, 只有这些目录或文件才会被publish.
同时需要说明的是这里的优先级是高于 .npmignore 和 .gitignore 的。

c. npm默认带了一些规则

  除了上面的规则外, npm还有一些内置的规则,会被自动忽略的文件有

  node_modules下的所有文件也会被忽略。另外还有一部分文件会被包含, 即便设置忽略也无效, 这些文件有

    

黑名单模式:.npmignore文件,没有.npmignore情况下使用.gitignore文件。

白名单模式:package.json里边配置files字段

13. 发布  先登录 然后版本号必须跟之前发布的不一样才可以

14. 登录npm: npm login

15. 发布:npm publish

遇到的问题:

1. npm ERR! you must verify your email before publishing a new package: https:/

就是没有通过验证就发包 结果报错了

得通过邮件验证下

2 . npm err  You must be logged in to publish packages. : vue-prevent-browser-back

解决:包名被占用,package.json改一个。

开发vue插件并发布到npm包管理工具的流程的更多相关文章

  1. nodeJS---模块与npm包管理工具

    nodeJS---模块与npm包管理工具 一:从模块外部访问另一个模块内的成员; 假如我现在还在D盘中的node文件夹内中的app.js代码改成如下: var msg = 'hello'; var f ...

  2. NPM 包管理工具详解,使用教程

    NPM 包管理工具 1.1 定义:什么是 NPM NPM 全称 Node Package Manager,它是 JavaScript 的包管理工具, 并且是 Node.js 平台的默认包管理工具.通过 ...

  3. Node.js权威指南 (4) - 模块与npm包管理工具

    4.1 核心模块与文件模块 / 574.2 从模块外部访问模块内的成员 / 58 4.2.1 使用exports对象 / 58 4.2.2 将模块定义为类 / 58 4.2.3 为模块类定义类变量或类 ...

  4. Node.js之包与npm包管理工具

    Node.js之包与npm包管理工具 1.Node.js中的包 1.1在一个包中包含如下内容: package.json:对包进行描述 在bin子目录中存放二进制文件 在lib子目录中存放JavaSc ...

  5. node.js中npm包管理工具

    现在安装node.js,默认就会帮我们装上了npm包管理工具,npm主要用来下载,安装,管理第三方模块. 创建一个包描述文件: npm init [-y] 查看包的信息 npm info <pa ...

  6. Nodejs-内置核心模块&npm包管理工具

    1.核心模块的意义 如果只是在服务器运行JavaScript代码,其实意义不大(浏览器就可以解决)因为无法实现功能(读写文件,访问网络) Node的用处在于本身还提供了一系列的功能模块,用于与操作系统 ...

  7. NodeJS 中npm包管理工具

    NPM 使用介绍 NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,常见的使用场景有以下几种: 允许用户从NPM服务器下载别人编写的第三方包到本地使用. 允许用户从 ...

  8. npm包管理工具在一般项目中的应用方法

    最近自己在有时间,在通学一些知识点,记录一下,以便以后使用方面 当我们在做项目的时候,如果需要到包管理工具,那么我们一定会经历以下流程: 1.首先在官网下载node.js,然后默认安装到C盘 检查是否 ...

  9. node.js开发 npm包管理工具

    npm介绍 说明:npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 使用npm安装插件:命令提示符执行npm instal ...

随机推荐

  1. 【技术累积】【点】【git】【10】.gitignore和.gitattributes

    .gitignore 告诉git忽略一些文件,git status会显示不到这些文件的状态. 一般放在项目根目录,以对全局控制,当然可以放在module下: 具体规则主要是: 以行为单位定义忽略文件类 ...

  2. Android中DatePicker与TimePicker用法讲解(包括DatePickerDialog与TimePickerDialog)

    实现效果:将DatePicker和TimePicker修改的日期和时间实时显示在程序标题栏上. 1.通过DatePicker和TimePicker来实现 布局为main.xml <?xml ve ...

  3. Graph network classification(As a beginner, continue to update)

    Data arrangement 1.Reference Webs http://nlp.csai.tsinghua.edu.cn/~tcc/ https://blog.csdn.net/a60964 ...

  4. Bootstrap 模态框(Modal)带参数传值实例

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 为了实现父窗体与其的交互,通常需要向其传值,实现 ...

  5. Js正则匹配处理时间

    <html> <body> <script type="text/javascript"> //将long 型 转换为 日期格式 年-月-日 h ...

  6. Html 页面刷新后出现闪动

    Html 页面刷新后,或跳转后,出现闪动,抖动问题 1.查看有没有用到新字体,新字体链接位置是否存在 如: @font-face { font-family: "AvantGarde-Dem ...

  7. vue 强制刷新组件

    <component v-if="hackReset"></component> 2 3 4 this.hackReset = false this.$ne ...

  8. swiper 滑动获取当前第几页下标

  9. [luogu2624 HNOI2008]明明的烦恼 (prufer+高精)

    传送门 Solution 根据prufer序列做的题,具体可以看这里 还知道了一种避免高精除的方法quq Code #include <cmath> #include <cstdio ...

  10. Firefly-rk3399 开发板环境搭建

    Firefly教程网站:http://wiki.t-firefly.com/zh_CN/Firefly-RK3399/started.html 系统烧录: http://wiki.t-firefly. ...