Vuex 的简单使用

Vue 组件之间有很多种通信方式,例如 props、ref、$emit 等。但是这些通信方式都有一个问题就是一次只能和一个组件通信,如果要把值传给多个组件就需要写多行代码,而且对于层级较多的组件来说需要传很多次,不太方便。Vuex 是 Vue 的一个状态...

JavaScript 复制文本和读取剪贴板

在很多提供在线翻译服务的网站和 APP 的译文区域基本都有一个复制的按钮,点击就可以一键复制翻译结果,不需要手动选择复制。除了翻译网站外,很多需要提取内容的网站也都提供一键复制功能。这里就来简单写一下 JavaScript 在浏览器环境下的复制文本和读取...

Linux 安装最新 Node.js 并配置环境变量

今天准备在服务器上构建一个前端项目,我的服务器用的 Linux 是 CentOS 7,我通过 Yum 安装了 Nodejs。在运行构建命令的时候出现了一堆错误信息,项目也无法成功构建,其中的一段错误信息如下:npm ERR! Make sure you ...

ES6 代码转义器 SWC 体验

SWC 是一个类似于 Babel 的代码转义器,它的主要功能就是把 ES2015 或更高版本的 JS 代码转换为老浏览器能够使用的 ES5 或更低版本的 JS 代码。SWC 是使用 Rust 语言编写的,相比 Babel 来说,速度要更快。按照官网的说法...

Bootstrap 按需引入

在使用 Bootstrap 的时候,为了方便,可能通常都会选择直接引入官方编译的 CSS 和 JS。直接引入官方的 CSS 和 JS 虽然方便,但是体积也比较大,如果你能用到它的所有功能也倒还好,但是大多数情况下可能用不到它的所有功能。可能你只是想用它的...

前端打包工具 PARCEL 的简单使用

在 Webpack 的使用中,配置文件算是 Webpack 比较难的一个部分。使用 Webpack 搭建一个项目,需要配置各种 Loader 和插件,对于不太熟悉的新手来说,非常容易出错。PARCEL 是一个零配置的 Web 打包工具,不需要任何配置就能...

JavaScript 通过浏览器导出和读取本地 JSON 文件

最近我准备给我的博客主题增加一个备份主题配置的功能,我使用的方案是通过导出主题的设置来备份。因为不需要导入数据库,所以可以直接通过 JS 获取表单内容,然后导出为 JSON。导入配置也是直接读取本地的 JSON 文件,然后根据 JSON 的配置信息设置表...

Webpack 本地服务器设置代理

因为浏览器同源策略的限制,AJAX 是不能跨域请求的,只有后端设置了 header 才能跨域请求。对于前后端分离的项目来说,前端如果要测试 API 就需要后端设置 header 来配合前端,前端在发送请求也需要输入完整的域名,而且也不方便传递 Cooki...

ESLint 配合 Webpack 使用

ESLint 是前端的一个代码检查工具,它可以根据指定的规则来检查代码是否符合规范。ESLint 可以直接在命令行使用,也可以集成到编辑器中使用,也可以配合 Webpack 使用。之前简单写了一下命令行使用和集成到 VSCode 使用,这里继续写配合 W...

JS 根据文章中的标题生成目录索引

在浏览一些博客或 wiki 类网站的时候,你可能会发现在文章的开头或侧边会有一个目录,点击就可以跳转到指定的章节。对于比较长的文章来说,目录还是比较重要的。通过目录可以快速了解文章包含的内容,要查看某个章节也可以直接跳转。最近准备给博客增加一个生成文章目...