自定义Vue组件发布到npm创建项目使用vue-cli3脚手架创建Vue项目，直接在终端中输入npm create (

创建项目

使用vue-cli3脚手架创建Vue项目，直接在终端中输入npm create (项目名)

创建完项目，目录结构如下：

修改配置

修改vue配置文件部分内容：vue.config.js，配置如下：

'use strict'

module.exports = {
  pages: {
    index: {
      // page的入口
      entry: 'src/main.js',
      // 模板来源
      template: 'public/index.html',
      // 输出文件名
      filename: 'index.html'
    }
  }
}

开发并注册组件

在components文件夹中存放并编写自己的组件，创建一个index.js导出该文件夹下所有组件，内容如下：

import cuiComp from './cuiComp.vue'

cuiComp.install = Vue => {
  Vue.component(cuiComp.name, cuiComp)
}

export default cuiComp

也可以直接通配符方式加载：

const install = (Vue)=>{
    const requireComponent = require.context(".",true,/\.vue/);
    requireComponent.keys().forEach(fileName=>{
        const config = requireComponent(fileName);
        Vue.component(config.default.name,config.default);
    })
}
export default {
    install
}

可以在main.js中导入components/index.js，并在vue文件中测试使用。

打包组件

vue-cli 3.x提供了一个库文件打包命令，主要需要四个参数：

target：默认为构建应用，改为lib即可启用构件库模式
name：输出文件名
dest：输出目录，默认为dist，我们这里改为lib
entry：入口文件路径，默认为src/App.vue

于是我们在package.json中的scripts添加一个lib命令

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --name cui-comp --dest lib src/components/index.js"
  }

执行npm run lib命令，编译组件，生成目录如下：

准备发布

修改`package.json`，添加组件信息

name：包名，该名不能和已有的名称冲突；
version：版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
keyword：关键字，以空格分割；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。

创建`.npmignore`文件，设置忽略文件

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

发布

切换npm镜像地址

npm config set registry http://registry.npmjs.org

登录npm账户

如果没有npm账户，可以通过npm adduser命令创建一个npm账户，或者到npm官网注册，如果已经存在账号，使用npm login命令登录。
具体流畅可以参照官方文档。
在发布之前，一定确保组件已经编译完毕，而且package.json中的入口文件main路径正确，一切准备就绪，发布组件：npm publish

自定义Vue组件发布到npm