yun-ui

Overview

本文将介绍yun-ui的安装方式和基本的使用方法。

基础技术框架

1. Vue.js
2. Lerna.js
3. ECMAScript 2015
4. Webpack
5. ESLint

文件目录结构

yun-ui/						##根目录
    build/						##webpack构建配置目录
    config/						##环境配置文件目录
    demo/						##demo源文件
    dist/						##构建后的文件
        |_ demo/				##构建后的demo文件
        |_ yun/					##构建后的各个组件代码
    node_modules/				##第三方依赖包
    packages/					##lerna拆分的组件包源文件
    src/						##其他基础公共源文件
    static/						##静态资源文件（图片图标等）
        |_ demo/				##demo的静态资源文件
        |_ yun/					##yun-ui组件的静态资源文件
    test/						##测试代码源文件
    .babelrc					##babel配置文件
    .editorconfig				##编辑器配置文件
    .eslintignore				##eslint忽略检查的文件
    .eslintrc					##eslint配置文件
    .gitignore					##git忽略文件的配置
    index.html					##总入口文件
    lerna.json					##lerna配置文件
    package.json				##依赖包声明
    README.md					##read me

Getting Started

I. Install

npm安装

推荐使用npm的方式安装，它能更好地与Webpack等构建工具结合使用。

npm install yun-ui

CDN (TODO)

可以从静态资源服务器获取最新的资源文件。

II. Start

引入Yun UI

你可以引入整个yun-ui组件库，或者根据需要引入部分组件。

完整引入

完整引入yun-ui后，在以后的引用中，不需再引入组件及样式，可直接在模板中使用或调用方法 在你的工程目录入口js文件中，写入以下内容：

import Vue from 'vue'
/* 引入组件库js文件 */
import yun from 'yun-ui'
/* 引入组件库全部css */
import 'yun-ui/dist/yun/index.css'
 
Vue.use(yun)
 
new Vue({
    // vue options
})

组件中使用，如在example.vue中使用yun-ui:

<!-- 在vue的template中直接引用即可 -->
<template>
    <div>
        <y-button></y-button>
        <y-badge></y-badge>
    </div>
</template>

按需引入

你可以只安装你需要的组件。这里以安装yun-ui的button组件为例：

npm install yun-ui --save

安装后在所需的.vue文件中进行声明和使用，或在入口js文件中声明：

<template>
    <div>
        <y-button>test</y-button>
    </div>
</template>

<script>
import Vue from 'vue'
import {Button} from 'yun-ui'
import 'yun-ui/dist/yun/Button/index.css'
Vue.component(Button.name,Button)
</script>

贡献组件

I. 开发

目前在package.json中声明了多个脚本模式，可以通过npm run xxx的方式进行运行，各个命令启动服务如下：

npm run dev:demo
启动demo的本地开发模式
npm run dev
启动组件库的本地开发模式
npm publish
发布更改到npm

II. 测试

npm run unit
执行单元测试
npm test
执行所有测试

III. 构建

构建demo页面：

npm run build:demo

demo构建后的文件在dist/demo目录下。

构建完整组件库代码：

npm run build

完整组件库构建后的文件在dist/yun目录下。

IV. 发布 请提交Pull Request。

代码规范

请参考 ESLint standard 规范进行书写，并执行npm run lint进行代码检查。

Tips

如果你使用的是Webstorm，请在运行npm install之前，在Preferences | Editor | File Types | Ignore files and folders中增加node_modules，避免循环依赖造成的死循环。