步骤

注册npm账号
搭建一个vue项目
新建packages文件夹
修改vue.config.js配置
修改package.json配置

搭建一个vue项目

目录如下：

├── node_modules/                  # 依赖包；
├── public/                        # 静态资源，不经过打包；
│   ├── favicon.ico                # 图标
│   ├── index.html                 # html入口
├── src/                           # 资源；
│   ├── assets/                    # 图片等资源，需要打包
│   ├── components/                # 组件
│   ├── App.vue                    # 根组件；
│   ├── main.js                    # 入口；
├── package.json                   # 包文件；
├── .gitignore                     
├── README.md       
├── vue.config.js

创建一个包文件夹

首先，删除不必要的文件夹assets,components
其次，新增一个包文件夹，packages
在包文件夹packages下创建一个index.js文件
在包文件夹下创建你的组件文件夹，比如我要上传一个面包屑导航组件，文件夹名字为breadCrumNav
在breadCrumNav文件夹下创建src文件夹，以及index.js文件
在src文件夹下创建你的组件，我的组件名为breadNav

目录如下：

├── node_modules/                  # 依赖包；
├── packages/                      # 组件包库；
│   ├── breadCrumNav               # 面包屑组件
│   │   ├── src                    # 组件
│   │   │   ├── breadNav.vue                 
│   │   ├── index.js               # 面包屑组件入口
│   ├── index.js                   # packages入口
├── public/                        # 静态资源，不经过打包；
│   ├── favicon.ico                # 图标
│   ├── index.html                 # html入口
├── src/                           # 资源；
│   ├── App.vue                    # 根组件；
│   ├── main.js                    # 入口；
├── package.json                   # 包文件；
├── .gitignore                     
├── README.md       
├── vue.config.js

编写你的组件代码

breadNav.vue中是你想要实现的组件功能

导出你的组件并注册到Vue

这里说明一下，如果你有很多组件，比如面包屑组件，按钮组件等，某个组件单独导出（按需加载）可以使用组件下的index.js，整合所有组件，对外导出，使用packages/index.js

packages/breadCrumNav/index.js代码如下：

import BreadCrumNav from './src/breadNav'

export default (Vue) =>{
  Vue.component(BreadCrumNav.name,BreadCrumNav);
}

packages/index.js整合所有组建导出如下：

// 导入面包屑组件
import breadCrumNav from './breadCrumNav'
// 存储组件列表
const components = [
  breadCrumNav
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
  // 判断是否安装
  if (install.installed) return
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  breadCrumNav
}

配置vue.config.js文件

因为新增了packages目录，目录未加入webpack编译，默认不被webpack处理。

更改输出路径indexPath:'breadcrumnav.js'
chainWebpack链式操作，加入packages目录。

const isProduct = process.env.NODE_ENV === 'production'
module.exports = {
  indexPath:'breadcrumnav.js',// 输出路径
  chainWebpack:config => {
    config.module
      .rule('js')
      .include
      .add(__dirname + 'packages')
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}

配置package.json

新增三个字段

description描述你的组件作用
main你的入口
files你需要上传的文件
private改为false
name你的包名，npm install xxx使用

{
  "name":"breadcrumnav"
  "description": "一个面包屑导航组件",
  "main": "lib/breadcrumnav.umd.min.js",
  "private": false,
  "files": [
    "lib",
    "packages"
  ]
}

新增scrpit命令字段

--target 目标目录,启用lib库模式
--dest 输出目录，改为lib
最后一个参数为入口，我们改为packages/index.js

{
    "scripts": {
       "lib": "vue-cli-service build --target lib --name breadcrumnav --dest lib packages/index.js",
    }
}

执行命令：

npm run lib

可以看到，多出了一个lib文件夹。

添加.npmignore 文件

和 .gitignore 的语法一样，设置需要忽略的文件

node_modules
/dist
/public
/src/*

vue.config.js
.gitignore
babel.config.js
package-lock.json

注册npm账号

若没有账号，前往npm 官网注册账号。

不要忘记用户名和密码哦。

登录npm

在你的项目目录下，执行命令

npm login

提示输入用户名

username:xxxx

提示输入密码：

password:xxxxx

提示输入邮箱：

Email:(this IS public) xxxx@xx.com

这里需要注意的是，注册账号后必须去邮箱激活，否则的化，无法上传上去，提示你邮箱未激活。我就在这里踩了坑……

发布到npm

执行如下命令

npm publish

需要注意的是，版本号不能与之前一致，每次发包前，需要修改package.json中的字段`version`

如果对version版本字段不熟悉，可以看我的文章git自动生成changelog及项目版本管理

我们可以在scrpit命令字段中添加一段命令，意思是新增一个版本小号，然后再发包。

{
    "scripts": {
       "package": "npm version patch && npm publish",
    }
}

运行：

npm run package

别人npm install下载

npm install breadcrumnav@0.1.10 --save

下载后的包目录如下：

├── breadcrumnav/                  
│   ├── lib               
│   │   ├── breadcrumnav.common.js      
│   │   ├── breadcrumnav.umd.js     
│   │   ├── breadcrumnav.css
│   │   ├── demo.html
│   ├── packages               
│   │   ├── breadCrumNav               # 面包屑组件
│   │   │   ├── src                    # 组件
│   │   │   │   ├── breadNav.vue                 
│   │   ├── index.js               # 面包屑组件入口
│   ├── index.js                   # packages入口
├── package.json                   
├── README.md

编写你的README.md

想让别人用你的组件，这个文件说明必不可少。

别人项目main.js中引入

import breadCrumNav from 'breadcrumnav/lib/breadcrumnav.common.js'
import 'breadcrumnav/lib/breadcrumnav.css'
Vue.use(breadCrumNav);

组件中使用：

<breadNav :breadNavList="breadNavList" @changeRoute="changeBread"/>

注意：这个组件名`breadNav`是你编写的breadNav.vue组件中的`name`字段。

好了，以上就是vue/cli4 + npm 上传组件。

小小试水—npm上传自己的vue组件

步骤