发布npm包一.按照相应格式写我们的vue代码（就如同写一个jquery插件时、有其固定的格式一样）。不用脚手架，我们

分为2大步骤：

一.按照相应格式写我们的vue代码（就如同写一个jquery插件时、有其固定的格式一样）。

二.发布到npm上的流程

一、书写一个vue组件不用脚手架，我们自己从头开始做起，因为脚手架会附带很多没用的东西。

就做一个最简单的vue组件：就是传入用户名字，页面打印出‘hello,用户名’的组件。

比如，我的预期目标是其他vue项目中，npm install本组件后，可以如此使用该组件： code

code 然后网页上会显示：

OJBK，现在开搞： 1.新建一个空文件夹,进入到根目录下。执行

npm init 初始化项目。然后会让你填一些项目相关的信息，跟着提示填就是了。没啥说的。注意name不要和现有的其他npm包重名了，不然一会儿发Npm包的时候会失败，可以先去npmjs.com搜一下有没有重名的。

这一步完成后，会生成package.json文件。

2.由于本例是一个vue的组件包，而且使用了es6和webpack，所以在devDependencies字段中，应该至少加入以下依赖：

package.json

}

这些依赖的用处分别都是啥，自己查。

3.执行npm install，下载这些依赖包。

4.新建2个文件夹：dist和src，名字按照个人习惯吧。我习惯dist代表发布时的目录，src是开发目录。dist里面的js是到时候通过webpack打包后的文件。待会只会提交dist目录到npm官网上，src不提交。

src里：我们比较常规的写一个vue组件

样式就不说了，照常写。

app.vue(写法上也很常规):

index.js(这里的写法就与普通vue项目有所不同了，主要要把它export出去)：

然后执行npm run build，就会在dist目录下生成helloMsg.min.js。这即是我们这个npm包的主文件。

6.修改package.json中的main字段中指向的主文件信息

package.json

7.新建一个文件，名为.npmignore，是不需要发布到npm的文件和文件夹，规则和.gitignore一样。如果你的项目底下有.gitignore但是没有.npmignore，那么会使用.gitignore里面的配置。

例如我的:

至此，一个npm组件包就做完了，剩下的，只是提交到npm官网去。

(如果要严谨点，当然还需要加入单元测试通过后再发包。。。但是。。。)

二、发布到npm上的流程 1.前提，得有个npm账号，没有就新注册一个账号，

2.进入到项目的根目录下，运行 npm login

它会让你输入你的用户名，密码和邮箱，若登录成功，会显示：

Logged in as 你的名字 on registry.npmjs.org/. 3.然后执行npm publish，即可将这个npm包发布到npm官网上拉。

4.更新、发新包。

需要发新包时，需要自己手动修改package.json中的version版本号，惯例是+1啦，比如1.0.0-->1.0.1。然后npm login,npm publish。即可。

三、结语： 1.发包时的常见错误：

name名重名、name名还有大写字母。。。

2.本项目的git地址：

3.我还按照该项目结构，做了一个基于vue 的同步树的npm组件包。

发布npm包