vue生态虽好，但大多是重复轮子，工作中碰到大数据量tree的场景，竟然找不到一个现成的虚拟树组件，只能自己手写封装，所以我将工作中的虚拟树拿出来开源共享，该插件只创作vue3的版本

各位同学大家好，2020 angular10语法 + 实战课已完成很荣幸有许多朋友支持我2019年的ng8教程(‾◡◝)这次的教程将会把我所知道的ng语法全部教给大家，外加一个精心准备的实战，带你领略angular的编程艺术试看地址：Angular完全解读新增ngrx章节

angular是我的第一个框架，所谓先入为主，即使工作中怕是再难用上，也不会把它丢掉，而且angular用户是痛苦的，至少在国内，不论是文档、生态、百度、教程等都全面被vue和react压制，并非angular技不如人，只因google太任性。本教程也算是为推进angular做点贡献吧，这应该是前端框架中，最给力的免费教程了。

最近在用angular8仿网易云音乐的pc端，考虑出个ng相关的教程 写到歌词的时候开始直接用了黄大仙的lyric-parser，发现不太适用网易云的歌词，主要有如下几点： 网易云有中英两套歌词 很多歌曲中英文的歌词开头几行对不上 歌词的微秒位可能有3位数的(QQ音乐只有两位)，造成时间误差 其中第二点的情况比较棘手，比如英文歌...

ui参考primeNG: [链接]ts开发环境：[链接]目录 简介 本节demo和源码参考ivew tree的内部实现，完成其部分功能已实现的功能： 默认展开 默认选中 单/多选 基本思路 用户需要传入一个相对固定的数据结构，比如： {代码...} 然后根据这个data, 用递归函数渲染出dom，每个children都对应一个ul: 所以最重要的就是写出递归函...

ui参考primeNG: [链接]ts开发环境：[链接]目录 简介 参考primeNG的实现，可以hex,rgh,hsb三种颜色模式互相转换本节demo和源码 基本思路 dom分成两部分，左边的面板有一块黑白底图作为背景，右边长条也有张彩色底图作为背景 右边长条选中的颜色，设为左面板的背景色，这样左面板可跟随右侧变色 其中最重要的就算3种颜色的...

ui参考primeNG: [链接]ts开发环境：[链接]目录 简介 仿造我之前用vue封装的iv-slider, 实现了其横向的一些功能：本节demo和源码已实现的功能： 支持移动端 单/双滑块 设置步长 显示断点 自定义事件 基本思路 先看dom，在鼠标滑动时，单滑块只要不断改变left值和蓝色条的width即可，双滑块还需要另外设置蓝色调的left 滑...

ui参考primeNG: [链接]ts开发环境：[链接]目录 说明 轮播应该是初期最锻炼基础的组件，难度适中，所以也把它加到本系列已实现的功能： 自动轮播 自定义事件 无缝滚动 控制速度 demo和源码 思路 轮播最常见的思路,就是最外层dom设置overflow:hidden; 然后动态计算内层元素（slide-wrap）的width,改变其left值 这里重点说...

ui参考primeNG: [链接]ts开发环境：[链接]目录 说明 ui参考primeNG已实现的功能： 4个方向 可以hover或click触发 延迟显示或消失 demo和源码 思路 先把4个方向的tooltip样式都写好，方向用class控制，如果是hover触发，mouseenter的时候创建tooltip元素，mouseleave的时候销毁，在显示前先定好位置，我这只做了4个方向居...

ui参考primeNG: [链接]ts开发环境：[链接]目录 说明 ui参考primeNG已实现的功能： 双向滑动 禁止某条边滑动 同时支持移动、pc 支持自定义事件 其实自定义的滚动条，四个方向都能做，只是多写两个dom而已。demo和源码 思路 dom部分很简单：一个外层wrap容器包裹内容，在写两个滚动条，只要内容的宽高超过wrap写死的尺寸，...

关于typescript，本来打算写语法相关的，但发现很难写的比官网文档好，所以还是直接用吧~~教程目标： 完全掌握ts语法，熟练到足以取缔js(响应下ts刚出道的口号) 了解一些常见的，较复杂的轮子实现原理，摆脱插件的束缚

ui参考primeNG: [链接]ts开发环境：[链接]目录 简介 日历插件有很多，形态各异，但不管什么插件，只要掌握其基本实现原理，就能写出通用性很强的轮子。本节日历demo和源码已实现的功能： 不可选日期 默认选中日期 多面板 范围选择 自定义事件 基本思路 可以先把一个日历面板的静态布局写好，包括选中，非当月日期，禁止...

目录 上节： 手动配置vue-cli下 上节目录： 本节给之前配的vue-cli集成ts，让它支持ts + vue的开发。首先修改build/webpack.base.js: {代码...} 在rule里加了ts规则后，通过VueLoaderPlugin也能将其用于.vue文件 然后根目录下新建tsconfig.json: {代码...} 这是ts的配置文件，不熟的话可以复制上面的，具体选项参考官网 ...

目录 上节： 手动配置vue-cli上 上节目录： 生成环境配置需求 每次内容变化，输出的文件名hash也会变化 每次打包清理dist目录 代码分割（分割第三方库） css分割 以下都是修改build/webpack.prod.js 配置输出文件名 {代码...} 清理输出目录(dist) 安装插件：npm i clean-webpack-plugin -D {代码...} 代码分割 配置optim...

目录 上节： 编写一个plugin 本节开始用之前介绍的知识来搭建个vue开发环境，其实如果把基础篇的那些内容掌握，配合文档，完全可以自己搭建出来。 开始 新建一个空文件夹，并在文件夹下新建如下基本文件： .gitignore： {代码...} index.html： {代码...} package.json： {代码...} 然后新建src目录，并在src下新建main....

目录 上节： 编写一个loader 目录： 插件会运行在webpack的各个生命周期，我们设计一个插件时，必须确定这个插件的执行时机。webpack的生命周期很多，参考：[链接] 现在写个简单的插件，需求是在打包完成后，额外输出一个叫copyRight.txt的文件根目录下新建plugins/copy-right.plugin.js: {代码...} es6的类就不多说了，...

目录 上节： css代码分割 目录： 先改一下src/index.js： {代码...} 现在写一个简单的loader，将所有的webpack替换成其它内容，内容可通过options配置。在根目录新建loaders/replace-loader.js。 loaders/replace-loader.js： {代码...} source是打包后生成的文件，options可以拿到配置参数,这个loader会将所有webpack替...

目录 上节： 懒加载 上节目录如下： css代码分割一般用于生产环境，先修改src/index.js: {代码...} styles/index.less: {代码...} 然后npm run build,浏览器运行bundles/index.html: 现在样式是通过style标签内联在页面上的。 现在修改配置，让样式通过link标签外部引入：webpack/webpack.prod.js: {代码...} 安装mini-c...

目录 上节： 代码分割(code spliting)中 上节目录如下： 前两节代码分割只用到了splitChunks中的chunks属性，现在来看下其它属性 魔法注释 先来打个包，npm run build： 可以看到lodash打包后的名字是vendors~lodash，这其实跟src/index.js中的一段注释有关： 现在删掉这段注释再打包： 就默认用[id]命名了，这就是魔法...

目录 上节： 代码分割(code spliting)下 上节目录如下： 其实在代码分割时已经用过懒加载了，src/index.js内容如下： {代码...} npm run build看生成的文件： 这三个文件将被用于浏览器，现在运行index.html打开f12: 如果不点击页面，就不会加载lodash文件，现在点击一下页面： 页面上出现hello webpack并且加载了lodash...

目录 上节： 代码分割(code spliting)上 上节目录如下： 分割异步代码 之前src/index.js里都是同步代码： 现在来写段异步逻辑，修改src/index.js: {代码...} import()可以不加载文件并返回promise,参考：[链接] 现在来npm run build: 因为import()还只是个提案，我们得安装 @babel/plugin-syntax-dynamic-import插件才能...

目录 上节： 区分开发和生产环境 上节目录如下： 什么是代码分割 先来修改下src/index.js: {代码...} 这里引入lodash并调用join方法，然后安装下lodash: npm i lodashnpm run build, 可以看到lodash和业务代码都打包在一起了，并且有70kb: 这里就会有个问题，项目中会引入很多第三方库，这些库根业务无关，内容几乎是不...

目录 上节： 摇树优化(tree shaking) 上节目录如下： 环境介绍 webpack的mode选项有三个值：development | production | none, 分别看下不同模式下webpack的默认配置： 详细参考：[链接] 从默认配置也可以看出，开发和生产模式下的配置很不一样，所以是有必要给开发和生产环境分别写一份配置。 开始 现在webpack.config....

目录 上节： source-map 上节目录如下： 概念 官方：描述移除 JavaScript 上下文中的未引用代码。也就是希望webpack在打包时把没用到的函数删掉，最常见的就算第三方函数库：lodash,date-fns等。 新建src/js/math.js： {代码...} 这里定义了两个函数，然后修改src/index.js: {代码...} 修改webpack.config.js的mode选项...

目录 上节： babel编译es6 上节目录如下： 使用webpack编译后的代码运行在浏览器上，一旦出错，错误指向的是编译后的代码，这对调试带来极大困难，所以webpack自带devtool选项来解决这一问题。 修改webpack.config.js: {代码...} 然后npm run build,查看bundles文件夹： . source-map则会将错误指向源文件。 source-map...

目录 上节： webpack-dev-server下 上节目录如下： 基本用法 es6语法因为浏览器兼容性问题较多，本不能直接使用，但因为babel这种能降级es6+语法的工具，使得es6+已提前普及。先来写点es6语法。src/index.js: {代码...} 然后npm run build, 打开ie浏览器（谷歌实在太先进鸟....）: 明显IE不能完全失败es6语法，所以我们...

目录 上节： webpack-dev-server上 上节目录如下： 基本配置 之前devSerer的值是个空对象，用的都是默认配置，比如host:localhost, 端口:8080，这些都可以自定义修改webpack.config.js: {代码...} 然后重新npm run dev, 这时既可以用localhost:3306，也可以用电脑ip:3306访问。 publicPath 自从使用devServer后，便不像...

目录 上节：使用loader之打包样式下 首先删除bundles, 删完后目录如下： 之前每次都要 npm run build后才能看打包后的效果，在开发阶段是不可能这么干地，我们需要一个能使代码及时生效的功能。webpack自带的webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载 基本使用 修改配置：webpack.conf...

目录 上节：使用loader之打包样式上 目录结构如下： postcss {代码...} 这里就示范其中一个添加浏览器前缀的插件：autoprefixer 首先浏览器运行上节打包后的代码，即bundles/index.html查看图片样式： 现在css3没有加浏览器前缀，利用autoprefixer可轻松解决这一问题，不需要自己手动添加。首先修改配置;webpack.config....

起笔于2019-4-17，按官网文档重新整理指南顺序，用更通俗易懂的语言，从基础 - 进阶 -实战一步步深入，目标是让阅读本系列的朋友能完全掌握webpack4的用法，并能随心搭建高性能的自动化环境。