Awe

longjiawen@luojilab.com

自我介绍

龙佳文 （ID：Awe）

曾在百词斩、稀土掘金打过酱油，

对使用 Vue 开发前端应用有一些经验。

Github：hilongjw      掘金：Awe      知乎：Awee

Vue.js是⼀个MVVM前端框架

为什么选择Vue.js

• Vue.js官方文档完整、清晰
• API设计简洁
• 性能优异
• 完善的组件化支持
• 开发工具链完善

前端组件化？

    前端组件化并不是一个新的概念，从古老的EXT js、YUI到现在基于的ng、react、Vue的各种组件UI框架，一直有组件化的新实践。

     有人说前端圈就是爱重复造轮子，一方面是的因为前端不仅仅是机器逻辑，它还涉及到UI、UE，没有也不太可能会有统治整个前端的组件库/框架，另一方面是因为前端圈向来开放，开源已经是传统。

为什么需要组件化？

   在实际项目的开发中发现会有很多地方的代码甚至UI的交互是重复的，这种情况在大型应用中这个问题会越发明显。

    我们使用的Vuejs最引以为豪也它的组件（Component）功能，所以可以利用来它来封装可重用代码，来打造我们的RadonUI。

为什么需要组件化？

   在实际项目的开发中发现会有很多地方的代码甚至UI的交互是重复的，这种情况在大型应用中这个问题会越发明显。

    我们使用的Vuejs最引以为豪也它的组件（Component）功能，所以可以利用来它来封装可重用代码，来打造我们的RadonUI。

提高开发效率

降低了维护成本

怎么用 Vue 写可复用组件？

在典型的 Vue.js 项目中，我们会把界面拆分为多个小组件，每个组件在同一地方封装它的 CSS 样式，模板和 JavaScript 定义。

 Vue单文件组件

怎么用 Vue 写可复用组件？

使用props在父子组件中传递数据

<!--parent.vue-->
<template>
    <div>
        <child :some="some"><child>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                some: {
                    key: 'value'
                }
            }
        }
    }
</script>

<!--child.vue-->
<template>
    <p>{{some.key}}<p>
</template>
<script>
    export default {
        props: {
            some: {
                type: Object,
                default () {
                    return {
                        key: 'default value'
                    }
                }
            }
        }
    }
</script>

怎么用 Vue 写可复用组件？

使用 slot 分发内容

<!--button.vue-->
<template>
    <button class="rd-btn">
        <span class="rd-btn-loading ion-load-a" v-if="loading"></span>
        <span>
            <slot></slot>
        </span>
    </button>
</template>
<script>
    export default {
        props: {
            loading: {
                type: Boolean,
                default () {
                    return false
                }
            }
        }
    }
</script>

<!--button.vue-->
<template>
    <div>
        <cov-button :loading="true">
            <span>这个span会出现在slot</span>
        </cov-button>
    </div>
</template>
<script>
    import covButton from './button.vue'
    export default {
        components: {
            covButton
        }
    }
</script>

web 应用需要哪些组件?

    我们参考了国内外一些优秀的React、Vue的组件库(ant design、Material-ui等)并结合我们现有的业务总结了下面几个主要组件集合

• AudioPlayer 音频播放
• Button 按钮
• ButtonGroup 按钮组
• DropButton 下拉
• Card 卡片
• CardGroup 卡片组
• Chart 图表
• Icon 图标
• Table 表格
• Tag 标签

• Textfield 文本输入框
• NumberInput 数字输入框
• Checkbox 复选框
• Radio 单选框
• Switch 开关
• Slider 滑动输入
• Select 选择器
• Cascader 级联选择器
• Editable 可编辑文本

• Alert 警告提示
• Modal 对话框
• Notification 通知
• Progress 进度条
• Timeline 时间线
• Tooltip 对话框
• Spin 加载中
• Upload 上传

• Breadcrumb 面包屑
• Pagination 分页

Basic

Form

Common

Navigation

如何使用Radon UI?

npm i radon-ui --save-dev

npm 安装

如何使用Radon UI?

单一组件的引用

<template>
    <rd-text :textfiled="from.username"></rd-text>
    <rd-text :textfiled="from.password"></rd-text>
    <rd-button>登陆<rd-button>
</template>
<script>
// once & root only
import '/radon-ui/dist/static/css/dist.css'

import {
    rdButton,
    rdText
} from 'radon/index'

export default {
    data () {
        return {
            form: {
                username: {
                    value: dashUser.get('username'),
                    placeHolder: '用户名',
                    state: 'default',
                    tip: ''
                },
                password: {
                    value: '',
                    placeHolder: '密码',
                    state: 'default',
                    tip: ''
                }
            }
        }
    },
    components: {
        rdButton,
        rdText
    },
    methods: {
        ...
    }
}
</script>

如何使用Radon UI?

全局组件的用法

<!--App.vue-->
<template>
    <div class="dash-root">
        <nav-header></nav-header>
        <dash-container>
            <router-view></router-view>
        </dash-container>
        <dash-footer></dash-footer>
        <rd-modal :modal="modal"></rd-modal>
        <rd-notification :notifications="Notifications"></rd-notification>
    </div>
</template>

<script>
import 'radon-ui/dist/static/css/dist.css'
import {
    rdModal,
    rdNotification
} from 'radon-ui/index'

export default {
    data () {
        return {
            Notifications: [],
            modal: {
                show: false,
                title: '',
                content: '',
                cancel: () => {},
                confirm: () => {}
            }
        }
    },
    created () {
        this.$Radon.setRoot(this)
    },
    components: {
        rdModal,
        rdNotification
    }
}
</script>

// main.js
import RadonInstall from 'radon-ui/install'
RadonInstall(Vue)

如何使用Radon UI?

全局组件的用法

<script>
// any child components
export default {
    methods: {
        loginAction () {
            return this.$Notification.warning('登陆失败, 请再次尝试', '', 3000)
        },
        netError () {
            this.$Modal.create('网络错误', '无法连接到服务器', () => {
                console.log('confirmed')
            }, () => {
                console.log('canceled')
            })
        }
    }
}
</script>

如何使用Radon UI?

全局组件的用法

<script>
// any child components
export default {
    methods: {
        loginAction () {
            return this.$Notification.warning('登陆失败, 请再次尝试', '', 3000)
        },
        netError () {
            this.$Modal.create('网络错误', '无法连接到服务器', () => {
                console.log('confirmed')
            }, () => {
                console.log('canceled')
            })
        }
    }
}
</script>

Thanks