Nono-ui

Vue 组件库

介绍

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

文档

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

联系方式

SOALIN228@163.com

学习笔记

组件

icon

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

button

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

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" 实现

row

设置间隔，需要在父组件上设置marginLeft 和marginRight 负x px，在col 上设置paddingLeft 和paddingRight x px，就可以实现间隔问题
vue 生命周期在父子组件中是父create，子create，子mounted，父mounted，这样在row 的mounted中就可以将gutter 传给col
```
mounted () {
  this.$children.forEach((vm) => {
  	vm.gutter = this.gutter
  })
}
```

col

span="8" 传递的是字符串8，要使用bind 设置为数字，在props 接收String和Number两种类型
使用scss 的函数做1 - 24 的栅格布局，不用写24个class
@media 从小尺寸写到大尺寸，因为下面的class 比前面的class 优先级高，这样大尺寸可以覆盖小尺寸

测试

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"

npm 发布

将源从淘宝切回来
npm adduser 登录
在packject.json 中修改版本信息，指定入口文件
npm publish 发布版本

SOALIN228/Nono

Nono-ui

介绍

文档

联系方式

学习笔记

组件

测试

npm 发布