Get unlimited public & private packages + package-based permissions with npm Pro.Get started »

nono-ui

0.0.8 • Public • Published

Nono-ui

Vue 组件库

Build Status

介绍

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

文档

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

联系方式

SOALIN228@163.com

学习笔记

组件

button

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

icon

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

button-group

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

input

  1. 传入error 属性来进行文字的提示,使用template 包成一个整体
  2. 在组件上直接写disabled 相当于:disabled=true
  3. 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 是一个测试运行器,它可以呼起浏览器,加载测试脚本,然后运行测试用例,它需要mochasinon-chai ,引入mocha 可以使用describeit, 引入sinon 可以使用sinon.fake() ,引入chai 可以使用expect ,使用sinon-chai 可以引入sinonchai 并使其可以混合使用

集成测试

使用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 发布

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

Keywords

Install

npm i nono-ui

DownloadsWeekly Downloads

0

Version

0.0.8

License

MIT

Unpacked Size

3.32 MB

Total Files

107

Last publish

Collaborators

  • avatar