admin – 第 48 页

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

Shards Vue 入门

Shards Vue 是一款美观而现代的 Vue.js UI 工具包，包含数十个自定义的预构建组件，您可以使用它们来启动您的下一个应用程序。该库是从头开始构建的，目标是占用空间非常小并提供易于使用且功能强大组件。该库基于核心Shards UI 套件和Bootstrap 4，因此如果您已经熟悉 Bootstrap 4，那么在使用 Shards Vue 时您会感到非常轻松自如。开始使用 Shards Vue 非常简单。 1.安装首先，确保通过 npm 或 Yarn 安装库，具体取决于项目的设置方式： $ yarn add shards-vue # Install via Yarn $ npm install shards-vue # Or install via NPM 2. 注册下一步是包含基本 Shards 和 Bootstrap 样式表，并在应用的入口点内注册该库。只需几行代码即可实现此目的： i…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

使用 vue-cli 3、webpack 和 Vue Router 实现延迟加载组件

SPA（单页应用程序）通常由数十甚至数百个组件组成，这些组件可以分成几个 JavaScript 包文件。本文的目的是展示一种进行这种划分的方法，以及如何异步加载每个文件，只有当从路由更改请求组件时才加载。这种异步行为称为延迟加载，可以减小初始包的大小。项目创建我们来新建一个项目，按照以下命令使用vue-cli 3来创建： $ vue create my-app ... Vue CLI v3.0.0-beta.9 ? Please pick a preset: Manually select features ? Check the features needed for your project: ( ) TypeScript ( ) Progressive Web App (PWA) Support (*) Router ( ) Vuex ( ) CSS Pre-processors >(*) L…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

使用 vuex-pathify 驯服 Vuex 野兽

就 Flux 架构实现而言，Vue.js 的 Vuex 是最简单但最优雅的实现之一。但是，它仍然可以做得更好。试图记住为商店中的每个属性编写 getter 和突变似乎有点不必要的认知开销。为什么我们需要手动映射 getter、突变和操作？Dave Stewart的commit“和dispatchagain”之间有什么区别？试图通过为 Vuex 功能提供简单的包装器并依靠惯例来减少样板来减少所有这些脑力开销。vuex-pathify 本文假设您有一个已设置 Vuex 的 Vue.js 项目，并且您了解其工作原理的基本知识。如果没有，请查看我们的Vuex 指南。安装 vuex-pathify 首先，继续安装 pathify 并在基本 Vuex 存储配置中将其作为插件启用。 $ npm install --save vuex-pathify 然后在您的商店中启用该插件。 ma…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

在 Jekyll 中压缩你的 HTML

就像 CSS 和 JavaScript 一样，可以通过删除空格、换行符、注释甚至删除某些可选的结束标记来压缩和缩小 HTML 输出，从而减小文件大小。例如，查看此页面的源代码以查看此类压缩的结果。使用 Jekyll，一个名为jekyll-compress-html 的插件可以帮助您做到这一点。该插件使用纯 Liquid 语法来完成 HTML 压缩，因此它不依赖任何东西。安装只需两个简单的步骤即可开始使用该插件：下载并解压插件压缩.html文件并将其放置在_布局Jekyll 设置的文件夹。在你的最顶层插件中，通常默认.html，添加以下前言： --- layout: compress --- 用法现在插件已安装并设置完毕，您可以在_config.yml文件。例如： compress_html: clippings: all comments: [""] end…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

使用 DOMParser 解析 HTML 字符串

我正在使用WP Rest API 插件将 WordPress 博客中的内容访问到 Ionic 2 应用程序中。WP Rest API 返回帖子内容的 HTML 字符串，这可能很难处理。不过幸运的是，DOM解析器Web API 可以轻松地将 html 字符串解析为完整格式的 DOM。首先实例化一个新的 DOMParser 实例，并使用以下方式将 HTML 字符串传递给它解析字符串（）对于此示例，假设我们将 HTML 字符串存储在名为 htmlContent 的变量中： let parser = new DOMParser(); let parsedHtml = parser.parseFromString(htmlContent, 'text/html'); 现在解析后的Html是一个可以交互的 DOM 对象。让我们从中提取一些内容： // The src of the first image: let f…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

AMP HTML 概述

AMP 代表“加速移动页面”，是 Google 提出的一项开源计划，旨在创建一种统一的方法，使网站在移动设备上的加载速度提高一个数量级。AMP 应该被证明是一种让移动设备上的网络体验更好的好方法，尤其是对于那些网速较慢的用户来说。 AMP 限制了 HTML、CSS 和 JavaScript 的某些部分，以确保快速的体验。为了弥补额外的限制，它还附带了一些组件，让您可以执行诸如嵌入视频、集成轮播和许多其他有趣的事情。AMP 将被 Twitter、Pinterest 和 Google 等渠道用于链接到移动设备上的超快页面版本。在此处试用 Google 中的 AMP 页面演示。入门按照如下方式启动您的 AMP HTML 页面： <!doctype html> <html > <head> <meta charset="utf-8"&…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

JUnit HTML 报告

当我们配置maven-surefire-plugin运行 JUnit 测试时，它会生成surefire-reports目录。此目录包含每个测试类的一个 txt 文件和一个 XML 文件。但是，读取这些文件并不容易，而且也不容易向非技术人员解释。 JUnit HTML 报告我们可以使用maven-surefire-report-plugin插件为我们的 JUnit 测试生成基于 HTML 的报告。此报告可以导出并与团队共享。这也是一种了解测试进展的简单方法，尤其是当您将它们与 Jenkins 等 CI 工具集成时。从我们的 maven 项目生成 JUnit HTML 报告有两个步骤。添加maven-surefire-report-plugin到pom.xml报告元素。 <reporting> <plugins> <plugin>…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

如何在 HTML 中使用 Preload 和 Prefetch 来加载资源

介绍加载页面上的资源是实现最佳网页性能和无缝用户体验的重要部分。通常，实际应用会加载多个 CSS、字体、JavaScript 和图片文件。这些资源默认会阻止渲染，从而影响加载性能。在本教程中，您将探索一项名为资源提示的新功能，例如预加载和预取。这些资源提示将帮助您克服渲染阻塞。先决条件要完成本教程，您需要以下内容：下载并安装 Google Chrome。本教程基于 Google Chrome 86.0.4240.80 版本。对 HTML 的理解，您可以在“如何使用 HTML 构建网站”系列中找到。对 JavaScript 有基本的了解。本“如何使用 JavaScript 编码”系列可帮助您实现此目标。第 1 步 - 了解渲染阻塞当对资源的请求是渲染阻塞时，这意味着该window.onload事件在该请求完成之前不会被触发。在现代单页应用中，大多数资产…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

使用 Ionic Native 在 Ionic 2 中进行社交共享

Social Sharing 是Ionic Native的一部分，它允许轻松地将原生共享功能添加到您的应用。操作方法如下：首先从命令行安装 Social Sharing Ionic Native 插件： $ ionic plugin add cordova-plugin-x-socialsharing 然后将其导入到你的组件中： import { SocialSharing } from 'ionic-native'; 以下是如何使用它分享选项()方法可通过社交共享插件使用。 shareWithOptions() 触发设备的本机共享表： shareRecipe() { SocialSharing.shareWithOptions({ message: `${this.title} - ${this.description}: ${this.recipeUrl}` }).th…

2024年8月26日

发表 admin at 2024年8月26日

类别

未分类

面向中级 Linux 用户的 20 个高级命令

您可能已经发现第一篇文章非常有用，本文是Linux 新手的 20 个有用命令的扩展。第一篇文章是针对新手的，而本文是针对中级用户和高级用户的。在这里，您将找到如何自定义搜索、了解正在运行的进程指南以终止它们、如何使您的Linux终端高效（这是一个重要方面）以及如何在 nix 中编译c、c++、java程序。 20 个 Linux 高级和专家命令 21. 命令：查找在给定目录中搜索文件，按层次结构从父目录开始并移动到子目录。 root@example:~# find -name *.sh ./Desktop/load.sh ./Desktop/test.sh ./Desktop/shutdown.sh ./Binary/firefox/run-mozilla.sh ./Downloads/kdewebdev-3.5.8/quanta/scripts…