element-plus 源码学习：配置组件模板

这是我参与「掘金日新计划 · 8 月更文挑战」的第20天，点击查看活动详情

组件模板生成

第13次提交添加了 gc.sh 脚本，用于生成组件模板。

dd01db13f feat/template-generator - Add `gc.sh` as template generator - Add `gc` as npm script to generate boilerplate

组件模板将会简化开发步骤，同时使项目解构更加规范。

在window下执行sh文件需要使用bash终端，如果你已经安装了 Git 那么可以使用Git Bash Here, 在 vscode 中可以使用如下图所示的方式打开bash终端：

如果我们要开发一个 divider 组件：

Administrator@DESKTOP-I3N2QR6 MINGW64 /d/Github/element-plus ((dd01db13f...))
$ sh scripts/gc.sh divider

gc.sh 将生成这些文件：

更改gc.sh文件，以适应自己的项目，比如生成的组件名称会以 El 开头，将其改为Tl：

模块名称可以在这个地方更改：

组件测试 JTest

发布组件前，需要对组件进行测试。第22次提交，在模板中添加了测试文件夹。

bf022e386 feat: add tests dir to template

检出查看做了哪些更改，首先查看 package.json 文件，添加了测试相关的依赖，首先需要安装一下这些依赖。

看一下作者们写的测试用例：

// packages\button__tests__\button.spec.ts

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

const AXIOM = 'Rem is the best girl'
const COMMON_CONFIG = {
  global: {
    provide: {
      elForm: {},
      elFormItem: {},
    }
  }
}

describe('Button.vue', () => {
  test('render text', () => {
    const instance = mount(Button, {
      slots: {
        default: AXIOM
      },
      ...COMMON_CONFIG,
    })
    expect(instance.text()).toEqual(AXIOM)
  })
  
  test('handle click', async () => {
    const instance = mount(Button, {
      slots: {
        default: AXIOM
      },
      ...COMMON_CONFIG,
    })
    await instance.trigger('click')
    expect(instance.emitted()).toBeDefined()
    
  })
})

瞧见没，Rem is the best girl ，哈哈。

执行测试用例：

// package.json

"scripts": {
    "test": "jest",
  },

很好都通过了：

Storybook

Storybook 是一个用于 UI 开发的工具。在早期的尝试中 element-plus 曾尝试使用 Storybook 作为组件预览工具。后来使用vuePress作为官网的构建工具