YunUI

0.0.13 • Public • Published

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

Package Sidebar

Install

npm i YunUI

Weekly Downloads

10

Version

0.0.13

License

MIT

Last publish

Collaborators

  • aleksichen
  • fuokusu