Vue3 组件库的环境配置搭建过程

当我们想要使用 Vue3 开发组件库时，需要进行环境配置。

环境配置过程

以下是 Vue3 组件库的环境配置的完整攻略。

安装 Vue CLI

Vue CLI 是一个工具，用于快速创建 Vue 应用程序。使用它可以很方便地创建一个新的 Vue 组件库项目。我们可以通过 npm 安装 Vue CLI：

npm install -g @vue/cli

生成 Vue 应用程序

安装了 Vue CLI 后，我们就可以使用它来创建一个新的 Vue 应用程序。可以通过以下命令创建：

vue create my-component-lib

以上命令将会创建一个名为 my-component-lib 的新项目，并且自动安装一些必要的依赖。

配置 TypeScript

在创建项目时，我们需要选择一个 preset。可以选择 Manually select features，这个 preset 包含了 Babel、TypeScript 和其他一些有用的工具。我们需要勾选 TypeScript 选项，以添加 TypeScript 支持。

修改 tsconfig.json 文件，在 compilerOptions 中增加如下配置项：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "dist/types",
    "outDir": "dist/umd",
    "umdNamedDefine": true,
    "esModuleInterop": true
  }
}

这样做的目的是为了确保 TypeScript 构建产生的 JavaScript 文件可以用在不同的环境中，包括 CommonJS、AMD 和 UMD。

开发组件并打包

编写组件源代码。这里以一个最简单的 "HelloWorld" 组件为例：

// src/HelloWorld.vue
<template>
  <div>Hello {{ name }}!</div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'

  export default defineComponent({
    name: 'HelloWorld',
    props: {
      name: {
        type: String,
        default: 'World',
      },
    },
  })
</script>

<style>
  div {
    font-size: 2rem;
    font-weight: bold;
  }
</style>

接下来，我们需要打包这个组件。可以使用 build 命令来完成：

vue-cli-service build --target lib --name my-component-lib ./src/index.ts

这个命令实际上执行了一个 webpack 构建过程，生成了一个包含了所有组件和依赖项的单独 JavaScript 文件。

示例说明

下面是两个示例，帮助更好地理解以上搭建组件库的过程。

示例 1

创建一个新的 Vue 组件库项目，项目名为 "my-component-lib"，并为其添加 TypeScript 支持。

vue create my-component-lib

创建好项目后，在命令行中输入以下命令，安装并启用 TypeScript 支持：

vue add typescript

现在，组件的源代码就可以使用 TypeScript 了。我们可以在 src/components 目录下创建一个名为 MyComponent.vue 的组件，并编写如下源代码：

<template>
  <div>
    <h2>{{ title }}</h2>
  </div>
</template>

<script lang="ts">
  import { defineComponent, PropType } from 'vue'

  export default defineComponent({
    name: 'MyComponent',
    props: {
      title: {
        type: String as PropType<string>,
        required: true,
      },
    },
  })
</script>

<style>
  h2 {
    color: red;
  }
</style>

这是一个非常简单的 Vue 组件，只有一个 title 属性。我们可以在 src/App.vue 中将其导入，以在运行时查看它是如何工作的。

<template>
  <div id="app">
    <MyComponent title="Hello, world!" />
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue'
  import MyComponent from './components/MyComponent.vue'

  export default defineComponent({
    name: 'App',
    components: {
      MyComponent,
    },
  })
</script>

<style>
  #app {
    text-align: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

现在，在命令行中运行以下命令，可以生成一个可用于生产的 JavaScript 文件：

npm run build

示例 2

在刚才创建的 my-component-lib 项目中，我们可以继续添加一些自定义的组件，并打包它们。

可以在 src 目录下创建一个 index.ts 文件，用于导出所有组件：

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

export default {
  MyComponent,
}

现在，我们可以使用以下命令将所有组件打包为一个单独的 JavaScript 文件：

vue-cli-service build --target lib --name my-component-lib ./src/index.ts

这个命令将生成一个名为 my-component-lib.umd.js 的文件，其中包含了所有组件和依赖项。在引入这个文件后，我们就可以在任何 Vue 应用程序中使用这些组件了。