本文介绍自己从0构建一个前端造轮子项目--用Vue写的UI框架，项目地址：https://github.com/zyqq/wheel，可以从 commit 记录查看具体构建构成，欢迎star

项目初始化

git init初始化 git 仓库，创建对应的README.md文档

创建证书

github 上点击创建新文件

创建证书

输入LICENSE，会自动出现创建证书模板的按钮

证书模板

证书

其中最宽松的就是 MIT 许可证书，因此选择MIT，之后就一直按绿色确认按钮，最后记得删除证书分支就好了。

初始化配置

运行npm init初始化项目配置，添加.gitignore文件忽视node_modules文件夹

项目代码编写

实现基本button的具体代码可看此条commit记录https://github.com/zyqq/wheel/commit/fb2af056e42e59f126bb7b2e2950388e98e101d0，将button组件改为单文件组件用到了parcel打包工具，npm i -D parcel-bundler在开发者依赖中添加parcel
记得在packge.json中添加以下配置指定Vue安装包

{
  // ...
  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }
}

之后运行npx parcel index.html则会自动添加启动Vue单文件组件所需依赖

加入单元测试

测试有三个至关重要的名词，BDD（Behavior Driven Develop）行为驱动开发，TDD(Test Driven Develop)测试驱动开发以及Assert断言，先采用比较简单地chai测试库进行单元测试，npm i -D chai chai-spies,在app.js中加入单元测试代码

// 单元测试
try {
  import chai from 'chai'
  import spies from 'chai-spies'
  chai.use(spies)
  const expect = chai.expect
  {
    // 测试传入icon
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
      propsData: {
        icon: 'setting'
      }
    })
    vm.$mount()
    let useElement = vm.$el.querySelector('use')
    let href = useElement.getAttribute('xlink:href')
    expect(href).to.eq('#i-setting')
    vm.$el.remove()
    vm.$destroy()
  }
  {
    // 测试loading与icon同时传入
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
      propsData: {
        icon: 'setting',
        loading: true
      }
    })
    vm.$mount()
    let useElement = vm.$el.querySelector('use')
    let href = useElement.getAttribute('xlink:href')
    expect(href).to.eq('#i-loading')
    vm.$el.remove()
    vm.$destroy()
  }
  {
    // 测试传入iconPosition
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
      propsData: {
        icon: 'setting',
        iconPosition: 'right'
      }
    })
    // 挂载到具体实例上才能取到css样式
    const div = document.createElement('div')
    document.body.appendChild(div)
    vm.$mount(div)
    let useElement = vm.$el.querySelector('svg')
    let { order } = window.getComputedStyle(useElement)
    expect(order).to.eq("2")
    // 销毁测试实例，防止内存泄露
    vm.$el.remove()
    vm.$destroy()
  }
  
  {
    // 测试 click 事件
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
      propsData: {
        icon: 'setting',
      }
    })
    vm.$mount()
    let spy = chai.spy(() => {})
    vm.$on('click', spy)
    // 希望 click 事件被触发
    let button = vm.$el
    button.click()
    expect(spy).to.have.been.called()
    vm.$el.remove()
    vm.$destroy()
  }
} catch (error) {
  window.errors = [error]
} finally {
  window.errors && window.errors.forEach((error) => {
    console.error(error.message)
  })
}

持续更新中