Vue 2.5 发布了：15篇前端热文回看

时间：2019-02-27分类：Vue作者：编程之家用户

<div id="img-content">
<h2 id="activity-name" class="rich_media_title">Vue 2.5 发布了：15篇前端热文回看
<div id="meta_content" class="rich_media_meta_list"><span id="post-date" class="rich_media_meta rich_media_meta_text">2017-11-02<span class="Apple-converted-space"> <span class="rich_media_meta rich_media_meta_text rich_media_meta_nickname">前端大全

（点击上方公众号，可快速关注）

本文精选了「前端大全」2017 年 10 月的 15 篇热门文章。其中有职场分享、技术分享和技术资源。

注：以下文章，点击标题即可阅读

《》

我们很高兴宣布 Vue 2.5 Level E 的发布！本次发布包括多个功能提升并且我们推荐你查看发布说明来获取完整详细信息。在这篇文章中，我们将重点介绍一些更重要的的变化：更好的 TypeScript 集成，更好的错误处理，更好地支持单文件组件中的函数式组件以及与环境无关的服务端渲染。

《》

如果你是前端开发者，那你肯定知道或用过 Firebug。10月24日，Mozilla 工程师和 Firebug 团队领导 Jan Honza Odvarko 在 Mozilla 博客发文称， Firebug 是最流行且最强大的 Web 开发工具，有着非凡的成功。

《》

一个页面上两个div左右铺满整个浏览器，要保证左边的div一直为100px，右边的div跟随浏览器大小变化（比如浏览器为500，右边div为400，浏览器为900，右边div为800），请写出大概的css代码。

《》

loading随处可见，比如一个app经常会有下拉刷新，上拉加载的功能，在刷新和加载的过程中为了让用户感知到 load 的过程，我们会使用一些过渡动画来表达。最常见的比如“转圈圈”，“省略号”等等。

《》

Highcharts 6 已正式发布，为 Web 和移动开发人员提供了扩展的图表集合、客户端分析、注释和大量性能提升。Highcharts 6 包含 15 种新的图表系列类型，包括 Sankey diagram（桑基图）、Stream graph、Sunburst（旭日图）、Variwide Charts、Parallel coordinates、Variable radius pie、Vector plot、Wind-barbs、X-range 等。

《》

Chrome 有内置的开发者工具。它拥有丰富的特性，比如元素（Elements）、网络（Network）和安全（Security）。今天，我们主要关注一下 JavaScript 控制台。当我最初写代码时，我只会使用JavaScript控制台来打印服务器返回值或变量值。但随着时间推移和教程的帮助，我发现这个控制台能做的事远远超乎我的想象。

《》

用户看到的前端 vs 程序员看到的后端

《》

有成千上万的人为了得到一份工作而学习 JavaScript 和 Web 开发。通常，自学的人对 JavaScript 语言的理解并不深刻。令人惊讶的是，制作复杂的 Web 页面所需的语言很少。独立建设全站的人往往对 JavaScript 的基本原理不太了解。

《》

现在，我们被称为前端工程师。然而，早年给我们的称呼却是页面仔。或许是职责越来越大，整体的前端井喷式的发展，使我们只关注了js，而疏远了css和html。

《》

Mozilla、微软、谷歌、三星、W3C达成协议，准备将它们的所有文档网站统一，内容全部放到Mozilla MDN平台。MDN之前叫作“Mozilla Developer Network”，现在已经变成了“MDN Web Docs”品牌，它存放了所有网络标准（Web标准）文档，还有跨浏览器使用指令。

《》

这是一个建立在D3之上的库，目的是改进我们如何处理大型和凌乱的图形。它扩展了节点和链路与节点组的概念。它非常适用于当多个节点事实上是同一事物或属于同一组时。

《》

本文尝试一步步还原HTTPS的设计过程，以理解为什么HTTPS最终会是这副模样。但是这并不代表HTTPS的真实设计过程。在阅读本文时，你可以尝试放下已有的对HTTPS的理解，这样更利于“还原”过程。

《》

GitHub Universe 是 GitHub 的年度盛会，今年10月10-12日，GitHub Universe 大会在旧金山召开。同时，GitHub 也在其官网发布了 2017 年年度数据报告 —— GitHub Octoverse 报告。

《》

如果票选近二十年最伟大的发明，我相信搜索引擎肯定会占据一个不容小觑的位置，它不单是一项发明，更是一项成就，最大程度消灭了信息的不平等。既然人人都可以接触到海量的信息，那么衡量信息财富多寡就只剩下技巧这惟一的标准了：善用搜索引擎的都是信息时代的富翁，不懂搜索引擎的都是信息时代的负翁。

《》

最近 Mozilla 将 Firefox 57 浏览器 Beta 版发布，并正式将其命名为 Firefox Quantum。该品牌还包括一个新的标志。

往期热文回顾

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

关注「前端大全」，提升前端技能

相关推荐

Vuex- Action的 { commit }的写法

https://segmentfault.com/a/1190000022018995 https://www.jianshu.com/p/8c3599dda094 vuex教程中，有这样一句话和这样一段代码：实践中，我们会经常用到 ES2015 的参数解构来简化代码（特别是我们需要调用commi

ES6模块之export和import详解

ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的文件，在这个模块中所有的变量都对其他模块是不可见的，除非我们导出它。 ES6的模块系统大致分为导出（export）和导入（import）两个模块。 1、模块导出（export）可以导出所有的最外层函数、类

Vue知识点汇总（含Vue3）

from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ Vue知识点汇总（含Vue3）一、Vue 基础 1. Vue的基本原理当一个Vue实例创建时，Vue会遍历data中的属性，用 Object.defineProperty（vue3.0使

npm init vite@latest vue3study --template vue

D:\Temp>npm init vite@latest vue3study --template vuenpm ERR! code ETIMEDOUTnpm ERR! errno ETIMEDOUTnpm ERR! network request to https://registry.np

Vue 中使用消息总线让两个滚动条同步滚动

文章浏览阅读1.2k次。最近自己从零撸起的甘特图组件需要子组件的滚动条同步滚动这就涉及到子组件之间的互相通信，通过消息总线可以达到我们的需求 ,首先建立一个标志位，拖动左边滚动条的时候，右边的滚动条事件不处理，反之拖动右边滚动条时，左边的滚动条事件不做处理，建立一个公共的变量用于两者的互斥store.jsimport Vue from 'vue'export let store = Vue.observable({ scrollFlag: true})export let mutations =.._vue 能不能同时有两个滚动事件

Vue + lodop 静默打印

文章浏览阅读3.3k次，点赞3次，收藏16次。静默打印是什么？简单来说就是不需要用户点击"打印"，自动去打印，但是使用浏览器web打印不可避免的要弹出以下画面面对这种问题也只能用"富客户端"技术来解决，在浏览器的沙盒安全模型中无法做到，那么只能使用插件的技术，这个我们就不自己花力气去做了，我找来了 lodop 这个免费的打印组件，功能还是挺强大的，下载下图的发行包解压后安装下图两个exe如果你的系统是64位的，可以安装install_lodop64.exe上图的LodopFuncs.js 是客户端要使用的核心库文件..._this.$getlodop().then((lodop) =>{

Vue + DataV + SignalR 数字化大屏展示

文章浏览阅读1.7k次。个人觉得大屏展示其实很简单，噱头多过技术含量，下面使用了 DataV (不是阿里的那个DataV哈，具体链接在这里)开发了一个大屏展示，使用了css flex弹性布局，使用了DataV的一些比较酷炫的边框(SVG写的)，基本上功能没有全部完成，但是模子已经刻出来了，只是后端推送的内容没有全部写出来前端<template> <dv-full-screen-container class="screen-container"> <div class="ti_用signalr做一个简单的实时大屏显示

vue 下使用 exceljs + x-spreadsheet 带样式导入Excel

文章浏览阅读3.4k次，点赞3次，收藏10次。【说明】导入的Excel 字体颜色和背景色只能识别【标准色】,别的如"主题颜色"，exceljs 解析出来不是颜色值。导入的样式包括字体，字号，列宽，合并单元格，【部分能识别】的背景色，文字颜色。导入到 x-data-spreadsheet 如下图。原Excel样式如下。_x-data-spreadsheet

element ui 的 el-tab 当使用 router-view 时 mounted 执行了多次

文章浏览阅读1.7k次。之前参考某文章把 router-view 放在 el-tab-pane 外面都不起作用，问题根本不是出在 el-tab-pane，而是v-for 里面有多个route-view , keep-alive 时 tab 并未销毁掉，而是缓存隐藏了起来。需要把 router-view 的 name 与路由的 index.js 名称对应起来。之前参照很多文章修改试图修正这个问题，结果都徒劳，终于让我找到。我做了如下修改，主页面 main.vue。_el-tab-pane 后面接router-view

解决npm下载包的时候发生的依赖冲突

文章浏览阅读533次。今天在一台虚拟机上面运行老项目，报各种类型上图的错误提示，一开始还以为是less的问题，结果一个个装完还是报错，后面又说webpack, webpack cli有问题，头有点大了，google 一下，发现一个命令。讨论这个命令的文章，可以了解一下。运行以后终于出现了期待已久的。_npm install 忽略依赖

Vue2.0 组件实现动态模板(即Template)

文章浏览阅读8k次，点赞3次，收藏12次。从这篇文章得到启发先定义一个组件从外部接收Template，然后在组件里调用<template > <div ref="markedContent"></div></template><script>import Vue from 'vue/dist/vue.esm.js'export default { name: 'wf-marked-content', props: ['content'], mounte.._vue components 动态传入模板

Vue中使用froala富文本编辑器制作打印模板 + print.js 打印

文章浏览阅读5.4k次。参考上一篇知识开发的一个功能，制作一个打印模板的管理模块，如下(就是保存froala编辑后的html文本，其中包括Vue的Template，这样我们可以利用Vue的模板的优势来动态绑定一些数据源进行HTML的打印,基本上跟过去水晶报表做一个模板再绑定数据源的方法异曲同工)在 main.js 里引用 froala 组件// Import and use Vue Froala lib.import VueFroala from 'vue-froala-wysiwyg'// 引入 Fr.._vue设计网页打印模板

Vue3 使用 script-setup 语法糖

文章浏览阅读992次。计划是这样,公司的项目一直在持续改动,安装包总是需要频繁生成新的,由此我想到了"持续集成"!有自动化工具不用,岂不可惜?这周的主要时间就用来学习CruiseControl.Net全面实现持续集成_怎么在vue的 script部分使用 eldigloa

拿来改造主义，Vue + Element UI + Less 做了一个拖拽条

文章浏览阅读1.2k次。其实Element UI 只用了文字提示的 el-tooltip 组件，不喜欢可以去掉，不记得是从哪拿到的原始代码，我给加了高亮渐变显示，图标，和拖拽时只能拖拽图标的位置，效果如上图，可以水平方向拖动，也可以垂直方向拖动。样式是less写的，css写嵌套样式太繁琐了。拿来主义，改造有理!下面贴代码<template> <div ref="splitPane" class="split-pane" :class="direction" :"{ fl..._element ui拉条样式

vue 下使用 exceljs + x-spreadsheet 带样式导出Excel

文章浏览阅读953次，点赞2次，收藏2次。接上一篇，这次加入的是从x-speadsheet导出Excel，并且带有x-speadsheet中的样式，重点关注 exportExcel 这个方法，我加入了 tinycolor 这个库用来翻译颜色值，值得注意的是， exceljs的颜色值是 argb 不是 rgba，一定不要弄混了a 是代表的透明度放在最前面_x-data-spreadsheet 导出

Vue 动态连接线

文章浏览阅读5.5k次，点赞2次，收藏21次。尝试了两个连线库 jsplumb 和 leadline ，其实两个库都很强大，但是基于个人使用的习惯，决定还是用 leadline ，在Vue 下我使用它的一个包装库 leader-line-vue 下面是上图的连接线示例代码，连接线很轻松的就实现了一个渐变效果..._vue 连线

安装 Element UI 3.0 （即 Element UI Plus）正确方法

文章浏览阅读4.2k次，点赞2次，收藏5次。首先官网推荐的安装方法没有生成dist文件，导致样式表等这些文件并没有生成npm install element-plus --save以上方法是有问题的，如果不幸执行了上面的命令，那么先执行卸载npm uninstall element-plus删除 main.js文件对element ui的引用，输入以下命令vue add element-plus..._elementui3.0

Vue + Element UI 实现了一个周选择器

文章浏览阅读3.1k次。如上图，下面贴代码<template> <div> <el-date-picker size="large" style ="width:120px" v-model="selectYear" format="yyyy 年" value-format="yyyy" type="year" :clearable = "false" placeholder="选择年">.._vue多选周

自己开发的 Vue 下的甘特图组件已上传到GitHub上

文章浏览阅读1.8k次，点赞6次，收藏6次。经过 2021年的一个春节，从年前到现在，大致撸出一个甘特图，进度条是用SVG画的，使用了几个工具库（interactjs 用来处理拖拽和修改尺寸，snap.svg 用来处理 svg 的dom 操作，moment.js用来处理时间的操作），其他没有依赖任何的UI组件，目前初见雏形，还比较粗糙，后面会不断更新源码地址点击期间也摸索了怎么把vs code的项目上传到 GitHub 上面进行源代码的管理，基本上是参考的这篇文章做的..._vue gantt demo

封装 x-spreadsheet 带样式导入导出

文章浏览阅读2.1k次。接上两篇vue 下使用 exceljs + x-spreadsheet 带样式导入Excelvue 下使用 exceljs + x-spreadsheet 带样式导出Excel下面封装好一个组件调用组件的页面效果如图，目前“导出Json”还没有做_x-spreadsheet导入导出