npm市场发布包步骤（npm发布vue组件）

1.打开npm官网npm官网

2.创建自己的账号

3.查看当前npm的镜像源，

如果出现淘宝的镜像源则需要切换成官方的镜像源

npm config get registry //查看镜像源
https://registry.npm.taobao.org/  //淘宝的镜像源
https://registry.npmjs.org/       //官方的镜像源

4.切换镜像源（如果不是淘宝的可跳过这一步）

npm config set registry https://registry.npmjs.org/  // 设置镜像源为官方的镜像源

5.在终端登录自己刚刚创建的账号

npm login //登录命令

 输入登录指令之后会出现一些的提示，需要输入npm的用户名，密码（输入密码的时候终端输入行是不会显示的），邮箱，邮箱收到的验证码

 6.如果没有报错或者显示了自己的账号证明就是登录成功了，也可以通过指令查看当前登录的账号

npm who am i  //查看当前的登录账号

7.开始发布

发布的时候需要注意的是，插件必须要有package.json文件，没有就执行npm init命令初始化

并且json文件中必须要有name（插件名称）、version（版本号）

npm publish  //发布命令

8.验证

如果执行发布命令之后没有报错，那就是成功了，去市场上搜索一下看能否找到 

如果有报错，根据报错提示去百度一下，如我这里一开始发布报错是因为项目有个属性是私有的，所以没能发布成功，改成false即可

9.发布完之后如果需要切换回淘宝镜像源的执行

npm config set registry https://registry.npm.taobao.org/    //切换为淘宝镜像源

npm config get registry   //查看当前的镜像源

vue组件发布

1.封装组件（组件必须要有name）

2.项目根目录或者src下新建文件夹，这里取名package，文件夹下新建index.js或者main.js

3.贴入下面代码

实际就是vue2中全局注册组件一样的流程

import NiuBi from './NiuBi'
const components = [
  NiuBi
]
const install = function (Vue) {
    // 判断组件是否安装
  if (install.installed) return
  install.installed = true
    components.forEach(component => {
      Vue.component(component.name, component)
    })
}
// 检查vue是否安装，满足才执行
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}
export default {
  install,
  ...components//组件也一样要暴露
}

4.在项目中测试组件是否正常可用

项目入口main.js引入，跟引入UI框架一样的方式，然后页面使用

import niubi from "niubi-ui-cz"
Vue.use(niubi)

一切正常可用 

 

5.配置单独打包命令

在项目的package.json配置打包命令-package

--target lib 关键字 后面接的是指定打包的目录（此处为./src/package/main.js）

--name 关键字 后面接的是打包后文件的名称

--dest 关键字 后面接的是打包后文件存放的目录

具体可参考vue脚手架详解vue脚手架

示例：

6.在package.json里面配置打包后的包入口文件

 7.开始打包

执行打包命令，然后生成打包文件dist，再就是发布流程了，发布包的流程在最开头

npm run package

8.测试（如果以上流程都没问题可以试试重启项目）

随便打开一个可以使用的项目，在main.js文件引入，然后直接在页面使用

import niubi from "niubi-ui-cz"
Vue.use(niubi);

页面使用 

    <NiuBi></NiuBi> 

打印变量可以看到我们向外暴露的变量方法及组件

 package.json文件释义：转自博主

{
  // 发布的包名，默认是上级文件夹名。不得与现在npm中的包名重复。包名不能有大写字母/空格/下滑线!
  "name": "#####",
  // 版本号，每次要更新
  "version": "1.0.0",
  // 包的描述
  "description": "仅供测试，别下载",
  // 文件入口，默认是 index.js，可修改
  "main": "index.js",
  "scripts": {
    // 测试命令，可以不填直接回车
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // 作者名称
  "author": "###",
  // 包遵循的开源协议，默认是ISC
  "license": "ISC",
  // 因为组件包是公用的，所以 private 为 false
  "private": false,
  // 当前包需要依赖的第三方组件，如何安装使用依赖包，可以看看文章顶部的NPM命令介绍文章
  "dependencies": {},
  // "devDependencies": {}
  // 指定代码所在的仓库地址
  "repository": {
    "type": "git",
    "url": "https://github.com/dengzemiao/DZMFullPage.git"
  },
  // bug在哪里提
  "bugs": {
     "url": "https://github.com/dengzemiao/DZMFullPage/issues"
  },
  // 项目官网的地址
  "homepage": "https://github.com/dengzemiao/DZMFullPage",
  // 指定打包后,包中存在的文件夹
  "files": [
    "dist",
    "src"
  ],
  // 指定了项目的目标浏览器的范围
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  // 项目关键词，供搜索
  "keywords": [
    "测试"
  ]
}