总结这份前端知识主要包含以下几部分：                 

1.开发工具     vscode         常用插eslint/npm/prettier(代码风格)/vetur/liveserver/ant desgin vue/stylelint/element ui helper     chrome浏览器     nodejs     vue-devtools:调试vue     yarn/npm:依赖包管理     webpack:前端资源加载打包         根据模块规则生成静态资源；         安装webpack: npm install -g webpack web-cli     webassembly     easy-mock:接口数据模拟(https://github.com/easy-mock/easy-mock)

2.vue     模板         v-html         {{}}         v-model:双向数据绑定         v-for         v-bind:class /v-bind:style 样式绑定     父组件向子组件传递参数：props     计算属性:computed/method     监听属性：watch     自定义事件         $on(eventname):监听事件         $emit(eventname):出发事件     组件         全局组件：vue.component()         局部组件     路由(router)         vue-router         page.js         Director     状态缓存(state)         vuex/localstorage     token     混入（mixins）:义了一部分可复用的方法或者计算属性     ajax请求：axios         一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中     插槽：v-slot

3.nuxtjs     基于vue的通用框架，通过对客户端和服务端基础架构的抽象组织，侧重关注应用UI的渲染

    服务端渲染 (SSR)

    解决的问题         静态站点 (seo好）         动态渲染         简化配置（体现在自动路由，无需配置）         自动代码分层

    搭建         环境：npm+nodejs+vscode         安装：1.创建工程 npm init nuxt-app mfvking             2.运行：npm run dev     目录结构     技术点         NuxtLink:导航

        常用命令              npm run dev 启动开发环境             npm run build 构建生产环境             npm run start 启动生产环境             npm run generate  生成静态服务             npm run generate --fail-on-error  生成页面错误

        nuxtjs 版本升级： remove package-lock.json file remove node_modules directory Run the npm install command

        nuxt生命周期

        路由中间件             globla-->next.config.js             layout-->layouts             page-->page components

5.前端工程搭建     vue-cli3: vue create mfvking      npm init nuxt-app mfvking

6.vue组件框架     pc 管理端：ant desgin vue /element ui/iview     移动端:(flutter/uni-app/Taro)/weex ui/RN/vant/Vuetify/Rax     pc端:electron

7.模块化：js与js之间的调用操作     es5         1.commjs模块 /module文件夹         2.使用exports和require 进行导入导出         3.使用demo     es6         export/imprt 导出导入         使用demo

8.typescript     是javascript的超集扩展，提供了面向对象的特殊（对象、接口、模块）；     可以通过 tsc xx.ts将typescript程序转为为js文件

9.可视化     antv     echarts     three.js     highcharts     D3

10.开源项目     vue-element-admin     vue-admin-template     ant-design vue pro     vuex-persistedstate:vue状态管理插件     vue-admin-beautiful

11.less/sass     1.都用于处理css      2less基于js，在客户端处理；一般使用less      3.sass基于ruby，在服务端处理；

12.babel转换器     把es6代码转换为es5代码，解决浏览器兼容性差问题     babel插件：babel-cli

13.javascript基础     1.this指向         this的指向         call         apply         bind     2.原型         原型         原型链     3.作用域         作用域         作用域链     4.上下文     5.变量对象         变量对象         全局变量对象         函数变量对象     6.立即调用函数表达式     7.闭包     8.参数传递         值传递         引用传递         共享传递     9.基本数据类型

14.微前端架构（前端微服务化）     将微服务概念应用于浏览器，将web应用由单一的单应用转变为多个小型应用聚合为一个大应用。可以独立开发、独立部署、独立运行。公共组件共享依赖。

    微前端的实现方式         使用 HTTP 服务器(nginx)的路由来重定向多个应用         组合多个独立应用、组件来构建一个单体应用         iFrame。使用 iFrame 及自定义消息传递机制         Web Components          Singel-spa         qiankun： 阿里的轮子

    BFF(Backend for frontend):服务于前端的后端

15.前端优化     1.性能优化         性能监控         样式优化         js优化（防抖、节流）         代码分割         资源压缩         打包优化         服务器优化         缓存优化：service worker         延迟加载         优化启动性能：异步化         渲染优化         网络优化         移动端性能优化         CDN加速   2. 兼容性         浏览器兼容性             normalize.css             html5shiv.js             respond.js             babel             polyfill         屏幕分辩率兼容         跨平台兼容     3.seo         robots.txt/description/keywords/sitemap/html标签优化/站内链接建设/友情链接     4.安全         xss/csrf/反爬虫/SQL注入/DOS