前端高效开发框架技术（疫情会不会大暴发听听钟南山怎么说）

蔚落 2023-07-02 10:25 103阅读 0赞

（给达达前端加星标，提升前端技能）

![format_png][]

不用怕

https://v.qq.com/x/cover/mzc002004ceupu5/y3058p0xcr6.html

内容有点多，也请你静下来，慢阅读，今后多多关照。

** Vue框架基础知识**

mvx模式介绍，x这里代表是未知数的意思，那么有多少mvx模式要我们了解的呢？mvc模式，mvvm模式，相互之间的区别。

让我们说一说mvc模式，这模式很常见，mvc模式，mvc模式是移动最广泛的软件架构之一，把应用程序分为三部分，分别为模型，Model，视图view，以及控制器controller。

现在的我们常说的是Mvvm模式，这也是面试官会问，什么是Mvvm模式的呢，mvvm模式是把mvc模式的controller改成viewmodel。

view的变化会自动更新viewmodel，viewmodel的变化也会自动同步到view上显示。

![format_png 1][]

web前端开发阶段，原生代码开发阶段，使用HTML，css，JavaScript代码进行前端开发，学习web原生的优点，就是学习成本低，容易上手，不好的就是代码结构混乱，代码冗余，浏览器兼容性不成熟，不利于分工合作。

代码库开发的阶段，就是使用成熟的开源扩展库进行前端的开发，优点就是开发快速，浏览器兼容性良好，缺点就是视图层和数据层混合在一起，不利于团队分工合作。

框架开发阶段，采用前端mvc模式或者是Mvvm模式开发，优点就是代码分层，便于团队合作，便于后续代码维护，缺点就是学习成本高，框架更新迭代快。

vue框架的学习，vue是一套构建用户界面的渐进式框架，vue只关注图层，采用自底向上增量开发的设计。

<table> 
 <tbody> 
 <tr> 
 <td>模板</td> 
 <td>主要内容</td> 
 </tr> 
 <tr> 
 <td>Vue基础知识</td> 
 <td>Vue框架基础语法、Vue开发工具</td> 
 </tr> 
 <tr> 
 <td>Vue组件</td> 
 <td>Vue组件、Vue模块化开发</td> 
 </tr> 
 <tr> 
 <td>Vue工程化开发</td> 
 <td>npm/yarn和webpack开发工具、Vue-cli开发工具、单文件工具</td> 
 </tr> 
 <tr> 
 <td>Node.js基础和Axios网络请求</td> 
 <td>Node.js构建Web服务器、Axios发送ajax请求、postman网络调试工具</td> 
 </tr> 
 <tr> 
 <td>Vue-Router路由</td> 
 <td>单页面应用SPA、Vue-Router实现路由机制</td> 
 </tr> 
 <tr> 
 <td>Vuex状态管理</td> 
 <td>Vuex状态管理、本地存储</td> 
 </tr> 
 <tr> 
 <td>Vue-UI库</td> 
 <td>Vue中的UI库</td> 
 </tr> 
 </tbody> 
</table>

三大框架的对比

<table> 
 <tbody> 
 <tr> 
 <td> </td> 
 <td>Angular</td> 
 <td>React</td> 
 <td>Vue</td> 
 </tr> 
 <tr> 
 <td>发布时间</td> 
 <td>2009年</td> 
 <td>2013年</td> 
 <td>2014年</td> 
 </tr> 
 <tr> 
 <td>维护者</td> 
 <td>谷歌</td> 
 <td>Facebook</td> 
 <td>尤雨溪</td> 
 </tr> 
 <tr> 
 <td>视图引擎</td> 
 <td>HTML</td> 
 <td>JSX</td> 
 <td>HTML</td> 
 </tr> 
 <tr> 
 <td>学习曲线</td> 
 <td>陡峭</td> 
 <td>较复杂</td> 
 <td>简单</td> 
 </tr> 
 <tr> 
 <td>大小</td> 
 <td>500K+</td> 
 <td>130K+</td> 
 <td>50K+</td> 
 </tr> 
 <tr> 
 <td>功能复杂度</td> 
 <td>完善</td> 
 <td>完善</td> 
 <td>简单</td> 
 </tr> 
 <tr> 
 <td>文档</td> 
 <td>英文</td> 
 <td>英文</td> 
 <td>中文</td> 
 </tr> 
 <tr> 
 <td>应用场景</td> 
 <td>大型复杂应用</td> 
 <td>中大型应用、移动跨平台开发</td> 
 <td>中小型轻量级应用</td> 
 </tr> 
 </tbody> 
</table>

如何使用我们的vue.js框架

安装，在vue.js的官网上下载vue.min.js并用script标签引入，cdn方式引入vue.js文件，vue推荐使用地址。

![format_png 2][]

第一个vue项目实例

![format_png 3][]

**实例对象**

vue实例对象就是vue框架的一个核心。

配置项el，把vue实例挂载到dom元素上，然后通过id绑定到html元素；配置项data，就是数据对象，vue实例的数据，注意了，数据不要与methods中的方法重名；配置项methods，事件对象，包含事件所有触发的函数，注意了，方法名不要与data中的数据重名了；配置项computed，计算属性；配置项watch，表示监听器；配置项directives，表示自定义指令。

配置项钩子(hook)函数，hook（钩子）函数，不同生命周期引发的动作，路由钩子函数，路由组件在不同状态时触发。

components表示组件容器；配置项template，定义模板，可以是字符串，也可以是“\#”选择器，props配置项，用于接收父组件的数据；router配置项，路由，store配置项，vuex状态。

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>vm.$el</td> 
 <td>Vue 实例使用的根 DOM 元素</td> 
 </tr> 
 <tr> 
 <td>vm.$data</td> 
 <td>Vue的data配置项</td> 
 </tr> 
 <tr> 
 <td>vm.$options</td> 
 <td>用于当前 Vue 实例的初始化选项</td> 
 </tr> 
 <tr> 
 <td>vm.$props</td> 
 <td>当前组件接收到的 props 对象</td> 
 </tr> 
 <tr> 
 <td>vm.$parent</td> 
 <td>父实例（如果当前实例有的话）</td> 
 </tr> 
 <tr> 
 <td>vm.$root</td> 
 <td>当前组件树的根 Vue 实例</td> 
 </tr> 
 <tr> 
 <td>vm.$children</td> 
 <td>当前实例的直接子组件</td> 
 </tr> 
 <tr> 
 <td>vm.$refs</td> 
 <td>原生DOM元素或子组件注册引用信息</td> 
 </tr> 
 <tr> 
 <td>vm.$slots</td> 
 <td>用来访问被插槽分发的内容</td> 
 </tr> 
 <tr> 
 <td>vm.$router</td> 
 <td>全局路由（vue-router插件）</td> 
 </tr> 
 <tr> 
 <td>vm.$store</td> 
 <td>vuex 状态对象（vuex插件）</td> 
 </tr> 
 <tr> 
 <td>方法</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>vm.$emit()</td> 
 <td>子组件可以使用 $emit 触发父组件的自定义事件</td> 
 </tr> 
 <tr> 
 <td>vm.$set()</td> 
 <td>Vue.set的别名&lt;br /&gt; 设置对象的属性， 这个方法主要用于避开 Vue 不能检测属性被添加的限制</td> 
 </tr> 
 <tr> 
 <td>vm.$watch</td> 
 <td>侦听数据变化</td> 
 </tr> 
 <tr> 
 <td>vm.$on()</td> 
 <td>监听当前实例上的自定义事件。事件可以由vm.$emit触发。回调函数会接收所有传入事件触发函数的额外参数。</td> 
 </tr> 
 <tr> 
 <td>vm.$mount</td> 
 <td>可以使用 vm.$mount()&nbsp;手动挂载（Vue 实例化时没有 el 选项）</td> 
 </tr> 
 <tr> 
 <td>vm.$destroy</td> 
 <td>完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。&lt;br /&gt; 触发 beforeDestroy&nbsp;和 destroyed&nbsp;的钩子。</td> 
 </tr> 
 <tr> 
 <td>属性绑定指令</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>v-bind</td> 
 <td>动态改变dom标签上的属性&lt;br /&gt;v-bind :class="" 简写 :class=""</td> 
 </tr> 
 </tbody> 
</table>

![format_png 4][]

生命周期，vue实例从开始创建，初始化数据，编译模板，挂载dom，渲染到更新到渲染，到卸载等一系列过程。

总结一下，四个阶段，创建，挂载，更新，销毁。

使用New Vue()来创建vue实例；接下是beforeCreate调用beforeCreate生命周期钩子，observe data开始监控data对象数据变化，init events，vue初始化内部事件，created调用created生命周期钩子，has"el"option?实例中是否含有"el"选项，有调用vm.$mount手动挂载一个未挂载的实例时，has "template" option?是否含有template选项。

![format_png 5][]

![format_png 6][]

模板语法

![format_png 7][]

**计算属性**

计算属性，顾名思义就是通过其他变量计算得来的另一个属性。

计算属性具有缓存，多次访问计算属性会立即返回之前的计算结果，而不是再次计算后的结果。

computed中的函数，不能传参。

![format_png 8][]

**methods方法**

vue对象中可以使用methods属性，用来编写自定义函数，使用方法是methods属性由一系列json方法对组成。

![format_png 9][]

渲染

循环数组：

![format_png 10][]

循环对象

![format_png 11][]

数组的更新检查

push()，pop()，shift()，unshift()，splice()，sort()，reverse()为变异方法可触发视图更新。

filter()，concat()，slice()为非变异方法，不触发视图更新，他们可以返回新数组，用新数组替换旧数组，就可以刷新视图。

![format_png 12][]

条件渲染

<table> 
 <tbody> 
 <tr> 
 <td>指令</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>v-if</td> 
 <td>根据其后表达式的bool值进行判断是否渲染该元素</td> 
 </tr> 
 <tr> 
 <td>v-else-if</td> 
 <td>v-if&nbsp;的“else-if 块”，可以连续使用</td> 
 </tr> 
 <tr> 
 <td>v-else</td> 
 <td>表示 v-if&nbsp;的“else 块”&lt;br /&gt;v-else&nbsp;元素必须紧跟在带 v-if&nbsp;或者 v-else-if&nbsp;的元素的后面，否则它将不会被识别。</td> 
 </tr> 
 </tbody> 
</table>

![format_png 13][]

事件与表单

事件处理，需要绑定事件处理函数，在Vue中绑定事件处理，直接在HTML元素上使用v-on指令绑定即可。

<table> 
 <tbody> 
 <tr> 
 <td>指令</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>v-on:click</td> 
 <td>简写: @click=""click、mouseover、mouseout、mouseup、mousedown、dblclick 、contextmenu、keydown、keyup等</td> 
 </tr> 
 </tbody> 
</table>

![format_png 14][]

事件对象，事件处理过程中会触发event事件对象，这个event对象代表当前事件的状态，比如事件触发时的HTML元素是什么，event.target来得到触发事件的HTML元素，可以得到事件的类型。

event.type得到当前的事件类型。

<table> 
 <tbody> 
 <tr> 
 <td>属性和方法</td> 
 <td>描述</td> 
 </tr> 
 <tr> 
 <td>event.type</td> 
 <td>触发的事件类型</td> 
 </tr> 
 <tr> 
 <td>event.target</td> 
 <td>触发事件的HTML元素</td> 
 </tr> 
 <tr> 
 <td>event.preventDefault( )</td> 
 <td>阻止事件的默认行为</td> 
 </tr> 
 <tr> 
 <td>event.stopPropagation( )</td> 
 <td>阻止事件冒泡</td> 
 </tr> 
 </tbody> 
</table>

借助事件对象实现一个事件委托机制，从而提高我们应用程序的一个性能，什么是事件委托机制？事件委托机制在列表渲染过程中，大部分都是v-for渲染过程中，借助event事件对象，在父元素之上绑定事件处理函数而不是在子元素之上绑定事件处理函数。

![format_png 15][]

表单处理

<table> 
 <tbody> 
 <tr> 
 <td>指令</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>v-model</td> 
 <td>双向数据绑定支持标签：&lt;input&gt; &lt;textarea&gt; &lt;select&gt;</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td>表单事件</td> 
 <td>触发控件</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>focus</td> 
 <td>input框、textarea框</td> 
 <td>输入框获取到输入焦点</td> 
 </tr> 
 <tr> 
 <td>blur</td> 
 <td>input框、textarea框</td> 
 <td>输入框失去焦点</td> 
 </tr> 
 <tr> 
 <td>click</td> 
 <td>单选框、多选框</td> 
 <td>选中某一个单选项或复选框</td> 
 </tr> 
 <tr> 
 <td>change</td> 
 <td>下拉列表</td> 
 <td>切换下拉列表项</td> 
 </tr> 
 <tr> 
 <td>submit</td> 
 <td>提交按钮</td> 
 <td>单击提交按钮</td> 
 </tr> 
 </tbody> 
</table>

vue组件，组件是vue.js的功能之一，目的是为了可重用性高，减少重复性的开发，在结构上相近或相同的代码进行封装，成为一个高度可复用的部件称为组件。

<table> 
 <tbody> 
 <tr> 
 <td>选项</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>模板（template）</td> 
 <td>模板声明了数据和最终展现给用户的DOM之间的映射关系。</td> 
 </tr> 
 <tr> 
 <td>初始数据（data）</td> 
 <td>一个组件的初始数据状态。对于可以复用的组件来说，通常是私有的状态。</td> 
 </tr> 
 <tr> 
 <td>接受的外部参数（props）</td> 
 <td>组件之间通过参数来进行数据的传递和共享。参数默认是单向绑定（由下往上），但也可以显示声明为双向绑定。</td> 
 </tr> 
 <tr> 
 <td>方法（methods）</td> 
 <td>对数据的改动操作一般都在组件的方法内进行。可以通过v-on指令将用户输入事件和组件方法进行绑定。</td> 
 </tr> 
 <tr> 
 <td>生命周期钩子函数(lifecycle hooks）</td> 
 <td>一个组件会触发多个生命周期钩子函数，比如created、attached、destroyed等。在这些钩子函数中，我们可以封装一些自定义的逻辑。和传统的MVC相比，这可以理解为Controller的逻辑被分散到了这些钩子函数中。</td> 
 </tr> 
 </tbody> 
</table>

vue组件的使用，先注册后使用，vue组件可以在全局注册，也可以在局部注册。

创建组件

![format_png 16][]

注册组件，使用组件，注意事项

> 注意事项
> 
> 模板：使用id绑定
> 
> 命名：组件名不要是html标准标签名，如果用驼峰定义，html中引用组件时，改为短横线命名

data属性表名vue组件可用的响应式数据，是vue实例的数据对象；vue将会递归data的属性转变为getter/setter，让data的属性能够响应数据变化，对象必须是纯粹的对象，浏览器api创建的原生对象，原型上的属性会被忽略。

data访问原始数据对象，Vue实例代理了data对象上所有的属性。

props传递数据，父组件和子组件之间的数据通信。

**事件通信**

父组件和子组件之间的数据操作，是通过Props属性和$emit()方法来实现的

**props，声明位置在子组件中声明，属性值，在组件模板中绑定。**

**$emit，子组件向父组件传值，使用$emit触发父组件方法。**

注意，props属性名如果用驼峰定义，html标签中改为短横线命名，$emit自定义事件不能使用驼峰，短横线命名。

如果prop是一个对象或数组，子组件内部改变它会影响父组件的状态。

**非父子通信**

本质上通过派发事件-》监听事件从而更改值。

[Vue全家桶之组件化开发][Vue]

[Vue插槽详解 | 什么是插槽？][Vue_ _]

[来吧！一文彻底搞定Vue组件！][Vue 1]

**组件类型**

![format_png 17][]

动态组件，主要是在使用过程中，可能需要动态的切换组件的显示内容。

多个组件主要是使用同一个挂载点。

递归组件，在组件内部可以嵌套调用其他组件，甚至可以递归地调用当前自身组件。

**vue工程化工具**

node.js是一个让JavaScript运行在服务端的开发平台，它让JavaScript成为和PHP，python，perl，ruby等服务器端语言平起平坐的脚本语言。node.js是一个基于chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快，易于扩展的网络应用，node.js使用hijack驱动，非阻塞i/o模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

![format_png 18][]

node.js使用module模块去划分不同的功能，以简化应用的开发。

![format_png 19][]

引入了Http类库，并且对http类库的引用存放在http变量中。

Node.js环境安装

https://nodejs.org/en/download/

![format_png 20][]

升级npm版本

![format_png 21][]

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>name</td> 
 <td>包名</td> 
 </tr> 
 <tr> 
 <td>version</td> 
 <td>包的版本号。</td> 
 </tr> 
 <tr> 
 <td>description</td> 
 <td>包的描述。</td> 
 </tr> 
 <tr> 
 <td>homepage</td> 
 <td>包的官网 url 。</td> 
 </tr> 
 <tr> 
 <td>author</td> 
 <td>包的作者姓名。</td> 
 </tr> 
 <tr> 
 <td>contributors</td> 
 <td>包的其他贡献者姓名。</td> 
 </tr> 
 <tr> 
 <td>dependencies</td> 
 <td>依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。</td> 
 </tr> 
 <tr> 
 <td>repository</td> 
 <td>包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。</td> 
 </tr> 
 <tr> 
 <td>main</td> 
 <td>字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。</td> 
 </tr> 
 <tr> 
 <td>kewords</td> 
 <td>关键字</td> 
 </tr> 
 </tbody> 
</table>

![format_png 22][]

<table> 
 <tbody> 
 <tr> 
 <td>命令</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>npm help</td> 
 <td>可查看某条命令的详细帮助，例如npm help install。</td> 
 </tr> 
 <tr> 
 <td>npm install &lt;package&gt;e -g</td> 
 <td>在本地安装当前命令行程序，可用于发布前的本地测试。</td> 
 </tr> 
 <tr> 
 <td>npm update &lt;package&gt; -g</td> 
 <td>使用可以把全局安装的对应命令行程序更新至最新版。</td> 
 </tr> 
 <tr> 
 <td>npm update &lt;package&gt;</td> 
 <td>可以把当前node_modules子目录里对应模块更新至最新版本</td> 
 </tr> 
 <tr> 
 <td>npm cache clear</td> 
 <td>可以清空NPM本地缓存，用于对付使用相同版本号发布新版本代码的人</td> 
 </tr> 
 <tr> 
 <td>npm unpublish &lt;package&gt;@&lt;version&gt;</td> 
 <td>可以撤销发布自己发布过的某个版本代码。</td> 
 </tr> 
 </tbody> 
</table>

![format_png 23][]

**yarn使用**

Yarn 是 Facebook, Google, Exponent 和 Tilde 开发的一款新的 JavaScript 包管理工具。

它的出现是为了解决使用npm面临的问题：

![format_png 24][]

yarm命令

<table> 
 <tbody> 
 <tr> 
 <td>指令</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>yarn init</td> 
 <td>初始化项目，生成package.json文件</td> 
 </tr> 
 <tr> 
 <td>yarn add 包名</td> 
 <td>添加依赖包，示例：yarn add [package]、yarn add [package]@[version]、yarn add [package]@[tag]</td> 
 </tr> 
 <tr> 
 <td>yarn</td> 
 <td>根据 package.json 安装全部依赖包，也可以使用 yarn install</td> 
 </tr> 
 <tr> 
 <td>yarn upgrade</td> 
 <td>升级依赖包</td> 
 </tr> 
 <tr> 
 <td>yarn remove</td> 
 <td>移除依赖包</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td>Npm</td> 
 <td>Yarn</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>npm init</td> 
 <td>yarn init</td> 
 <td>初始化某个项目</td> 
 </tr> 
 <tr> 
 <td>npm install/link</td> 
 <td>yarn install/link</td> 
 <td>默认的安装依赖操作</td> 
 </tr> 
 <tr> 
 <td>npm install taco -save</td> 
 <td>yarn add taco</td> 
 <td>安装某个依赖，并默认保存到package</td> 
 </tr> 
 <tr> 
 <td>npm uninstall taco -save</td> 
 <td>yarn remove taco</td> 
 <td>移除某个依赖项目</td> 
 </tr> 
 <tr> 
 <td>npm install taco –save-dev</td> 
 <td>yarn add taco –dev</td> 
 <td>安装某个开发时依赖项目</td> 
 </tr> 
 <tr> 
 <td>npm updata taco -save</td> 
 <td>yarn upgrade taco</td> 
 <td>更新某个依赖项目</td> 
 </tr> 
 <tr> 
 <td>npm install taco --global</td> 
 <td>yarn global add taco</td> 
 <td>安装某个全局依赖项目</td> 
 </tr> 
 <tr> 
 <td>npm publish/login/logout</td> 
 <td>yarn publish/login/logout</td> 
 <td>发布、登录、登出，一系列NPM Registry操作</td> 
 </tr> 
 <tr> 
 <td>npm run test</td> 
 <td>yarn run test</td> 
 <td>运行某个命令，可以在script脚本中去配置</td> 
 </tr> 
 </tbody> 
</table>

vue cli是一个基于vue.jsf进行快速开发的完整系统。

![format_png 25][]

<table> 
 <tbody> 
 <tr> 
 <td>文件</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>build</td> 
 <td>项目构建(webpack)相关代码</td> 
 </tr> 
 <tr> 
 <td>config</td> 
 <td>配置目录，包括端口号等。我们初学可以使用默认的。</td> 
 </tr> 
 <tr> 
 <td>node_modules</td> 
 <td>npm 加载的项目依赖模块</td> 
 </tr> 
 <tr> 
 <td>src</td> 
 <td>这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： ² assets: 放置一些图片，如logo等 ² components: 目录里面放了一个组件文件，可以不用 ² App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录 ² main.js: 项目的核心文件</td> 
 </tr> 
 <tr> 
 <td>test</td> 
 <td>初始测试目录，可删除</td> 
 </tr> 
 <tr> 
 <td>static</td> 
 <td>静态资源目录，如图片、字体等。</td> 
 </tr> 
 <tr> 
 <td>index.html</td> 
 <td>首页入口文件，你可以添加一些 meta 信息或统计代码啥的</td> 
 </tr> 
 <tr> 
 <td>package.json</td> 
 <td>项目配置文件。</td> 
 </tr> 
 <tr> 
 <td>README.md</td> 
 <td>项目的说明文档，markdown 格式</td> 
 </tr> 
 </tbody> 
</table>

vue项目配置

<table> 
 <tbody> 
 <tr> 
 <td>配置项</td> 
 <td>数据类型</td> 
 <td>说明</td> 
 <td>默认值</td> 
 </tr> 
 <tr> 
 <td>publicPath</td> 
 <td>string</td> 
 <td>基本路径</td> 
 <td>'/'</td> 
 </tr> 
 <tr> 
 <td>outputDir</td> 
 <td>string</td> 
 <td>输出文件目录</td> 
 <td>'dist'</td> 
 </tr> 
 <tr> 
 <td>assetsDir</td> 
 <td>string</td> 
 <td>静态资源存放目录</td> 
 <td>' '</td> 
 </tr> 
 <tr> 
 <td>indexPath</td> 
 <td>string</td> 
 <td>输出路径</td> 
 <td>'index.html'</td> 
 </tr> 
 <tr> 
 <td>filenameHashing</td> 
 <td>Boolean</td> 
 <td>生成的静态资源在它们的文件名中包含了hash 以便更好的控制缓存</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>pages</td> 
 <td>Object</td> 
 <td>在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。</td> 
 <td>undefined</td> 
 </tr> 
 <tr> 
 <td>lintOnSave</td> 
 <td>Boolean</td> 
 <td>是否在开发环境下通过 eslint-loader&nbsp;在每次保存时 lint 代码。</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>runtimeCompiler</td> 
 <td>Boolean</td> 
 <td>是否使用包含运行时编译器的 Vue 构建版本</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>transpileDependencies</td> 
 <td>Boolean</td> 
 <td>是否生成source map文件，可以将其设置为 false 以加速生产环境构建。</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>crossorigin</td> 
 <td>String</td> 
 <td>设置生成的 HTML 中&lt;link rel="stylesheet"&gt;和&lt;script&gt; 标签的 crossorigin 属性（跨域）。</td> 
 <td>undefined</td> 
 </tr> 
 <tr> 
 <td>integrity</td> 
 <td>Boolean</td> 
 <td>在生成的 HTML 中的 &lt;link rel="stylesheet"&gt; 和 &lt;script&gt; 标签上启用 Subresource Integrity(SRI：摘要签名机制，来保证外链资源的完整性)。</td> 
 <td>flase</td> 
 </tr> 
 <tr> 
 <td>configureWebpack</td> 
 <td>Object/function</td> 
 <td>Object:通过 webpack-merge合并到最终的配置中&lt;br /&gt;function:接收被解析的配置作为参数</td> 
 <td> </td> 
 </tr> 
 <tr> 
 <td>chainWebpack</td> 
 <td>Function</td> 
 <td>用来表示是一个函数，会接收一个基于&lt;br/&gt;webpack-chain&nbsp;的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。</td> 
 <td> </td> 
 </tr> 
 <tr> 
 <td>css.modules</td> 
 <td>Boolean</td> 
 <td>默认情况下，只有 .module.[ext] 结尾的文件才会被视作 CSS Modules 模块。设置为true后你就可以去掉文件名中的.module并将所有\.(css|scss|less|styel(us)?)文件视为CSS Modules文件。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>css.extract</td> 
 <td>Boolean/Object</td> 
 <td>用来设置是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。</td> 
 <td>生产环境:true&lt;br /&gt;开发环境:fals。</td> 
 </tr> 
 <tr> 
 <td>css.sourceMap</td> 
 <td>Boolean</td> 
 <td>是否为 CSS 开启 source map。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>css.loaderOptios</td> 
 <td>Object</td> 
 <td>用来向 CSS 相关的 loader 传递选项</td> 
 <td>{}</td> 
 </tr> 
 <tr> 
 <td>devServer</td> 
 <td>Object</td> 
 <td>所有 webpack-dev-server 的选项都支持</td> 
 <td> </td> 
 </tr> 
 <tr> 
 <td>devServer.proxy</td> 
 <td>String/Object</td> 
 <td>前端应用和后端 API 服务器没有运行在同一个主机上，需要在开发环境下将 API 请求代理到 API 服务器。</td> 
 <td>proxy: ''</td> 
 </tr> 
 <tr> 
 <td>parallel</td> 
 <td>Boolean</td> 
 <td>是否为Babel或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅用于生产构建。</td> 
 <td>require('os').cpus().length &gt; 1</td> 
 </tr> 
 <tr> 
 <td>pluginOptions</td> 
 <td>Object</td> 
 <td>用来传递任何第三方插件选项。</td> 
 <td> </td> 
 </tr> 
 </tbody> 
</table>

**js模块**

![format_png 26][]

![format_png 27][]

![format_png 28][]

**express服务器开发**

Node.js是运行在服务器端的JavaScript。

第一个node应用程序

![format_png 29][]

**express**

![format_png 30][]

![format_png 31][]

body-parser，node.js中间件，用于处理json，raw，text和url编码的数据。cookie-parser是一个解析cookie的工具，通过req.cookies可以取到传过来的cookie，并把它们转成对象。multer，node.js中间件，用于处理表单数据。

![format_png 32][]

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>req.app</td> 
 <td>callback为外部文件时，用req.app访问Express的实例</td> 
 </tr> 
 <tr> 
 <td>req.baseUrl</td> 
 <td>获取路由当前安装的URL路径</td> 
 </tr> 
 <tr> 
 <td>req.body / req.cookies</td> 
 <td>获得「请求主体」/ Cookies</td> 
 </tr> 
 <tr> 
 <td>req.fresh / req.stale</td> 
 <td>判断请求是否还「新鲜」</td> 
 </tr> 
 <tr> 
 <td>req.hostname / req.ip</td> 
 <td>获取主机名和IP地址</td> 
 </tr> 
 <tr> 
 <td>req.originalUrl</td> 
 <td>获取原始请求URL</td> 
 </tr> 
 <tr> 
 <td>req.params</td> 
 <td>获取路由的parameters</td> 
 </tr> 
 <tr> 
 <td>req.path</td> 
 <td>获取请求路径</td> 
 </tr> 
 <tr> 
 <td>req.protocol</td> 
 <td>获取协议类型</td> 
 </tr> 
 <tr> 
 <td>req.query</td> 
 <td>获取URL的查询参数串</td> 
 </tr> 
 <tr> 
 <td>req.route</td> 
 <td>获取当前匹配的路由</td> 
 </tr> 
 <tr> 
 <td>req.subdomains</td> 
 <td>获取子域名</td> 
 </tr> 
 <tr> 
 <td>req.accepts()</td> 
 <td>检查可接受的请求的文档类型</td> 
 </tr> 
 <tr> 
 <td>req.acceptsCharsets / req.acceptsEncodings / req.acceptsLanguages</td> 
 <td>返回指定字符集的第一个可接受字符编码</td> 
 </tr> 
 <tr> 
 <td>req.get()</td> 
 <td>获取指定的HTTP请求头</td> 
 </tr> 
 <tr> 
 <td>req.is()</td> 
 <td>判断请求头Content-Type的MIME类型</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td>属性</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>res.app</td> 
 <td>同req.app一样</td> 
 </tr> 
 <tr> 
 <td>res.append()</td> 
 <td>追加指定HTTP头</td> 
 </tr> 
 <tr> 
 <td>res.set()</td> 
 <td>在res.append()后将重置之前设置的头</td> 
 </tr> 
 <tr> 
 <td>res.cookie(name，value [，option])</td> 
 <td>设置Cookie</td> 
 </tr> 
 <tr> 
 <td>opition</td> 
 <td>domain / expires / httpOnly / maxAge / path / secure / signed</td> 
 </tr> 
 <tr> 
 <td>res.clearCookie()</td> 
 <td>清除Cookie</td> 
 </tr> 
 <tr> 
 <td>res.download()</td> 
 <td>传送指定路径的文件</td> 
 </tr> 
 <tr> 
 <td>res.get()</td> 
 <td>返回指定的HTTP头</td> 
 </tr> 
 <tr> 
 <td>res.json()</td> 
 <td>传送JSON响应</td> 
 </tr> 
 <tr> 
 <td>res.jsonp()</td> 
 <td>传送JSONP响应</td> 
 </tr> 
 <tr> 
 <td>res.location()</td> 
 <td>只设置响应的Location HTTP头，不设置状态码 或者close response</td> 
 </tr> 
 <tr> 
 <td>res.redirect()</td> 
 <td>设置响应的Location HTTP头，并且设置状态码302</td> 
 </tr> 
 <tr> 
 <td>res.render(view,[locals],callback)</td> 
 <td>渲染一个view，同时向callback传递渲染后的字符串，如果在渲染过程中有错误发生next(err)将会被自动调用。callback将会被传入一个可能发生的错误以及渲染后的页面，这样就不会自动输出了。</td> 
 </tr> 
 <tr> 
 <td>res.send()</td> 
 <td>传送HTTP响应</td> 
 </tr> 
 <tr> 
 <td>res.sendFile(path [，options] [，fn])</td> 
 <td>传送指定路径的文件 -会自动根据文件extension设定Content-Type</td> 
 </tr> 
 <tr> 
 <td>res.status()</td> 
 <td>设置HTTP状态码</td> 
 </tr> 
 <tr> 
 <td>res.type()</td> 
 <td>设置Content-Type的MIME类型</td> 
 </tr> 
 </tbody> 
</table>

express路由

![format_png 33][]

<table> 
 <tbody> 
 <tr> 
 <td>请求方法</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>GET</td> 
 <td>请求一个指定资源的表示形式. 使用GET的请求应该只被用于获取数据.</td> 
 </tr> 
 <tr> 
 <td>HEAD</td> 
 <td>请求一个与GET请求的响应相同的响应，但没有响应体.</td> 
 </tr> 
 <tr> 
 <td>POST</td> 
 <td>用于将实体提交到指定的资源，通常导致状态或服务器上的副作用的更改.</td> 
 </tr> 
 <tr> 
 <td>PUT</td> 
 <td>用请求有效载荷替换目标资源的所有当前表示。</td> 
 </tr> 
 <tr> 
 <td>DELETE</td> 
 <td>删除指定的资源。</td> 
 </tr> 
 <tr> 
 <td>CONNECT</td> 
 <td>建立一个到由目标资源标识的服务器的隧道。</td> 
 </tr> 
 <tr> 
 <td>OPTIONS</td> 
 <td>用于描述目标资源的通信选项。</td> 
 </tr> 
 <tr> 
 <td>TRACE</td> 
 <td>沿着到目标资源的路径执行一个消息环回测试。</td> 
 </tr> 
 <tr> 
 <td>PATCH</td> 
 <td>用于对资源应用部分修改。</td> 
 </tr> 
 </tbody> 
</table>

![format_png 34][]

![format_png 35][]

![format_png 36][]

pug视图模板

![format_png 37][]

![format_png 38][]

![format_png 39][]

![format_png 40][]

![format_png 41][]

<table> 
 <tbody> 
 <tr> 
 <td>Cookie</td> 
 <td>Session</td> 
 </tr> 
 <tr> 
 <td>Cookie是把用户的数据写给用户的浏览器，在浏览器端保存状态数据，每次访问服务器时，在HTTP请求消息中传输状态数据。缺点是：数据量太大，HTTP消息传输负担较大；用户可能会修改cookie信息，导致服务器不安全。</td> 
 <td>Session技术把用户的数据写到用户独占的session中，不同用户通过不同的sessionid 辨别。 &lt;br /&gt;1.把 sessionid 保存在 客户端cookie或本地存储中。 &lt;br /&gt; 2.浏览器发送HTTP请求时，附带 sessionid 的cookie信息，以便服务器端区分是哪一个用户。 Session技术把用户的数据写到用户独占的session中，不同用户通过不同的sessionid 辨别。</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td>参数</td> 
 <td>作用</td> 
 </tr> 
 <tr> 
 <td>Secret</td> 
 <td>一个String类型的字符串，作为服务器端创建session的签名</td> 
 </tr> 
 <tr> 
 <td>Name</td> 
 <td>返回客户端key的名称，默认为connect.sid，也可以自己设置</td> 
 </tr> 
 <tr> 
 <td>Resave</td> 
 <td>强制保存session，即使它没有变化。默认为true。建议设置成false。</td> 
 </tr> 
 <tr> 
 <td>SaveUninitialized</td> 
 <td>强制将未初始化的session存储。当新建了一个session且未设定属性或值时，它就处于未初始化状态。在设定一个cookie前，这对于登录验证，减轻服务的存储压力，极限控制是有帮助的（默认为true）。建议手动添加。</td> 
 </tr> 
 <tr> 
 <td>Cookie</td> 
 <td>设置返回到前端key的属性，默认值为{path: '/', httpOnly: true, secure: false, maxAge: null}。</td> 
 </tr> 
 <tr> 
 <td>Rolling</td> 
 <td>在每次请求时强行设置cookie，这将重置cookie过期时间，默认是false。</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td>目录/文件</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>build</td> 
 <td>项目构建(webpack)相关代码</td> 
 </tr> 
 <tr> 
 <td>config</td> 
 <td>配置目录，包括端口号等。我们初学可以使用默认的。</td> 
 </tr> 
 <tr> 
 <td>node_modules</td> 
 <td>npm 加载的项目依赖模块</td> 
 </tr> 
 <tr> 
 <td>src</td> 
 <td>这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件： 1.sets: 放置一些图片，如logo等。 2.mponents: 目录里面放了一个组件文件，可以不用。 3.p.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。 4.in.js: 项目的核心文件。</td> 
 </tr> 
 <tr> 
 <td>static</td> 
 <td>静态资源目录，如图片、字体等。</td> 
 </tr> 
 <tr> 
 <td>test</td> 
 <td>初始测试目录，可删除</td> 
 </tr> 
 <tr> 
 <td>.xxxx文件</td> 
 <td>这些是一些配置文件，包括语法配置，git配置等。</td> 
 </tr> 
 <tr> 
 <td>index.html</td> 
 <td>首页入口文件，你可以添加一些 meta 信息或统计代码啥的。</td> 
 </tr> 
 <tr> 
 <td>package.json</td> 
 <td>项目配置文件。</td> 
 </tr> 
 <tr> 
 <td>README.md</td> 
 <td>项目的说明文档，markdown 格式。</td> 
 </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
 <tr> 
 <td>指令</td> 
 <td>说明</td> 
 </tr> 
 <tr> 
 <td>nodemon -h或者 nodemon --help</td> 
 <td>使用帮助</td> 
 </tr> 
 <tr> 
 <td>nodemon -e</td> 
 <td>默认的 nodemon监视 .js, .mjs, .coffee, litcoffee和Json文件，通过-e命令你可以指定你自己的查找列表</td> 
 </tr> 
 <tr> 
 <td>nodemon --watch path</td> 
 <td>nodemon默认只会监视当前的工作路径，如果你想去监视其他路径上的文件，你可以使用如下命令： nodemon --watch app --watch libs app/server.js</td> 
 </tr> 
 <tr> 
 <td>nodemon --ignore</td> 
 <td>忽视一些文件被监视</td> 
 </tr> 
 <tr> 
 <td>nodemon --delay</td> 
 <td>有时候你会修改许多文件，这时为了避免不必要的重启，你可以通过命令指定多少时间后再进行重启。 nodemon --delay 10 server.js</td> 
 </tr> 
 <tr> 
 <td>rs</td> 
 <td>手动重启</td> 
 </tr> 
 <tr> 
 <td>nodemon ./server.js localhost 8080</td> 
 <td>指定主机和端口</td> 
 </tr> 
 <tr> 
 <td>nodemon --debug ./server.js 80</td> 
 <td>开启debug模式</td> 
 </tr> 
 </tbody> 
</table>

![format_png 42][]

<table> 
 <tbody> 
 <tr> 
 <td>UI框架</td> 
 <td>开发团队</td> 
 <td>github star数</td> 
 <td>优缺点</td> 
 </tr> 
 <tr> 
 <td>element ui（桌面版ui）</td> 
 <td>饿了么团队开源的ui库</td> 
 <td>34K</td> 
 <td>组件丰富，但是界面样式不太美观。 http://element-cn.eleme.io/#/zh-CN/component/installation</td> 
 </tr> 
 <tr> 
 <td>iView（桌面版ui）</td> 
 <td>个人团队开源的ui库</td> 
 <td>19K</td> 
 <td>组件丰富，界面样式美观，但使用 render 函数渲染，使用成本较高。 https://www.iviewui.com/docs/guide/install</td> 
 </tr> 
 <tr> 
 <td>Vux（移动端ui）</td> 
 <td>基于微信ui推出的移动端ui库</td> 
 <td>14.9K</td> 
 <td>https://doc.vux.li/zh-CN/</td> 
 </tr> 
 <tr> 
 <td>mint-ui（移动端ui）</td> 
 <td>饿了么团队推出的移动端ui库</td> 
 <td>13.2K</td> 
 <td>http://mint-ui.github.io/docs/#/zh-cn2</td> 
 </tr> 
 </tbody> 
</table>

![format_png 43][]

![format_png 44][]

陪伴你的365天

今后也请你多多关照

推荐阅读  点击标题可跳转

[【面试Vue全家桶】vue前端交互模式-es7的语法结构？async/await][Vue_vue_-es7_async_await]

[【面试需要-Vue全家桶】一文带你看透Vue前端路由][-Vue_Vue]

[【面试需要】掌握JavaScript中的this，call，apply的原理][JavaScript_this_call_apply]

[2019年的每一天日更只为等待她的出现，好好过余生，庆余年 | 掘金年度征文][2019_ _]

[进来就是一家人【达达前端技术社群⑥】][Link 1]

觉得本文对你有帮助？请分享给更多人

关注「达达前端」加星标，提升前端技能

在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「**达达**」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， **求点赞，求关注，求分享，对暖男我来说真的**

**非常有用！！！**

感谢阅读，原创不易，喜欢就点个\[**在看**\] or \[**转发朋友圈**\]，这是我写作最大的动力。

**意见反馈**

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

**这是一个有质量，有态度的公众号**

点关注，有好运

![format_png 45][]

![format_png 46][]

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSVkzdzJvbHpFSVhkUDVpYkpYYTNJYWljTzU4SDdFbG94Unp1QUo4RFBROEp4ZW1jWmlhTFdwTWlhUXcvNjQw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSVJzNUxlY3k1ODhyUFBHa0tIeExxNHNvZWE1OUxBWDhPdmppY2tsaGliQklpYkFjd0FHb2hsQ1kwUS82NDA?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSWxMaWFacUZ2aWJiVGljcEFmU0JTdUdpYXlLTHY1cU9zQTFyNTVERnZYOFZKNENBbEZ5ek4ybk9xS3cvNjQw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSVRlQmhLaWJDaFByM1R2UnRaVzdpYXJ2Tk5EUFY0SUVXOWliSTNtSENpYW5sZTJpY1VITUpCNFdIMFVRLzY0MA?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSXNiV21QSHlvTjhKVjFhaWFmbld3N1pPMXhCRWZXY05XQ3ZSclQ3T3JYRWJhcTRmSHVOeXU4VlEvNjQw?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSXlkSUhIcmNIMHJIT2NlOG8wblZRbUNnaWFLbDFpYmEzanFRV084U21JT2tsakRvRUZ0RVBiSWlhZy82NDA?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSUpFbUlMT1p0U1FaY1BqTldlVGNUZlNDTER6QTN3N0Y5WXkxaWF1aWNSVXhtMU1yRXpHSEFndElRLzY0MA?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSUk0dlhkS0U5ZkNaVUdoMG9ZN1VpYkNVSHdhc0dpYzFVYWNvekNCWVlNRWZpYUVOY0dVczVncUZKUS82NDA?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSThSbzROODkxQXpXcTNGZTUwNGdsRDNXczJpYkNRWER4dEd1Q1RnWlprR3JFM1FNTXVnN1lrcWcvNjQw?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSUpaU05iVUNpYjlMZ0JGcU9QQ1hyY3c0ak1naWJCaDZVeEF0a2FaZGxyd0pMb3RqblJaQXpiaWMzUS82NDA?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSTJQNXl0NXV6dlh1VENYY3JlbDZ2Y2dONE9sS0tVWDhFWWlhR09OaWMwY2huT1BHcXA3RXJubzB3LzY0MA?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSWxBYjFpY0dKb0EzRFlZMFZZYkRzZmRVbFgyWlFrWWc4bE5EbmRqaWFFd0JDdjB2OXhNcGo4c0RRLzY0MA?x-oss-process=image/format,png
[format_png 12]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSURxcGZpYURXelJ0ZWljamVNZFhTZEMwaWFCWW9oVHlmU0RBTG9GQmpSWUo1SWdSRDFyUEtiOWR2dy82NDA?x-oss-process=image/format,png
[format_png 13]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSVJCNVAzTklLd2pjbHozRFNlZlFPYUd3RVQxcHZxNlNaNlZjaWFoU0JJRVMxb0taY1daTG9qR1EvNjQw?x-oss-process=image/format,png
[format_png 14]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQXltOVVKV2t4RzBUbDl3U2RncDlqSWNFU0prVlhINWJydzBOQkpkNFZiS2hPTndRaWF3S0N3cXJhbTY0YjF4d0lBSnRpYTlKcmliSjRBQS82NDA?x-oss-process=image/format,png
[format_png 15]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwWEZKVkxlSVJYbVpleGxVcVE2OFE3V2ZLaGlhQ1NXRjVQaWNCUEoxUGhQV0piVVV4eXFWb0d2MkEvNjQw?x-oss-process=image/format,png
[format_png 16]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwNE9PQVhBZDdpYmN5ZlFmajl0SlpXeGRQQ3ppYktCSmdSQ2p6cVpHamN1VWhpYXdPaEFnVm1RMzV3LzY0MA?x-oss-process=image/format,png
[Vue]: https://blog.csdn.net/qq_36232611/article/details/103850127
[Vue_ _]: https://blog.csdn.net/qq_36232611/article/details/103501098
[Vue 1]: https://blog.csdn.net/qq_36232611/article/details/103500881
[format_png 17]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwWkpMcGM5SnBXMjVrejVIaWFMWFhDamRrbGRJVHBHbVBEbmljdU1NclVtUDVZS21iazNaUE45SUEvNjQw?x-oss-process=image/format,png
[format_png 18]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwSUJyVlJLUmdNcVJ6MWxjMEloT3djZ3VpY0RlN3l1VjNFN0JPZGdrZzI2U2VNN1llTGJ6R013QS82NDA?x-oss-process=image/format,png
[format_png 19]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwOGo0cDNETWljNlFaaFV6NXZ4YnROZzZwZUMzSVlzRmpsTHVDcGlhajNUMGlhZlZQOE13aWJXYmlhancvNjQw?x-oss-process=image/format,png
[format_png 20]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwRVJiZ3pvWVVxbGFneDZXZkNuYThhWDNFNENMdkh5cGsxcm1NYWVHRUh3Y2ljUkREN2hTUDF1dy82NDA?x-oss-process=image/format,png
[format_png 21]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwTGliMlhpYlo2bFJ3Mm8wZ1BlVmhaT2ljaGlicUpqMGlhdzdkTVVqV1NJTXkxSmljVWozRWxEaWJpY0t1d2cvNjQw?x-oss-process=image/format,png
[format_png 22]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwaWN3b1d3N2ljZjdCd2ppYVJWbVBhTzNQT2xNWDV0ZmI0bGNNbzdCVFNPeWQxeFIza3lxSTlhY2lhZy82NDA?x-oss-process=image/format,png
[format_png 23]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwS2xtVUk0dTBIU3NxcDZScGliV0t4STdDTG9ZRm05NWdqVDB5NDRXSUI2NjdJWGc1TXAyYk9pYlEvNjQw?x-oss-process=image/format,png
[format_png 24]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwSWhMZG4zYlp5TEhVbXlpYTY3SzFKN2JDOU9iR3IxeVhBR0p5eFhuZFVEOTBkaWJOT3I4N084U3cvNjQw?x-oss-process=image/format,png
[format_png 25]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwRlJwRm9WR0VQcnF4ZnlIcVJPRWlhTVdmblFZR2s4YjNPUmhkVWljcEFzc3VBaWF4Vll4WEJMWHZ3LzY0MA?x-oss-process=image/format,png
[format_png 26]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwUmdwZm5NTHhYcWx5NlBVbnVjU1o1Zkc2SzBSQ3lpYXFDQWZaNUd6VFU0ZXpXdm94TTR0R1NYZy82NDA?x-oss-process=image/format,png
[format_png 27]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwYVVmRUZsU1RTMFJob2liSmNGZ20yVnVrVDdpYk4wN2liVFJRc2liZWY4SWdYUkM4bHlrWmZRWVVpYUEvNjQw?x-oss-process=image/format,png
[format_png 28]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwOHdsQlB2eWs2bnBRVWFlVEtTZlNTZDlBT0l5eHBZNUxLQVA2d21KazVkMUVFcnhmVVJEZ1pRLzY0MA?x-oss-process=image/format,png
[format_png 29]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwYW5JajloNmljTjhKc201VzdpYXZMVXNjOVlpYWlhQ3pLUVVGUzFQdjVWa29ITEswdXdZMkxjd1lBdy82NDA?x-oss-process=image/format,png
[format_png 30]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwTkxSZmlhbXpjR0kxTlA0U3hSNFZUb0M4aDQxWlhUZkpwWGRhaWIySTJXMG1FMElkaWFDcXZPZjJ3LzY0MA?x-oss-process=image/format,png
[format_png 31]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwVmhwRHRtNXZJTEdiUVlBUU1vajBmUFdlN1BnMkxxSkRIdll3eFM0akVkZW5pYTRGUUdZSVd2US82NDA?x-oss-process=image/format,png
[format_png 32]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwN05kNndwaElhQ3BSRWt0OFJkakVLRGpHWEFlWnl1YWpvMlFmZ016eE84NWRQMDNyNnR3TXJ3LzY0MA?x-oss-process=image/format,png
[format_png 33]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwMER4SHhjM3hHemFwcjV3NDBkWmpqVXU0SEVJUVdyeDkyaWI4Y3d4NEhjbkdYcEtVV0lpYUM1a3cvNjQw?x-oss-process=image/format,png
[format_png 34]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwR2xpYzExVzV3cTFXZ09KSWFyaWFzOUN1TUhtY2VYek9pYTdzQTcwVGlhY05La0Z6S0dMaDM2T1FlZy82NDA?x-oss-process=image/format,png
[format_png 35]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwaWJsSmJOaWI4dUxyMUFFVjBwRGJ3bFpwb1lHVm8zYzdJMVFCcjBwcDJ3ZVBBZmtPMGxHNU1oZUEvNjQw?x-oss-process=image/format,png
[format_png 36]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwNFpYcVJ3RkFKcHlFYTNvaWFlOTh4aHRiOHF1VTNob2N0a0dvb0p2U1NDSUZHYW1lYW9uZzk3QS82NDA?x-oss-process=image/format,png
[format_png 37]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwQXRWbGNrOXlsaWFqVnFsMXFmV2NPeGlhQWQwSmRxOXh6bUJQRFZZWWFwaWJqSVExT2xrMkMwZjNBLzY0MA?x-oss-process=image/format,png
[format_png 38]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwbTNPbVFNenVYN2Z2YWVPUjNDYnl1bWF3RVdYVFozWU9ldTdJaWJMM3BOeDNlc2NuOFpZU0xvQS82NDA?x-oss-process=image/format,png
[format_png 39]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwbnB6WndhekNOYjZCdGljZ05sVWJpYklBaWFCdDh6MUVPT3JMN0dpYVU4a3NHSTZsZVp1SzRoYUVnUS82NDA?x-oss-process=image/format,png
[format_png 40]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwUHJPOVg5dk1tOVVpYjV0cXBMUTg1dkZKMVhIbDhwRHhqeDdzZjhONnBhcVVkMmliZUFvdTFaTmcvNjQw?x-oss-process=image/format,png
[format_png 41]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwQVlmZll6UTdjb3FTSENzWG15SWhHMnFCcGx3bUFBNEVwZ1FWbEtSVnNrZ1NKbVBlTHpSWldRLzY0MA?x-oss-process=image/format,png
[format_png 42]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwU1FYa2dKRlFUVEFTWVlRTkFzQU1UTlN3RmlhUUVNSm1YcjRmeGF5cVVDNVZmZWNpY3hneHhnM3cvNjQw?x-oss-process=image/format,png
[format_png 43]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFERE5qeWpNOEROaWEyYVFqSWxpYjZ2QlNwZ2liVmFoUzQwcDNUM2tXanJldGRwcWxheDVXcnFOUUxVUE5WWFpaUnFNcUl1Y2I1UkpsbUdpYUEvNjQw?x-oss-process=image/format,png
[format_png 44]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2dpZi9zamp3cDNiVU1nalg0eUlXUDlsbHdnY0c4OVZES0xOZFBVZHE5NjRYUDF2aWN4dkdMMWtpYmJpYVh5R1BnaWN1UTIzRnVKRGV1elM1Nm1pYXNXS2RpYlRpYk5sVncvNjQw?x-oss-process=image/format,png
[Vue_vue_-es7_async_await]: https://blog.csdn.net/qq_36232611/article/details/103951684
[-Vue_Vue]: https://blog.csdn.net/qq_36232611/article/details/103942481
[JavaScript_this_call_apply]: https://blog.csdn.net/qq_36232611/article/details/103929527
[2019_ _]: https://blog.csdn.net/qq_36232611/article/details/103929511
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzI1NTcxOTQ1Nw%3D%3D&chksm=ea30f158dd47784e5b86cf496c3317f0f6a67b8ea1c4d90f80108e6ee96969e66f697545b4bb&idx=4&mid=2247487510&scene=21&sn=bb1a9b513613521272c4c5a7d8e7063f#wechat_redirect
[format_png 45]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8zYVBqMEdoRlFEQnRZVWNJWmdIUzZLRkRBOHZ2dVhHWVZ5VXBpYWJOZzd1U1dOU2RpYmoyVWh6ZVBvNDVBbGU3SlhmeHgxbXVTVnUxdnlLQVcyRFZQQ0p3LzY0MA?x-oss-process=image/format,png
[format_png 46]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy9Uc29tRVFBS1A0Y29tcEUzUmljb25aaWJ0V09pYUhxWnQzNDlkUDA0ZTJwUkdGaWFyWVNlYUtlR3BxVk1pY0h6aWFoYlNYb2VkZ09CVEVRWTQySkcycGZPMWQ4US82NDA?x-oss-process=image/format,png