娱票儿 公共组件库

http://192.168.101.70/

Install

npm install vision-ui --save

Usage

# es6 & webpack
// import vision.css first
import visioncss from 'vision-ui/lib/vision.css'
// import components using es6
import { Button, Icon, Label, Loading } from 'vision-ui'

Theming

step1

• create vision.scss under your scss fold as followings

@import 
    'vision-ui/components/variables',
    'my-theme.scss',
    'vision-ui/components/normalize',
    'vision-ui/components/components';

step2

• copy imgs assets into your scss folds

cp -rf node_modules/vision-ui/components/imgs scss

step3

• edit my-theme.scss

/* override variables definition in variables */

$main-color: '#343536';
$green:      '#3d3d3d';

step4

• using custom theme

// in your js file
import custom_vision_ui from 'scss/vision'
import { Button, Icon, Label, Loading } from 'vision-ui'

Demo

vision-ui-customization

Build and Publish

Dev

npm start # open page http://localhost:8000

• Component => components/COMPONENT/index.js
• Style => components/COMPONENT/style.scss
• related Demo => components/COMPONENT/demo/basic.md

Publish

npm version patch # update npm version
npm run pub # build and npm publish

Others

update icon set

• 将原始字体文件 components/fonts/icomoon.svg 上传至 Icomoon.co, 按照需求更新后，打包下载新的字体文件，替换 vision-ui 中的原始字体文件
• 运行 npm run webpack 指令, 将在 lib/fonts 目录下生成带内容 HASH 的新的字体文件，将它们更新到 静态资源库中, fonts 目录, 之后就会同步到线上去(etc. ://res.wxmovie.com/fonts/icomoon-xxxxxxx.ttf)
• 更新 components/icon/style.scss 中的字体引用地址

@font-face {
    font-family: 'ico-webfont-N';
    src: url('//res.wxmovie.com/fonts/icomoon-xxxxxxxx.woff') format('woff'),
         url('//res.wxmovie.com/fonts/icomoon-xxxxxxxx.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}