教你搭建vue组件库

1、首先创建一个新的项目vue create 文件名

2、我们将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件.

执行完以上操作后变成：

但是cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:

const path = require('path')
module.exports = {
// 修改 src 为 examples
pages: {
index: {
  entry: 'examples/main.js',
  template: 'public/index.html',
  filename: 'index.html'
}
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.resolve.alias
  .set('@', path.resolve('examples'))
  .set('~', path.resolve('packages'))
config.module
  .rule('js')
  .include
    .add(/packages/)
    .end()
    .include
    .add(/examples/)
  .end()
  .use('babel')
    .loader('babel-loader')
    .tap(options => {
      // 修改它的选项...
      return options
    })
   }
  }

3、在 packages 目录下，所有的单个组件都以文件夹的形式存储，所有这里创建一个目录 color-picker/

4、在 color-picker/ 目录下创建 src/ 目录存储组件源码

5、 在 /color-picker 目录下创建 index.js 文件对外提供对组件的引用。

修改 /packages/color-picker/index.js文件，对外提供引用

# /packages/color-picker/index.js
// 导入组件，组件必须声明 name
import colorPicker from './src/color-picker.vue'
// 为组件提供 install 安装方法，供按需引入

colorPicker.install = function (Vue) {

  Vue.component(colorPicker.name, colorPicker)
}

// 默认导出组件
export default colorPicker

6、整合所有组件对外导出，形成自己组件库 修改 /packages/index.js 文件，对整个组件库进行导出。

// 导入颜色选择器组件
import colorPicker from './color-picker'

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

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

7、编写示例 7.1示例种导入组件库

import Vue from 'vue'
import App from './App.vue'

// 导入组件库
import ColorPicker from './../packages/index'
// 注册组件库
Vue.use(ColorPicker)

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

7.2 在示例中使用组件库中的组件 在上一步用使用 Vue.use() 全局注册后，即可在任意页面直接使用了，而不需另外引入。当然也可以按需引入。

<template>
	<colorPicker ></colorPicker>
</template>

<script>
export default {
	data () {
		return {
			color: '#ff0000'
		}
	},
	methods: {
		headleChangeColor () {
			console.log('颜色改变')
		}
	}
}
</script>

8、 发布到 npm，方便直接在项目中引用 8.1package.json 中新增一条编译为库的命令 以下我们在 scripts 中新增一条命令 npm run lib

--target: 构建目标，默认为应用模式。这里修改为 lib 启用库模式。 --dest : 输出目录，默认 dist。这里我们改成 lib [entry]: 最后一个参数为入口文件，默认为 src/App.vue。这里我们指定编译 packages/ 组件库目录。

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

执行编译库命令

npm run lib

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

• name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
• version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
• description: 描述。
• main: 入口文件，该字段需指向我们最终编译后的包文件。
• keyword：关键字，以空格分离希望用户最终搜索的词。
• author：作者
• private：是否私有，需要修改为 false 才能发布到 npm
• license： 开源协议 参考：

"name": "-ui",
  "version": "0.1.0",
  "description": "测试",
  "private": false,

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

我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。

和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

9、登录到npm上www.npmjs.com/ 9.1如果配置了淘宝镜像，先设置回npm镜像：

$ npm config set registry http://registry.npmjs.org 
复制代码

然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。

$ npm login

10、发布到npm 执行发布命令：

 npm publish

11、至此，就可以在npm官网看到我们发布的项目了

12、使用先npm install自己的组件库名字，在main.js引入并注册即可使用