YunUI

Mobile UI Components Library for Vue.js by yunzhijia.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
211Oct 30, 2018Nov 21, 2016Minified + gzip package size for YunUI in KB

Readme

yun-ui

npm package Build Status Dependencies

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-uibutton组件为例:

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,避免循环依赖造成的死循环。

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.