使用 Vue cli 3.0 构建自定义组件库的方法

使用 Vue cli 3.0 构建自定义组件库的方法可以通过以下步骤实现：

1. 创建一个新的 Vue 项目

使用 Vue cli 3.0 创建一个新项目：

vue create my-library

2. 配置组件库

在 "src" 目录下创建一个 "components" 目录，所有组件都将存放在这个目录中。为了确保组件可以在其他项目中使用，我们需要将这个项目打包成库。

引入库的方法有多种，其中最便于使用的是 Rollup。安装 Rollup：

npm install --save-dev rollup rollup-plugin-babel rollup-plugin-node-resolve rollup-plugin-terser rollup-plugin-vue

在项目根目录下创建一个 "rollup.config.js" 文件并将以下代码添加到文件中：

import vue from 'rollup-plugin-vue'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import resolve from 'rollup-plugin-node-resolve'

const path = require('path')

const name = 'MyLibrary' // 你的库的名称

const plugins = [
  resolve({
    extensions: ['.js', '.vue'],
  }),
  vue({
    css: true, // 当该选项为 true 时，Rollup 会将组件的样式和 CSS 提取到单独的 CSS 文件中
    compileTemplate: true, // 当该选项为 true 时，组件模板将被编译
  }),
  babel({
    exclude: 'node_modules/**',
    runtimeHelpers: true,
  }),
  terser(),
]

export default {
  input: 'src/index.js', // 入口文件
  output: [
    {
      file: './dist/my-library.js', // 输出文件路径
      format: 'esm', // 输出格式
      name,
      exports: 'named',
      sourcemap: true,
    },
  ],
  plugins,
}

创建一个 "src/index.js" 入口文件，在这个文件中导入和导出你的所有组件：

import MyComponent from './components/MyComponent.vue'

export {
  MyComponent,
  // 导出其他组件
}

3. 配置打包命令

添加一个打包命令，将我们的组件打包成库并且输出到 "./dist" 目录下：

{
  "scripts": {
    "build": "rollup -c"
  }
}

添加 "main" 和 "module" 字段到 "package.json" 文件中，以配置库的入口：

{
  "main": "dist/my-library.js",
  "module": "dist/my-library.esm.js"
}

4. 在其他项目中使用

在其他项目中，安装你的组件库：

npm install my-library

在项目中使用你的组件：

import { MyComponent } from 'my-library'

到此使用 Vue cli 3.0 构建自定义组件库的步骤就介绍完了。

示例1

以一个具体的组件 Box.vue 为例，其源文件在 "./src/components/Box.vue" 目录下，代码如下：

<template>
  <div class="box">
    <slot>
      <p>我是默认插槽</p>
    </slot>
  </div>
</template>

<script>
export default {}
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: gray;
}
</style>

此时的目录结构是这样的：

.
├── src
│   ├── components
│   │   └── Box.vue
│   ├── App.vue
│   └── main.js
├── public
│   └── index.html
└── rollup.config.js

执行打包命令：

npm run build

生成目录结构：

.
├── dist
│   └── my-library.esm.js
├── src
│   ├── components
│   │   └── Box.vue
│   ├── App.vue
│   └── main.js
├── public
│   └── index.html
├── rollup.config.js
└── package.json

你会发现生成的 my-library.esm.js 里已经包含了你的组件内容。

示例2

如果你需要在项目外引入一些 Vue 框架，可以通过 Vue.config.js 文件，如下：

// Vue.config.js

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
      }
    }
  }
}

然后在 rollup.config.js 文件里添加 plugins 到 inputOptions：

import vue from 'rollup-plugin-vue'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import resolve from 'rollup-plugin-node-resolve'

const path = require('path')

const name = 'MyLibrary' // 你的库的名称

const plugins = [
  resolve({
    extensions: ['.js', '.vue'],
  }),
  vue({
    css: true, // 当该选项为 true 时，Rollup 会将组件的样式和 CSS 提取到单独的 CSS 文件中
    compileTemplate: true, // 当该选项为 true 时，组件模板将被编译
  }),
  babel({
    exclude: 'node_modules/**',
    runtimeHelpers: true,
  }),
  terser(),
]

const inputOptions = {
  input: 'src/index.js', // 入口文件
  plugins,
  external: ['vue'],//添加 external 选项
  output: [
    {
      file: './dist/my-library.js', // 输出文件路径
      format: 'umd', // 输出格式,目标是使用 CDN 引入，使用 UMD 格式是比较合适的
      name,
      exports: 'named',
      sourcemap: true,
      globals: {
        vue: 'Vue' // 加入自己的 library 使用的依赖
      }
    },
  ],
}

export default inputOptions;

到此，你已经可以愉快地在任意项目中使用你自己的组件库了！