从零开始开发一个 Vue 组件库并发布到 npm

1. 设置项目

首先，创建一个新的 Node.js 项目并安装 Vue CLI。

npx create-vue-app my-component-library

安装完成后，进入项目目录并运行以下命令来安装必要的依赖项：

npm install --save-dev @vue/cli-plugin-component

2. 构建组件

现在，您可以开始构建您的组件了。在 src/components 目录中创建一个新文件，例如 Button.vue。

<template>
  <button>{{ text }}</button>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      default: 'Button'
    }
  }
}
</script>

这个组件很简单，它只是一个带有文本标签的按钮。您可以根据需要添加更多功能和样式。

3. 编写测试

为了确保您的组件在不同情况下都能正常工作，编写测试非常重要。您可以使用 Vue Test Utils 来编写测试。

在 tests/unit 目录中创建一个新文件，例如 Button.spec.js。

import { mount } from '@vue/test-utils'
import Button from '../src/components/Button.vue'

describe('Button', () => {
  it('renders correctly', () => {
    const wrapper = mount(Button)
    expect(wrapper.text()).toBe('Button')
  })

  it('renders custom text', () => {
    const wrapper = mount(Button, {
      propsData: {
        text: 'Custom Text'
      }
    })
    expect(wrapper.text()).toBe('Custom Text')
  })
})

这个测试用例确保了组件在没有传递任何属性的情况下会渲染默认文本，并在传递自定义文本时会渲染自定义文本。

4. 发布组件库

当您对组件库感到满意后，就可以将其发布到 npm 了。首先，您需要创建一个 package.json 文件。

{
  "name": "my-component-library",
  "version": "1.0.0",
  "description": "A collection of Vue components.",
  "main": "index.js",
  "scripts": {
    "build": "vue-cli-service build --target lib --name my-component-library",
    "test": "vue-cli-service test --coverage",
    "lint": "eslint --ext .js,.vue src"
  },
  "keywords": ["vue.js", "component library", "ui components"],
  "author": "Your Name",
  "license": "MIT"
}

然后，您需要在 src 目录中创建一个 index.js 文件，该文件将导出您的组件。

import Button from './components/Button.vue'

export {
  Button
}

最后，您可以使用以下命令发布您的组件库：

npm publish

结论

现在，您已经成功地创建并发布了一个 Vue 组件库。您可以使用它来构建自己的应用程序，或将其与他人共享。