Vuejs前端组件化实践Radon UI
Awe
longjiawen@luojilab.com
自我介绍
龙佳文 (ID:Awe)
曾在百词斩、稀土掘金打过酱油,
对使用 Vue 开发前端应用有一些经验。
Github:hilongjw 掘金:Awe 知乎:Awee
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460529/images/2861061/QQ20160721-0_2x.png)
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460529/images/2861208/QQ20160721-1_2x.png)
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 写可复用组件?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/460529/images/2861119/vue-component.png)
在典型的 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
Vuejs前端组件化实践Radon UI
By Awe
Vuejs前端组件化实践Radon UI
- 3,796