feat✨: 文档迁移，新增部分文档

_sidebar.md

@@ -76,11 +76,13 @@
   - [eslintrc.js](usage-config/eslintrc.js.md)
 
 - 其他工作相关
-  - [vscode代码格式化](usage-other/vscode代码格式化.md)
+  - [vscode技巧](usage-other/vscode代码格式化.md)
   - [前端渲染pdf](usage-other/前端渲染pdf.md)
   - [pdfjs本地化部署](usage-other/pdfjs本地部署.md)
   - [docker打包electron](usage-other/Linux-docker打包electron.md)
   - [git提交脚本](usage-other/gitCommit.md)
+  - [nginx基础](usage-tool/nginx基础.md)
+  - [前端缓存](usage-tool/前端缓存.md)
 
 - 使用docsify plugin
   - [使用docsify plugin](usage-tool/usage-docsify-plugin.md)
@@ -118,3 +120,6 @@
   - [19.class语法.md](usage-ECMAScript/19.class语法.md)
   - [20.Module.md](usage-ECMAScript/20.Module.md)
 
+- usage-books
+  - [写给大家看的设计书](usage-books/写给大家看的设计书.md)
+

usage-books/写给大家看的设计书.md

@@ -0,0 +1,66 @@
+# 写给大家看的设计书
+
+> 提高视觉敏锐度：收集各类案例
+
+## 设计的四大基本原则
+
+四大基本原则：亲密性、对比、重复、对齐
+
+1. 💌亲密性原则：将相关的项组织在一起（聚集为一体的一个组，成为一个视觉单元），移动这些项，使他们的物理位置相互靠近（意味着存在关联）
+   1. 若信息项/组彼此无关联，就不应存在很近的亲密性
+   2. 布局时应明确元素及其所属元素是否关联，留意无关元素
+   3. 元素存在关联/联系，视觉上就应当有关联，而孤立的元素则不应该存在关联。所以需要有意识的这样做，投入更大的力度
+   4. 有时需要做修改，才能将类似项归为一组并建立亲密性，如调整文本/突破的大小/粗细/位置
+   5. 做到应该强调什么，以及如何组织相关信息，确保读者获取到正确信息
+   6. 预留更多的空间，留下适当的空白，有助于区分非关联项的信息
+   7. 避免页面上有太多的孤立元素
+2. 💌对齐性原则：任何元素都不能随意安放，每一项都应当与页面上的某个内容存在某种视觉联系
+   1. 对齐的根本目的是使页面统一而有条理
+   2. 对齐的项，是一个更内聚的单元，有一条看不见的线连在一起
+   3. 左对齐/右对齐会让文本联系在一起的边界更明确
+   4. 在基础尚浅之前，确保相关联的组之间只使用一种对齐方式
+   5. 居中对齐会创建更正式稳重的外观，但也显得乏味
+   6. 避免使用两端对齐，避免出现难看的空隙
+   7. 若居中对齐的效果是想要表达的效果，则可以有意这样做，但可以试试和其他对齐结合起来。比如文本居中，但包含文本的块却不是居中的
+   8. 调整时，可画上对应的对齐线进行调整
+3. 💌重复性原则：设计的某些方面需要在整个作品中重复（一致性），比如字体、线条、符号、颜色、设计要素、格式、空间关系
+   1. 粗体重复，常用来控制读者的一种视觉技巧，有助于统一整个设计，将设计块的各个部分连接在一起
+   2. 重复并不表示必须重复完全相同的东西
+   3. 避免太多地重复一个元素，重复太多会让人讨厌，要注意对比的价值
+4. 💌对比性原则：页面上的不同元素之间要有对比效果，达到吸引读者的对比效果（可结合多种对比）。
+   1. 对比可以用来组织信息、清晰层级、在页面上指引读者，制造焦点。比如字体/图片的大小/样式/粗细对比，冷暖色对比，水平/垂直元素对比
+   2. 对比不能畏首畏尾的，否则就变成了冲突，比如拿12磅的字体与14磅的字体进行对比
+   3. **对比需要大胆、突出、强烈、加大力度**，否则就变成了冲突
+   4. 增加有意思的对比，最容易的就是实现字体的对比，也可利用线条、颜色、元素间隔、材质进行对比
+
+## 颜色运用
+
+1. 三原色（红，黄，蓝），互相混合得到三间色
+2. 互补色：色轮上相对立的颜色，主色和辅色
+3. 三色组：色轮彼此等距的颜色，让人舒服愉悦
+4. 分裂互补三色组（与色轮对立颜色相邻的颜色）
+5. 类似色：彼此相邻的颜色，都有相同的基础色，形成一个协调的组合
+6. 亮色、暗色
+7. 单色组合：由一种色调及其对应的多种暗色、亮色组成
+8. 色质：指某颜色的特定明暗度、深浅度、色调。若色质很接近，看上去就会模糊不清，对比太过微弱
+9. 冷色、暖色：搭配使用时，使用更多的冷色才能产生效果或形成有效的对比。冷色趋于做背景色。
+10. 颜色选择可从公司的一些官方颜色进行入手，再结合一些亮色和暗色
+11. CMYK(印刷色)、RGB(屏幕色)
+
+## 字体
+
+1. 字距调整可以创造出字间空格视觉上的连贯性
+2. 寡妇/孤儿：文字的最后一行字符数小于7个
+3. 只使用一个字体系列，而样式、大小、粗细无明显变化，就会产生**协调**关系，正式且乏味
+4. 若结合多种字体，而样式、大小、粗细无明显变化，就会产生**冲突**关系，造成一定困扰，**一定要避免冲突**
+5. 若结合多种字体，元素间彼此不同，就会出现**对比**关系
+6. 💌字体分类：
+   1. 衬线字体：有一个角度，由粗到细过渡
+   2. 无衬线字体：
+7. 💌字体对比：
+   1. 大小：对比明显，应加大力度
+   2. 粗细：对比明显，应加大力度
+   3. 结构：字体分类，不要使用同种结构的不同字体进行对比
+   4. 形状：
+   5. 方向：水平/垂直，瘦高文字与扁平文字
+   6. 颜色：冷暖色

usage-frame/CSS知识点.md

@@ -1,14 +1,56 @@
 # CSS 知识点
 
+## css api
+
+### calc函数的补充
+
+用法：calc(expression)
+
+注意：
+1. calc函数可进行加、减、乘、除运算
+2. 针对的表达式因子包括：length、angle（角度）、time、percentage、number
+   1. length: width、margin、padding、font-size、border-width、text-shadow
+   2. angle：gradient、transform 
+   3. time： s、ms
+3. +、-运算符两边必须有空白符，*、/运算符不必须
+
 ## flex布局
 
 ## grid布局
 
 ## 小特性
 
+### 单行省略
+
+```css
+overflow: hidden;
+text-overflow:ellipsis;
+white-space: nowrap;
+```
+
 ### css文字纵向排列
 
 `writing-mode`：定义了文本在水平、垂直方向上的排列方式，有以下值：
 - horizontal-tb：正常文本格式，水平方向，内容从左往右（左对齐，右对齐相反，horizontal），从上往下（top-bottom）
 - vertical-lr：垂直方向，内容从上往下（vertical），从左往右（left-right）
-- vertical-rl：垂直方向，内容从上往下（vertical），从右往左（right-left）
+- vertical-rl：垂直方向，内容从上往下（vertical），从右往左（right-left）
+
+### 多列布局
+
+多列布局：当下使用场景，菜单项从上到下、从左到右自适应布局，且每列之间需加一个分割线。
+
+解决方案：
+
+column-width：在包裹菜单项的父元素设置，定义每列的宽度
+column-count: 在包裹菜单项的父元素设置，定义列的数量，默认为auto
+column-rule：设置列之间的分割线，和border的值一致
+columns: column-width column-count（方向相反也可）
+column-gap：设置列与列之间的间隔，可为normal(1em)、长度单位、百分比
+
+注意：使用多列布局时，应当给包裹菜单项的父元素设置最大高度
+
+### 鼠标滚轮横向滚动页面
+
+## 样式风暴
+
+1. 当某个输入框/选择框不能进行操作时，赋予其disabled属性，为了避免该项表单颜色过于异常，在鼠标覆盖后，赋予其对应的样式即可，比如，赋予和输入框在readonly一样的样式。

usage-frame/Vue2知识点.md

@@ -115,4 +115,193 @@ methods: {
 
 ```
 
-<!-- tabs:end -->
+<!-- tabs:end -->
+
+## 基本用法
+
+vue获取事件对象的方式：
+1. 设置`@click='getData'`：不带括号时，默认第一个参数是事件对象
+2. 设置`@click='getData($event)'`：带括号时，需显式传入事件对象`$event`
+
+v-model原理：
+1. 使用组件时：
+   1. `v-model="value"` <=> `value="value" @input="value = $event"`
+   2. `:value.sync="value"`
+2. 组件内部：
+   1. `<input :value="value" @input="onInput">`
+   2. `props: ['value']`
+   3. 第一种方式：`onInput (e) { this.$emit('input', e.target.value)}`；第二种方式：`onInput (e) { this.$emit('update:value', e.target.value)}`
+
+
+## 组件通信
+
+组件通信的方式：
+1. 🥭父传子：
+   1. `props`：父子组件传值，父组件需绑定传入的props，子组件须在props变量中声明传入的props
+   2. `$attrs`：当父子组件传值时，子组件未使用props声明的变量，将统一归纳到`$attrs`当中
+   3. `$refs`：父子传值，父组件设置ref属性，可通过ref属性获取子组件的this(包括子组件的数据和方法)
+   4. `$children[index]`：其中$children访问的是当前组件的所有子组件，可通过索引来访问特定的子组件
+2. 🥝子传父（通过事件监听）：
+   1. `$emit`：子组件通过$emit将值传入到父组件中，父组件通过事件进行接收
+   2. 通过绑定一个函数传入到子组件中，然后执行该props触发父组件方法
+   3. 通过$parent
+3. 🍍兄弟传值：
+   1. 使用$on和$emit和$off，结合中间件bus(详情见components/getProsp)
+4. 🍊祖孙传值：
+   1. provide（祖组件使用，和data类似）和inject（孙组件使用，和props类似）；此方法仅需在祖组件中使用provide，在需要该值的后代组件中使用inject即可
+   2. $attrs（中间组件使用，通过属性形式，`v-bind='$attrs'`，这样中间组件的子代能够访问中间组件父组件的数据）和$listeners（中间组件使用，通过事件形式，`v-on='$listeners'`，这样中间组件的父代能够监听中间组件子组件触发的事件），是props和$emit的增强版；此方法需要层层使用该属性
+5. 🍋任意组件传值：
+   1. 事件总线（实现见下）
+   2. vuex
+
+注意：
+1. 组件定义的标签属性，当未使用bind绑定时，代表一个常量字符串，使用bind绑定时表示一个变量
+
+```javascript
+// 🥭
+// 1. props传值
+// 父组件
+<Child :msg='message'/>
+// 子组件
+props: ['msg']
+
+// 2. $attrs
+// 父组件
+<Child msg='message'/>
+// 子组件使用：
+this.$attrs.msg
+
+// 3. $refs
+// 父组件
+<Child ref='child'/>
+this.$refs.child.xx = 'xxx'
+this.$refs.getMethods()
+// 子组件
+data () {
+  return {
+    xx: 'hhh'
+  }
+},
+methods: {
+  getMethods () {}
+}
+
+// 🥝
+// 子传父：通过$emit
+// 父组件：
+<Child @getChild='getChild'/>
+getChild (data) {
+  // ....
+}
+// 子组件：
+this.$emit('getChild', { a: 1, b: 2 })
+
+// 🍋
+// 事件总线的实现
+class Bus {
+  constructor () {
+    this.callbacks = {}
+  }
+  $on (name, fn) {
+    // 一个事件可以有多个监听回调
+    this.callbacks[name] = this.callbacks[name] = []
+    this.callbacks[name].push(fn)
+  }
+  $emit (name, args) {
+    if (this.callbacks[name]) {
+      // 遍历监听并执行回调函数
+      this.callbacks[name].forEach(cb => cb(args))
+    }
+  }
+}
+
+// 实践中直接使用Vue的实例代替即可
+export default new Bus
+```
+
+
+## 插槽
+
+1. 🍀匿名插槽
+2. 🍅具名插槽
+3. 🍌作用域插槽：数据在子组件中，需要使用到子组件的数据时使用该插槽
+
+
+```javascript
+// 1.🍀 匿名插槽
+// 内部组件child
+<p>
+  <slot>abc</slot>
+<p>
+// 使用内部组件
+<child>def</child>
+
+// 2. 🍅具名插槽
+// 内部组件
+<p>
+  <slot>abc</slot>
+  <slot name="content"></slot>
+</p>
+// 使用内部组件
+<child>
+  <template v-slot:default>
+    具名插槽
+  </template>
+  <template v-slot:content>
+    内容content...
+  </template>
+</child>
+
+// 🍌作用域插槽
+// 内部组件
+<p>
+  <slot>abc</slot>
+  <slot name="content" :age="age"></slot>
+</p>
+
+data () {
+  return {
+    age: 45
+  }
+}
+// 使用内部组件
+<child>
+  <template v-slot:default>
+    具名插槽
+  </template>
+  <template v-slot:content="{ age }">
+    年龄：{ age }
+  </template>
+</child>
+```
+
+## 组件构建
+
+1. 在使用组件时，若不想一个个使用props，可使用$attrs继承所有属性
+   1. 防止属性在组件内部的根上也有该属性，可在组件内部使用inheriteAttrs:false（和data同级）
+2. 表单组件构建时，可使用第三方校验库
+
+## 实战
+
+> 实现一个element 表单
+
+**_需求分析_**：
+
+实现功能要点：
+- 数据收集：输入框、下拉选择框、单选框
+- 校验：单项校验（比如blur时）、全局校验（比如submit时）
+- 提交：提交事件
+
+组件设计草图：
+  ![](../images/vue/组件设计草图及其功能分解.png)
+
+**_实现_**：
+
+输入框KInput所需功能：
+- v-model
+- 通知校验
+
+输入项KFormItem所需功能：
+- 插槽
+- 展示label、error
+- 校验