一. 初始化项目 1.按步骤提示初始化：1# pnpm pnpm create vite # npm npm init vite@latest # yarn yarn create vite 2.快速初始化（建议使用）：1# pnpm pnpm create vite project-name -- --template vue-ts # npm 6.x npm init vite@latest project-name --template vue-ts   # npm 7+, 需要额外的双横线： npm init vite@latest project-name -- --template vue-ts   # yarn yarn create vite project-name --template vue-ts 注意：由于 vue3 和 vue2 配置不同，需要安装不同的应用插件 vue3 需要应用 volar 以下两个插件，禁用 vetur； vue2 需要应用 vetur 插件，禁用 volar 二. ref 小技巧： 控制台设置勾选 启用自定义格式设置工具（开启 ...

简介HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。HTML5 由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。与传统的技术相比，HTML5 的语法特征更加明显，并且结合了 SVG 的内容。这些内容在网页中使用可以更加便捷地处理多媒体内容，而且 HTML5 中还结合了其他元素，对原有的功能进行调整和修改，进行标准化工作。HTML5 在 2012 年已形成了稳定的版本。2014 年 10 月 28 日，W3C 发布了 HTML5 的最终版。 新特性 新的语义元素一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义元素实例: <div> 和 <span> - 无需考虑内容。语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容。HTML5中新增了较多的语义元素来明确一个Web页面的不同部分。 123456789&l ...

方法一: 通过 sreenfull 插件12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061<template> <div> <svg-icon :icon-class="isFullscreen?'exit-fullscreen':'fullscreen'" @click="click" /> </div></template><script>import screenfull from 'screenfull'export default { name: 'Screenfull', data() { return { isFullscreen: false ...

效果如下: html:123456789 <div class="top-item" v-for="(item,index) in logPlusStatistics" :key="index" :style="{borderLeftColor: colors[index]? colors[index]:colors[colors.length-1], backgroundColor: bgColors[index]? bgColors[index]:bgColors[bgColors.length-1],}"> <a-tooltip placement="top"> <template slot="title"> <span> {{ item.label }} </span> </template> ...

1.pc 端,提供配置和预览两个功能 1.配置公共组件123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188<template> ...

平时工作中常用的一些在线使用的插件，推荐给大家：1.免费的压缩软件（图片压缩，视频压缩，PDF 压缩，Word 压缩，PPT 压缩）https://yasuo.xunjiepdf.com/img/ 2.文件的相互转换（jpg 转 png，pdf 转 doc，viddo，audio 等等）https://www.aconvert.com 3.快速、简单的在线修改图片工具 - 改图宝（修改图片尺寸，压缩图片）https://www.gaitubao.com/ 4. Squoosh（压缩图片）https://squoosh.app/ 5. ABCD PDF 在线转换工具（支持各种文件转换，压缩，编辑，合并，签名）https://abcdpdf.com/zh-cn/ 6.时间戳转换https://tool.lu/timestamp/ 7. Undraw（免费的 SVG 插图）https://undraw.co/ 8. iconfont（阿里巴巴矢量图标库，字体库）https://www.iconfont.cn/ 9. 5 个免费的字体下载网站！无版权可商用字体合集！https://baijia ...

dom-to-image 和 html2canvas dom-to-image 配置没 html2canvas 多,但是兼容性好一点，不会有生成的和页面不一样的情况,html2canvas 会因为一些 css 样式不支持，搞出来的奇丑 1.html2canvas12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970// 引入html2canvasimport html2canvas from 'html2canvas'// id 为导出节点ID imgName 导出文件名称export function getImg(id, imgName) { var getPixelRatio = function (context) { // 获取设备的PixelRatio var backingStore = context.back ...

修改 node_modules 下的 hexo-asset-image 下的 index.js 初始代码备份 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970'use strict';var cheerio = require('cheerio');// http://stackoverflow.com/questions/14480345/how-to-get-the-nth-occurrence-in-a-stringfunction getPosition(str, m, i) { return str.split(m, i).join(m).length;}hexo.extend.filter.register('after_post_render', function(data)& ...

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub. Quick StartCreate a new post1$ hexo new "My New Post" More info: Writing Run server1$ hexo server More info: Server Generate static files1$ hexo generate More info: Generating Deploy to remote sites1$ hexo deploy More info: Deployment