妙味优质远程课：《使用 TypeScript 实现完整的 vueUI 框架》

我们为什么需要学习组件开发？组件开发在工作起到什么样的作用？

基于一些已有的 UI 库（比如 ElementUI，Antd）进行项目的开发是现在前端开发的通用模式，但是再好的 UI 框架也只是封装提供了一些通用的组件，对于一些实际项目这些 UI 库或多或少有些组件是缺失的，不能完全满足我们日常开发的需求，又或者已有的一些组件其功能并不能完完全全的就能满足我们的需求，这个时候就需要对这些组件进行二次开发，或者扩展自己的组件。所以对于组件的封装扩展就很有必要了，通过这次远程课的学习，我们将掌握项目开发中自定义组件的开发与封装，老板再也不用担心我的工作了……这也是作为前端技能的一次质的提升！

课程关键字：

Vue组件 \ vue-cli \ npm \ webpack \ 组件实现与使用 \ TypeScript \ i18n 国际化语言包 \ 组件库 \ 测试和统计 \ 打包发布…

课程案例：

Alert 警告 \ Badge 标记 \ Breadcrumb 面包屑 \ Button 按钮 \ Card 卡片 \ Carousel 走马灯 \ Cascader 级联选择器 \ Checkbox 多选框 \ Collapse 折叠面板 \ Color 色彩 \ ColorPicker 颜色选择器 \ Container 布局容器 \ DatePicker 日期选择器 \ DateTimePicker 日期时间选择器 \ Dialog 对话框 \ Dropdown 下拉菜单 \ Form 表单 \ Icon 图标 \ Input 输入框 \ InputNumber 计数器 \ Layout 布局 \ Loading 加载 \ Message 消息提示 \ MessageBox 弹框 \ NavMenu 导航菜单 \ Notification 通知 \ Pagination 分页 \ Popover 弹出框 \ Progress 进度条 \ Radio 单选框 \ Rate 评分 \ Select 选择器 \ Slider 滑块 \ Steps 步骤条 \ Switch 开关 \ Table 表格 \ Tabs 标签页 \ Tag 标签 \ TimePicker 时间选择器 \ Tooltip 文字提示 \ Transfer 穿梭框 \ Tree 树形控件 \ Typography 字体 \ Upload 上传

2018 年终岁末，如此诚意满满的超值远程直播课，只为奉献给热爱学习的你！

适用人群

html、css、javascript基础（基础语法、DOM、BOM、EVENT）

测测你的学前基础

优惠信息：

课程服务：

开班时间： 2018年11月中下旬（满30人开班）

上课安排：

每周一、二、四、五 （20：00 - 22：00）上课

课时：

32 节课（约 2 个月）

课程咨询：

咨询QQ：2852509867 QQ：2852509868

微信咨询：miaov-class

案例展示（部分）

Cascader 级联选择器

Tree 树形控件

DatePicker 日期选择器

Upload 上传

更多案例

课程大纲

• Vue组件基础

    - 基础组件知识点
    - template
    - 组件注册Vue.component('component-name',option={})
    - 组件的复用
    - 组件中的属性 （data是重点，是一个函数）
    - 数据传递（父传子，子传父）
    - 自定义事件
    - 插槽slot
    - 动态组件<component is=""></component>
    - is 避免嵌套错误
    - 全局和局部注册

• vue-cli使用

    - vue-cli命令简介
    - vue-cli组成（package.json）
    - 文件目录划分
    - 组件实现(单页面组件)

• npm

    - npm基础命令
    - npm配置文件 package.json
    - npm发布

• webpack配置脚手架

    - webpack和webpack-cli安装
    - webpack.config.js文件，基础配置
    - entry
    - output
    - loader
    - plugins
    - vue-loader的配置
    - vue-loader
    - vue-template-compiler
    - VueLoaderPlugin（这个插件是必须的，它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /\.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块）
    - css-loader、style-loader（注意配置顺序）
    - url-loader
    - html-loader
    - jsx???这个你自己看用不用
    - 优化设置
    - babel-loader
    - 后缀省略
    - 别名
    - 忽略文件配置

• 组件实现与使用（内容持续更新中…）

    - 组件的基本实现
    - 渲染函数
    - createElement
    - 虚拟DOM
    - 插件use和install

• TypeScript（内容持续更新中…）

  一款好的（功能强大的）编辑器会给我们的项目开发带来多少帮助不言而喻，同时语言也是如此，TypeScript - 现代前端开发不能忽视的存在，也是现在项目开发中的利器，使我们的代码更安全、更健壮。而且许多的框架本身都有 TypeScript 的身影，Vue3+ 即将来临，而 TypeScript 作为 Vue3+ 的底层语言，我们似乎更加有理由相信它就是前端语言的未来方向……，在这次的组件库课程中，我们将会完全使用 TypeScript 来进行构建。

• 组件库（内容持续更新中…）

    - 基础组件
    - Layout 布局
    - Container 布局容器
    - Color 色彩
    - Typography 字体
    - Icon 图标
    - Button 按钮
    - 表单
    - Radio 单选框
    - Checkbox 多选框
    - Input 输入框
    - InputNumber 计数器
    - Select 选择器
    - Cascader 级联选择器
    - Switch 开关
    - Slider 滑块
    - TimePicker 时间选择器
    - DatePicker 日期选择器
    - 练习：DateTimePicker 日期时间选择器
    - Upload 上传
    - Rate 评分
    - ColorPicker 颜色选择器（*）
    - Transfer 穿梭框
    - Form 表单
    - 消息通知
    - Alert 警告
    - Loading 加载
    - Message 消息提示
    - MessageBox 弹框
    - Notification 通知
    - 导航
    - NavMenu 导航菜单
    - Tabs 标签页
    - Breadcrumb 面包屑
    - Dropdown 下拉菜单
    - Steps 步骤条
    - 数据处理
    - Badge 标记
    - Pagination 分页
    - Tree 树形控件
    - Progress 进度条
    - Tag 标签
    - Table 表格
    - 其他
    - Dialog 对话框
    - Tooltip 文字提示
    - Popover 弹出框
    - Card 卡片
    - Carousel 走马灯
    - Collapse 折叠面板

i18n - 国际化语言包（内容持续更新中…）

程序的就是世界的，也许有一天我们的代码也会被世界上其他的国家或其他语言的项目使用，那么怎样才能让我们的库支持不同国家的不同语言呢，i18n - 国际化标准的使用

测试和统计（内容持续更新中…）

为了保证代码的可用性、可靠性，我们需要对代码进行多方位的各种测试，靠人工？不可能，这会死人的。作为程序员，我们需要的是自动化。

    - chai：断言测试。正确与否靠什么 - 断言！
    - mocha：单元测试。测试从最小单元开始！
    - karma：自动化测试。靠人？不，我们是程序员！！！
    - coveralls：测试代码覆盖率。自动化也是人写的，测试是否全面也是需要测试的！

打包发布（内容持续更新中…）

辛苦完成的项目作品，必须真实的发布到线上，才是最终能够检验以及可以分享给他人欣赏的作品。因此，只有经历了这个阶段，才是真正缔造作品的最终环节。

课程咨询：

咨询QQ：2852509867 QQ：2852509868

微信咨询：miaov-class