Nono-ui NPM | npm.io

Nono-ui

Vue 组件库

介绍

这是我在学习 Vue 过程中做的一个 UI 框架，如果你觉得有用，请点star

文档

官网： https://soalin228.github.io/Nono/

联系方式

SOALIN228@163.com

学习笔记

组件

button

使用slot 进行值的传递
使用icon 插入图标
使用animation 实现loading 动画
元素对齐使用vertical-align: middle;
使用flex 布局，通过order 属性控制图标显示位置
在组件上监听事件，会默认进入组件内部，需要在组件中使用@click="$emit('click')" 将事件再传递出去

icon

使用SVG 图标
接收在调用处传递的参数，显示不同的图标
`` 一定要写在"" 中，不然打包可能会有坑

button-group

使用slot 插入button 实现按钮组
元素对齐使用vertical-align: middle;
使用结构选择器:first-child 设置元素圆角
:hover 时添加z-index 实现凸起
使用:not(:first-child) 控制margin-left 解决边框重叠

input

传入error 属性来进行文字的提示，使用template 包成一个整体
在组件上直接写disabled 相当于:disabled=true
v-model 通过@input="$emit('input', $event.target.value)" 、:value="value" 实现

测试

npm i -D chai chai-spies

自动化测试

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 文件夹下为每个组件写单元测试xxx.test.js

Karma 是一个测试运行器，它可以呼起浏览器，加载测试脚本，然后运行测试用例，它需要mocha和sinon-chai ,引入mocha 可以使用describe 和 it, 引入sinon 可以使用sinon.fake() ，引入chai 可以使用expect ,使用sinon-chai 可以引入sinon 和chai 并使其可以混合使用

集成测试

使用Travis CI，添加.travis.yml 文件，代码在每次提交时，会在node 不同版本上跑测试用例

// .travis.yml
language: node_js
node_js:
  - "8"
  - "9"
  - "10"
addons:
  chrome: stable
sudo: required
before_script:
  - "sudo chown root /opt/google/chrome/chrome-sandbox"
  - "sudo chmod 4755 /opt/google/chrome/chrome-sandbox"