vue如何打包成库

一，创建一个组件

1. 在 xxx 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录 xxxx/
2. 在 xxxx/ 目录下创建 src/ 目录存储组件源码
3. 在 /xxxx 目录下创建 index.js 文件对外提供对组件的引用
4. 在xxx/xxxx/index.js下面代码导出整个组件
5. 整合所有组件，对外导出，即一个完整的组件库

// 导入组件，组件必须声明 name
import vue文件名 from './src/vue文件名.vue'
// 为组件提供 install 安装方法，供按需引入
vue文件名.install = function (Vue) {
  Vue.component(vue文件名.name, vue文件名)
}
// 默认导出组件
export default vue文件名

// 导入颜色选择器组件
import 组件名 from './xxxx'

// 存储组件列表
const components = [
  组件名 
]

// 定义 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,
  // 以下是具体的组件列表
  组件名 
}

二，发布到npm

1，运行打包库的命令

"build:lib": "vue-cli-service build --target lib --name xxx生成的库名 packages/index.js"

2，执行编译命令：npm run build:lib

3，配置package.json文件中发布到npm的字段

{
  "name": "xxx", // 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
  "version": "0.1.5", // 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
  "description": "我是干什么用的", // 描述
  "main": "dist/xxx.umd.min.js", //  入口文件，该字段需指向我们最终编译后的包文件。
  "keyword": "vcolorpicker colorpicker color-picker", // 关键字，以空格分离希望用户最终搜索的词。
  "private": false // 是否私有，需要修改为 false 才能发布到 npm
  "author": "罗大润"  // 作者
  "license": "" // 开源协议
 }

4，添加.npmignore文件，设置忽略发布文件

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。和.gitignore的语法一样，具体需要提交什么文件，看各自的实际情况。

# 忽略目录
src/
组件库包名/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map // 使用productionSourceMap: false去除map文件
...

5，登录到npm

首先需要到npm上注册一个账号且激活邮箱，npm镜像需要切换到npm上面来，npm login + npm publish

至此组件打包并发布成功了，只需要向引用其他依赖一样应用就可以了