note.md

1. ant-design-pro介绍
2. 自定义文本webpack和babel配置
3. 设计一个高扩展的路由
4. 实现一个动态改变的页面布局

心得 虽然这次课程是很基础的搭建项目，但是动起手来发现有很多以前没用过，但是在后台管理项目中用到的部分，比如路由中的RenderRouterView辅助组件，其实就是一个router-link的跳转，以前做项目只会复制粘贴，当真要是碰到几个这种问题，真的是会思考很久； 还学习了按照需求导入组件，从12M大小直接变成了4M大小，对网页性能的优化很大，通过使用babel-plugin-import这个组件，可以避免每次都要引入对应组件，会根据需求自动引入组件，单独引入组件一定要记得引入css； 视频里面还用了运维后台中的NProgress组件，也教了使用方式，以后会在这些‘基础问题’上多花功夫，能够不依赖网络，自己写一个项目，能跑得动并且没有问题，这是搭建项目的必修课。此外，作者还教会了我如何去查找问题，通过官方的issue，去搜索答案，或许是一种不错的方式。

1. 动态的布局 使用a-layout通过路由完成主题的配置
2. 将路由与菜单结合 单文件组件递归 通过监听事件来改变 心得： 本次课程主要讲的是使用antdesign将一个项目的基本结构简单搭起来，通过递归的方式将路由与菜单栏整合。课程除了路由结合布局之外主要是一些基础用法。 在不熟悉项目结构或者是没怎么看过页面结构的清空下，一直以为页面侧边栏是自动生成的，这次自己把布局从头到尾的代码写了一遍。页面的布局是通过给最外层路由引入布局组件并且通过router-view展示，原先我是把布局引入App.vue再使用，属于比较笨而且不规范的写法，但是发现当App.vue和layouts同时存在时，两边的代码都会影响页面展示，原因应该是一个为核心，一个为包裹的组件。通过改变路由的方式，可以给页面主题色、布局位置等通过自己写的表单双向绑定数据再通过路由直接修改。 平时不怎么接触的的底层搭建，这次上手比较困难，在路由的递归部分还是比较难理解。通过使用antd的递归组件，来配合路由显示，才明白一直写的路由就是参考这里的，路由的显示隐藏都是自定义属性，包括图标展示之类的，以前不清楚他的实现就是自己定义的方法完成循环，然后与导航栏结合生成的菜单，在不同项目看到的一些用途一样但是命名却不同的属性，以前以为是固定的名称。 总体上差不多了解页面基本结构，布局与路由的结合，项目需要的一些组件，以及如果取通过双向绑定动态配置布局，相信自己可以有了搭建项目的基本功，剩下的只要交给普通的页面就好了。

11.19

课程知识树

1. 使用两种方式来控制比较精细的权限
2. 如何在组件中使用其他第三方库

心得

1. 介绍了通过函数式组件和自定义指令来对比较精细的组件进行权限控制的过程（按钮，单个表单等等，图1，图2）， 函数式组件应用需要在组件外围包裹一层组件

<Authorized :authority="['admin']">
  <setting-drawer></setting-drawer>
</Authorized>

自定义指令比较方便

<a-icon v-auth="['admin']"/>

但是自定义指令只会在页面进来那一次才会触发，如果碰到权限动态更改的地方，不太适合使用，但是函数式组件不会出现这个问题，能获取到用户的权限，动态更改显示状态，只能说在不同场合使用不同的方法。 2. 主要是通过引入echarts来讲解如何使用第三方库，学会了在页面中打断点进行调试，找到问题之后如何去解决，使用了常见的resize，lodash方法库。在引入echarts时，会出现宽度错误的情况，原因就是在页面布局还没完成的时候就已经决定了宽度（图3），通过resize来监听组件宽高，使得组件宽度变化，又发现resize会触发多次，引入了lodash工具库的debounce来进行防抖，避免触发多次。 3. 监听组件传值，原来也不经过思考直接使用的深度监听，不知道这会耗费大量的性能，以后再碰到，会通过...解构，然后重新赋值，来让vue监听到变化，减少性能损耗。

render函数式组件

插件式注册指令 指令式权限弊端 只有第一次才会控制，权限动态更改会出现问题

组件式 要每一处用组件包裹，频繁使用

深度监听，消耗性能 可以手动改地址，会监听到