打造专属UI库：零基础开发入门指南

2023-11-10 12:57:09

起航：创建UI库项目

开启创建UI库项目的旅程，我们需要vue-cli3。

安装vue-cli3
```
npm install -g @vue/cli
```
创建项目
```
vue create ui-library
```
选择 Manually select features ，然后选中 Babel , TypeScript , Router ，Vuex 和 CSS Pre-processors 。

添加必要的依赖

npm install --save-dev @vue/cli-plugin-unit-jest
npm install --save-dev @vue/cli-plugin-e2e-cypress
npm install --save-dev @vue/test-utils
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript

配置项目

在 package.json 文件中，将 vue-cli-service serve 替换为 vue-cli-service build --target lib --name ui-library，并在 vue.config.js 文件中添加以下代码：

module.exports = {
  configureWebpack: {
    entry: './src/index.ts',
    output: {
      filename: 'index.js',
      library: 'ui-library',
      libraryTarget: 'umd',
    },
  },
};

扬帆：添加UI组件

现在，我们可以开始添加UI组件了。

创建组件文件夹

在 src 文件夹下创建一个名为 components 的文件夹。

创建组件文件

在 components 文件夹下创建一个名为 Button.vue 的文件，并在其中添加以下代码：

<template>
  <button>
    <slot />
  </button>
</template>

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

<style>
button {
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  cursor: pointer;
}
</style>

乘风破浪：编写文档和测试

编写文档

在 src 文件夹下创建一个名为 docs 的文件夹，并在其中添加一个 README.md 文件，详细介绍UI库的用法。
编写测试

在 src 文件夹下创建一个名为 tests 的文件夹，并在其中添加一个 Button.spec.js 文件，编写组件测试代码。