Vue 造轮子

My UI 官网

用户体验

用户体验的要素
我们应该优先考虑可用性、再考虑易用性和美观。

开发流程

sketch.app的好处是贴近前端可直接导出css

设计约定

1. 有反馈
2. 一致性
3. 可预测

配色工具 Kuler

项目初始化

设置LICENSE 选MIT

安装parcel

用./nde_modules/.bin/parcel打开index.html
需要主要的是，每次执行记得删除cache或者使用--no-cache不用上一次的缓存
parcel报错，需要添加vue alias属性，将vue替换成完整版

定义默认样式

定义css样式变量，方便后面引用

封装button icon button-group

icon
icon接受参数icon(icon名字)自动引入对应的icon

button
利用Vue中的插槽(solt),button使接受icon的名字/icon的位置等参数，自动引入对应的icon,以及将它放置在什么位置(css通过class控制其位置，如果你非要通过v-if也是可以的)

单元测试

BDD (Behavior Driven Development) 行为驱动开发 特点:用自然语言描述需求，注重逻辑
TDD (Test Driven Development) 测试驱动开发 特点:注重输出结果
Assert 断言，根据主观意识判断是否正确

console.assert(typeof '1'==='string')//如果结果错误，会抛出一个错误

chai

chai.js 是一套包含TDD(测试驱动开发)/BDD(行为驱动开发)/Assert的断言库。

安装

npm i -D chai
第一个单元测试用例 检测函数我们需要用到chai-spise
安装chai spies 监听点击后的函数
npm i -D spies

import chai, { expect } from 'chai'
import spies from 'chai-spies'
chai.use(spies)
{
    //mock
    const Constructor = Vue.extend(Button)
    const vm = new Constructor({
        propsData: {
            icon: 'setting'
        }
    })
    vm.$mount()
    let spy = chai.spy(function () { console.log('被调用了') })
    vm.$on('click', spy)
    vm.$el.click()
    expect(spy).to.have.been.called()//期待这个函数被调用了
    vm.$destroy()//测试完后从内存删除
}

自动化测试

安装
karma 卡玛是一个测试运行器，他可以呼起浏览器
mocha 是一个单元测试框架/库，它可以用来写测试用例
sinon 是一个spy/stub/mock库，用以辅助测试(使用后才能理解)

npm i -D karma karma-chrome-launcher karma-mocha karma-sinon-chai mocha sinon sinon-chai karma-chai karma-chai-spies

创建karma.conf.js 并且配置
创建test/button.test.js 并且配置
packge.json里面找到scripts并改写scripts

"scripts": {
     "dev-test": "parcel watch test/* --no-cache & karma start",
     "test": "parcel build test/* --no-minify && karma start --single-run"
 },

持续集成（Travis）

注冊travis账号
添加并配.travis.yml文件置
每次提交代码后就可以自动帮我们测试了

发布自己的包

检测代码
注册npm 账号
npm adduser 添加账号 (如果失败请切换镜像)

使用npm link提升开发效率（yarn 也可以 yarn link注册 yarn link package_name使用包）

封装各个组件

参考github提交记录
希望对你有所帮助 commit history