yun-ui

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

    Install

    npm i yun-ui

    DownloadsWeekly Downloads

    7

    Version

    0.1.6-rc1

    License

    MIT

    Unpacked Size

    1.16 MB

    Total Files

    323

    Last publish

    Collaborators

    • joveyzheng
    • smildlzj
    • mailhap