iView 实战系列教程(21课时)

iView 实战系列教程(21课时)

21 讲 · 1059 人学习

限时优惠:¥249.00 ¥299.00 立省 50 元

课程收获

  • 通过知识点结合案例学习,熟练掌握 iView 的最佳实践和使用技巧
  • 了解 iView 常用组件的开发思路、模块设计
  • 掌握 Vue+iView 的搭配使用方法,提高开发50%的效率

适用人群

  • 对 Vue.js 有过了解和使用经验的前端或后端工程师
  • 使用或打算使用 iView 的用户
  • 想提升开发效率、学习 Vue 开发技巧的开发者

课程简介

【 iView 作者亲自授课和答疑,掌握最专业的知识 】
【 目前已得到1016位学员认可,星级口碑课程 】
【 每小节支持试学,感受课程内容,满意再购买 】

限时特惠¥159.00,仅限8月25-28日!极少优惠机会,建议购买 ✈✈✈

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。解决了开发者的组件复用和维护烦恼,从而开发效率可以提升50%!

从正式发布起,获得了 Vue 生态圈内的一致好评。在 GitHub 上,截止目前已收获 Star 23.5k 和 157个贡献者,npm 每月有100+ 个安装。目前阿里、百度、腾讯、今日头条、京东、滴滴出行、美团、新浪等大厂都在使用。

本课程由 iView 作者 Aresn 老师本人亲授,主要介绍 iView 的实战及剖析,在业务中使用 iView 的最佳实践和技巧,以及对 iView 组件的开发思路、模块设计。(PS:加入我们,可以随时向作者本人提问。)

1. iView 实战教程之配置篇

  • 全局配置
  • 自定义主题配置
  • 国际化(多语言)配置
  • iview-loader 用法及配置

2. iView 实战教程之导航、路由、鉴权篇

  • 3.0 的导航菜单跳转方式
  • 根据当前路由自动选中对应的菜单
  • 在路由级别对页面做鉴权
  • 根据不同平台动态路由不同组件

3. iView 实战教程之布局篇(一)

  • Grid 的基本用法
  • Grid 的使用技巧
  • Grid 响应式布局用法

4. iView 实战教程之布局篇(二)

  • Layout 各组件讲解及源码分析
  • 常见的布局模式分析和详细配置
  • 实战:利用 Layout 及其它组件,完成后台框架搭建

5. iView 实战教程之布局篇(三)

  • 实战 1:后台框架 Dashboard 页的搭建
  • 实战 2:后台框架设置页面(含响应式)
  • 要求:尽可能多的利用 iView 内置的组件;尽可能少的写 CSS 样式和 JS 逻辑

6. iView 实战教程之表格 Table 篇(一)

  • 服务端分页及自定义序号
  • 服务端分页并排序、过滤
  • 前端分页并排序、过滤

7. iView 实战教程之表格 Table 篇(二)

  • 可编辑单元格
  • 可编辑行

8. iView 实战教程之表格 Table 篇(三)

  • 在外部进行表格的搜索、过滤、隐藏某列的操作
  • 作业:将搜索、过滤的逻辑,修改为前端完成

9. iView 实战教程之表格 Table 篇(四)

  • 初始化时应用排序,并持久化存储
  • 初始化时应用过滤,并持久化存储
  • 动态修改任意单元格 class
  • Table 常用 API 讲解:minWidth、maxWidth、tooltip

10. iView 实战教程之表格 Table 篇(五)

  • 自定义列模板的三种方法:

    1. 纯 Render 实现
    2. Render 一个组件实现
    3. slot-scope 实现
  • 使用作用域插槽(slot-scope)代替 Render 的使用方法

11. iView 实战教程之表单 Form 篇(一)

  • Form 表单验证的常用验证规则讲解
  • Form 设置表单验证规则的多种方式
  • iView 表单组件的 element-id 属性和 FormItem 的 label-for 属性用法

12. iView 实战教程之表单 Form 篇(二)

  • Form 表单组件的联动用法
  • 第三方表单组件(自定义的表单组件)与 iView Form 的验证集成
  • Form 同步提交(提交到后端)表单的用法

13. iView 实战教程之表单 Form 篇(三)

  • 巧用元素的禁用属性
  • 新建和修改共用一个 Form 组件的最佳实践(多个循环)
  • 不使用 Form 自带的验证,自行验证数据

14. iView 实战教程之组件用法精讲(一)

  • 传组件 Upload—手动上传
  • 上传组件 Upload—与七牛云等 CDN 的结合
  • 上传组件 Upload—选择文件后,上传前显示缩略图

15. iView 实战教程之组件用法精讲(二)

  • Tabs 标签页关闭前二次确认
  • Tree 组件点击项目标题可以展开/收起的方法
  • 在某个元素中展开 Drawer 组件(非全屏)
  • 模态框组件 Modal—异步提交不关闭

16. iView 实战教程之组件用法精讲(三)

  • DatePicker 设置仅当月日期可选
  • 多个 DatePicker 联动的用法
  • 使用 Select 组件封装一个省市区联动选择器

17. iView 实战教程之技巧篇(一)

  • iView 内置工具函数—递归寻找组件
  • iView 内置工具函数—深度拷贝(deepCopy)
  • 其它常用内置工具函数

18. iView 实战教程之技巧篇(二)

  • 一种跨组件通信方法(provide / inject)
  • iView 内置指令—clickoutside
  • iView 内置指令—transfer-dom(含全局配置)
  • iView 内置工具—兼容 SSR 的事件绑定

19. iView 实战教程之技巧篇(三)

  • iView 内置混合—模拟 dispatch & broadcast 的 emitter.js
  • iView 内置组件—折叠组件 CollapseTransition

20. iView 实战教程之进阶篇(一)

  • Table 组件使用 slot-scope 替代 Render 函数用法及实现原理(iView 3.2.0 以上版本)
  • Table 组件使用 draggable 属性拖拽排序的用法及实现原理(iView 3.3.0 以上版本)
  • iView 近期版本新功能详解

21. iView 实战教程之进阶篇(二)

  • Vue.js 重要的 API 精讲

22. 答疑课 1(赠送)

  • 课程结束后,针对大家的问题,以直播形式开展答疑课 1

23. 答疑课 2(赠送)

  • 课程结束后,针对大家的问题,以直播形式开展答疑课 2

讲师介绍

梁灏,昵称 Aresn,基于 Vue.js 的开源 UI 组件库 — iView 的作者。曾担任大数据公司 TalkingData 前端架构师。畅销书籍《Vue.js实战》的作者(Vue.js 作者尤雨溪作序,销量4万+册)。于 2019 年创办了北京视图更新科技有限公司,开始自由、全职地维护 iView 及相关软件。

购买须知:本课程为虚拟产品,一经购买,概不退款

购买须知:
1、本课程为虚拟产品,一经购买,概不退款(讲师特别声明除外)
2、在使用过程中,遇到任何问题,请邮件联系:pr@sifou.com

版权声明:讲者在本产品上发表的全部原创内容(包括但不限于文字、视频、图片等)著作权均归讲师本人所有。未经讲师授权许可,观众用户不得以任何载体或形式使用讲师的内容。

4.5 31条评价

人如其名(´༎ຶ · 11月10日

能否告知,如何修改 每个页面的title

小柒 · 7月6日

老师,啥时候能出点iview-admin的课程,尤其是侧边导航路由配置及与点击侧边导航跳转到对应路由内容

hw123 · 2019-07-22

老师, this.$refs.form.validate valid 为true 后能对 this.$refs.form 中某个formItem 设置error 不, 还是说需要单独 对每个formitem 设置error 双向绑定

naclcr · 2019-07-03

能不能安排一下,讲解根据权限,设置不同路由,并且根据获取到的权限,调整页面按钮的功能呢。

hanhailin · 2019-04-29

talkingcoder是谁的?

梅文 · 2019-04-22

小程序打不开,一直转圈中。。。。。。。。。

Aresn · 2019-04-22

联系一下客服看看

kakukyowu · 2019-04-20

有个问题请教:
vue + typescript + iview(3.4.0)
在main.ts 中配置多语言 (i18n+iview)
Vue.locale = () => {};
这句总是报错,如果使用js的话是没问题的,但是换成ts就是不行。
这个问题有办法解决吗?

陈毅文 · 2019-04-15

安装 vue-cli-plugin-iview 出现错误提示 The "path" argument must be of type string. Received type undefined 【vue-cil 3.6.1,3.6.0可创建项目,但无法安装,3.5.5无法创建项目】

万俟逍 · 2019-03-26

有没有QQ群或者微信群呢?有了问题去哪里提啊?

Aresn · 2019-04-15

联系管理员 talkingcoder

lc_qq · 2019-02-19

加群怎么不同意呢?

Aresn · 2019-04-15

联系管理员 talkingcoder