Vue cli3 库模式搭建组件库并发布到 npm的流程

下面是Vue cli3 库模式搭建组件库并发布到 npm的完整流程攻略。

1. 准备工作

1.1. 创建项目

首先，我们需要在本地创建一个 Vue 项目，可以通过 Vue CLI 3.x 提供的命令行工具来创建：

vue create my-component-library

其中，my-component-library 为你的项目名称。

1.2. 配置项目

接着，我们需要对项目进行一些配置。在项目根目录下创建 vue.config.js 文件，并添加以下内容：

const path = require('path')

module.exports = {
  // 配置打包时不生成.map文件
  productionSourceMap: false,

  // 配置打包时输出的文件夹名称
  outputDir: 'dist',

  // 配置Webpack的内部细节
  configureWebpack: {
    // 配置入口文件
    entry: './src/index.js',

    // 输出模块时的名称
    output: {
      libraryExport: 'default',
      library: 'my-component-library',
      filename: 'my-component-library.js',
      path: path.resolve(__dirname, 'dist'),
      umdNamedDefine: true,
      libraryTarget: 'umd'
    },

    // 配置使用的插件
    plugins: []
  }
}

其中，我们通过 libraryExport 设置让打包后的文件只有一个导出，默认为 export default，并设置 library 为我们组件库的名称。

1.3. 编写组件

接着，我们需要创建组件目录和文件。在 src 目录下创建 components 目录，并在其中创建相应的组件文件。

示例：创建一个 Button.vue 组件，代码如下：

<template>
  <button class="btn">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'Button'
}
</script>

<style>
.btn {
  padding: 10px 20px;
  border-radius: 4px;
  color: #fff;
  background-color: #007bff;
  border: none;
  cursor: pointer;
}
</style>

1.4. 编写入口文件

接下来，我们需要编写入口文件来导出所有的组件。在 src 目录下创建 index.js 文件，代码如下：

// 导入组件
import Button from './components/Button.vue'

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

// 定义install方法，接收Vue作为参数
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方法
  install,
  // 所有组件，必须具备install，才能使用Vue.use()
  ...components
}

2. 发布到 NPM

接下来，我们需要将我们的组件库发布到 NPM 上，供大家使用。

2.1. 注册 NPM 账号

首先，我们需要在 NPM 官网上注册一个账号，并且在本地登录该账号。可以通过 npm login 命令进行登录。

2.2. 配置 package.json

接着，我们需要在 package.json 文件中添加一些信息，比如 name, version, description, author, keywords 等。

示例：

{
  "name": "my-component-library",
  "version": "1.0.0",
  "description": "A Vue.js component library",
  "main": "dist/my-component-library.js",
  "author": "<Your Name>",
  "license": "MIT",
  "keywords": ["vue", "component", "library"],
  "repository": {
    "type": "git",
    "url": "<Git Repository URL>"
  },
  ...
}

2.3. 打包发布

最后，我们需要打包组件库，生成压缩包，并且使用 npm publish 命令发布到 NPM 上。

打包命令：

npm run build

发布命令：

npm publish --access public

至此，我们的组件库已经成功发布到 NPM 上，可以供其他人使用了。

示例

上面的步骤可以有多种不同的具体实现方式，这里举2个例子：

示例1：添加单元测试

在本地项目中安装 jest 和 @vue/test-utils：

npm i -D jest @vue/test-utils

并在 package.json 中添加以下配置：

{
  "scripts": {
    "test": "jest"
  },
  "jest": {
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      "^.+\\.js$": "babel-jest",
      ".*\\.(vue)$": "vue-jest"
    },
    "collectCoverage": true,
    "collectCoverageFrom": [
      "**/*.{js,vue}",
      "!**/node_modules/**"
    ],
    "coverageReporters": [
      "html",
      "text"
    ]
  }
}

并在 tests 目录下创建测试文件 Button.spec.js：

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

describe('Button.vue', () => {
  it('renders props.text when passed', () => {
    const text = 'Click me'
    const wrapper = mount(Button, {
      propsData: { text }
    })
    expect(wrapper.text()).toMatch(text)
  })
})

这样，我们就可以在本地运行 npm test 命令进行单元测试。

示例2：添加文档站点

在本地项目中安装 vuepress 和 @vuepress/plugin-active-header-links：

npm i -D vuepress @vuepress/plugin-active-header-links

并在项目根目录下创建 docs 目录，并在其中创建 .vuepress 目录和 config.js 文件，然后在 config.js 文件中添加以下内容：

module.exports = {
  title: 'My Component Library',
  description: 'A Vue.js component library',
  base: '/my-component-library/',
  plugins: [
    '@vuepress/active-header-links'
  ],
  themeConfig: {
    sidebar: [
      {
        title: 'Introduction',
        collapsable: false,
        children: [
          '/'
        ]
      },
      {
        title: 'Components',
        collapsable: false,
        children: [
          '/components/button'
        ]
      }
    ]
  }
}

接着，在 docs/components 目录下创建 button.md 文件：

# Button

A simple button component.

## Usage

```vue
<template>
  <Button>Click me</Button>
</template>

<script>
import { Button } from 'my-component-library'

export default {
  components: { Button }
}
</script>

```

这样，我们就可以使用 vuepress dev 命令启动本地服务器进行文档预览，使用 vuepress build 命令进行文档打包。