前端基本知识及问题（持续更新）

1、前端如何实现word导出？

使用docxtemplater，需要word模板，但功能有限制，复杂功能无法实现

2、前端如何实现pdf导出？

可使用pdfmake，由于默认不支持中文，因此需要引入中文字体包，体积较大，酌情使用

3、vue多级路由如何实现路由缓存？

vue三级及以上层级路由默认无法缓存，原因是keepalive只能缓存到二级标签，解决方案：①将二级标签组件强行放入缓存，但由于一般而言所有二级路由标签公用同一个组件，因此会有一些奇怪的未知问题，舍弃；②在路由跳转前监听路由，删除所要跳转路由之前的所有中间层级路由，使跳转路由变为二级标签，测试后发现未发现任何问题，完美解决。

4、vue钩子函数的特点

vue的钩子函数遵循的特点：

①生命周期函数（mounted，created等）都是一个方法（原因：能直接调用函数中的代码块）；

父子组件生命周期执行顺序: 父beforeCreat，父created，父beforeMount，子beforeCreat，子created，子beforeMount，子mounted，父mounted，父beforeDestory，子beforeDestory，子destroyed，父destroyed

②其余钩子函数是多为对象（components、metheds、watch、computed等）（原因：都需要设置变量用来调用）；

③特别钩子：name为字符串（原因：命名是唯一的字符串），mixins为数组（原因：直接引入多个代码块不需要其它调用），data为return一个对象的方法（原因：js的特性，为了避免多个组件之间的data是引用数据类型导致修改一个数据地址所有data的地址都变化，function不会有这个问题）

5、如何实现跨域

跨域除了后台放开访问限制以外，前端可以用以下方式实现

①使用jsonp请求实现跨域

②使用标签实现跨域（所有自带src属性的标签都可以）

③可以通过配置代理实现跨域

④移动端可以通过使用android或ios原生请求（原生请求没有跨域这一概念）

前两种只能用于get请求，通常用来访问静态资源；正常web端框架（vue，angular等）建议使用第三种；移动端第三种无效，建议使用第四种

6、css扩展语言sass、scss、less的区别

css有三种常见的扩展语言sass、scss，less，scss就是sass 3，对于sass的的缩进语法做了优化，更符合开发习惯。

scss和less 的区别：

①开发环境不同；

②变量定义不同，scss用$，拼接变量则在外层添加#{}，less用@；

③变量作用域不同，less变量只在花括号内部生效，scss所有变量在当前文件作用域生效；

④scss支持使用条件语句和循环语句，使用方式：@if ... {...} @else if ... {...} @else {...}   @for...from...to...    @for...from...through...      @each...in...，less则不支持。

总结：正常项目使用scss，使用sass的项目建议使用scss替换，没有复杂样式逻辑的项目使用less

7、怎样实现拖拽排序

可以基于draggable组件实现拖拽排序，组件使用方式： vue.draggable中文文档

8、前端性能优化方式

1、CDN分发加速（将资源文件提给cdn厂商，让厂商去智能拉取，主要的工作是把我们需要被分发的内容分发到世界各地的各个节点上，让世界各地的人都可以在距离最近的网络节点拿到想要拿到的内容，减少网络传输距离从而达到加速的目的）

2、减少网络请求（减少建立网络连接的次数）

3、使用服务端渲染替代客户端渲染（服务端渲染不需要二次调用页面资源，但对服务器压力较大，并且对前后端分离不友好，对SEO搜索引擎优化较好，加快了页面访问速度）

4、将 CSS 放在文件头部，JavaScript 文件放在底部（CSS 执行会阻塞渲染，阻止 JS 执行，先加载 HTML 再加载 CSS，会让用户第一时间看到的页面没有样式，JS 加载和执行会阻塞 HTML 解析，JS 文件也不是不可以放在头部，只要给 script 标签加上 defer 属性就可以了，异步下载，延迟执行。）

5、使用字体图标 iconfont 代替图片图标（iconfont文件较小且不会失真）

6、减少重绘重排（重排会导致重绘，重绘不一定导致重排）

7、使用事件委托（事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存）

......

9、怎样实现excel导入、导出、在线编辑、打印

1、excel在线编辑基于第三方依赖luckysheet；

2、导入基于elementUi的el-upload文件上传组件，并可以使用luckyExcel第三方依赖导入在线编辑的luckysheet中；

3、导出功能基于luckysheet获取的数据使用exceljs第三方依赖绘制excel

4、打印功能基于luckysheet提供的获取当前选中文档图片的功能使用window.print方法实现，也可以使用第三方依赖vue-print-nb实现

详细实现看：在前端实现excel导入，在线编辑，导出，打印等功能_梦落飞雪的博客-CSDN博客

10、怎样实现调用cmd命令行启动exe文件

1、在IE浏览器可以通过创建ActiveXObject（只在IE可用）实例调用命令行

2、其余浏览器可以通过使用自定义协议的方式先注入协议，通过协议调用命令

3、electron打包出来的exe程序可以通过node.js中的child_process调用其它exe程序

11、vue3.0怎么打开打包后的项目

1、在vue.config.js的module.export中添加以下属性

  // 基本路径
  publicPath: process.env.NODE_ENV === "production" ? "./" : "./",
  // 输出文件目录
  outputDir: "dist",
  lintOnSave: false, // eslint 是否在保存时检查
  assetsDir: "static", // 配置js、css静态资源二级目录的位置
  indexPath: "index.html",

2、在本地打开需要将资源放置服务器上，可以使用轻量级的web服务器http-server

使用方式：①已安装node的环境全局下载：npm install http-server -g；②打开cmd，打开index所在的文件夹，运行http-server，点击出现的链接就可以运行项目了