对于发布到npm上，package.json配置是需要了解的，按照字段，把几个重要字段解释一下：
{
"name": "xxx", // 项目名称
"version": "0.0.1", // 项目版本
"author": "张三", // 作者
"description": "描述", // 描述
"main": "./dist/entry.min.js" // 入口文件
}
在这些字段里，需要注意的是入口文件和版本号这部分，在npm发布的时候，每次更新记得把version版本号加1，不然是无法发布的。而项目名，就尽量不要再更改了，也会造成发布遇到报错。
第二个比较重要的是单元测试，因为组件库是对外发布，为了保持稳定性，单元测试不可缺少，利用vue-cli生成的目录结构中包含test，所有的vue组件的单元测试和断言还有单元测试覆盖等代码均在此目录，下面介绍一个简单的断言：
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
然后随着 Vue 导入组件的选项，你可以使用许多常见的断言
// 导入 Vue.js 和组件，进行测试
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
// 这里是一些 Jasmine 2.0 的测试，你也可以使用你喜欢的任何断言库或测试工具。
describe('MyComponent', () => {
// 检查原始组件选项
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
})
// 评估原始组件选项中的函数的结果
it('sets the correct default data', () => {
expect(typeof MyComponent.data).toBe('function')
const defaultData = MyComponent.data()
expect(defaultData.message).toBe('hello!')
})
// 检查 mount 中的组件实例
it('correctly sets the message when created', () => {
const vm = new Vue(MyComponent).$mount()
expect(vm.message).toBe('bye!')
})
// 创建一个实例并检查渲染输出
it('renders the correct message', () => {
const Constructor = Vue.extend(MyComponent)
const vm = new Constructor().$mount()
expect(vm.$el.textContent).toBe('bye!')
})
})
编写可被测试的组件
很多组件的渲染输出由它的 props 决定。事实上，如果一个组件的渲染输出完全取决于它的 props，那么它会让测试变得简单，就好像断言不同参数的纯函数的返回值。看下面这个例子：
<template>
<p>{{ msg }}</p>
</template>
<script>
export default {
props: ['msg']
}
</script>
你可以在不同的 props 中，通过 propsData 选项断言它的渲染输出:
import Vue from 'vue'
import MyComponent from './MyComponent.vue'
// 挂载元素并返回已渲染的文本的工具函数
function getRenderedText (Component, propsData) {
const Constructor = Vue.extend(Component)
const vm = new Constructor({ propsData: propsData }).$mount()
return vm.$el.textContent
}
describe('MyComponent', () => {
it('renders correctly with different props', () => {
expect(getRenderedText(MyComponent, {
msg: 'Hello'
})).toBe('Hello')
expect(getRenderedText(MyComponent, {
msg: 'Bye'
})).toBe('Bye')
})
})
断言异步更新
由于 Vue 进行的情况，一些依赖 DOM 更新结果的断言必须在 Vue.nextTick 回调中进行：
// 在状态更新后检查生成的 HTML
it('updates the rendered message when vm.message updates', done => {
const vm = new Vue(MyComponent).$mount()
vm.message = 'foo'
// 在状态改变后和断言 DOM 更新前等待一刻
Vue.nextTick(() => {
expect(vm.$el.textContent).toBe('foo')
done()
})
})
单元测试对于一个组件库来说是必不可少的，其中断言库可以根据自己喜好来选择
