博客分类
  • Git 2
  • Linux 11
  • Mysql 1
  • SEO 1
  • Win10 5
  • 前端 150
  • 后端 10
  • 文学 5
  • 英语 2
  • 视频 1
  • 诗歌 1
  • 资源 1
  • 软件 8
NUXT项目打包优化策略
用 nuxt 开发完项目之后,开开心心打包扔上服务器准备收工,却没多久,测试童鞋遗憾的告诉我,压测 50 并发未通过。what?好吧。咱们再接下来老老实实的研究怎么压缩打包优化性能。 性能优化,无外乎那几个方案:文件压缩,文件缓存,CDN,DNS 预解析。。。 这里我们首先看一下不加任何优化的项目,打包后的分布: 未优化 这里能看到 element-ui 占了绝大部分的打包空间,是因为全局引入了
2020-09-19 12:18:43 前端
Nuxt
Nuxt使用Plyr.js视频播放
安装依赖 vue-plyr npm i vue-plyr 1.vue-plyr.js import Vue from 'vue' import VuePlyr from 'vue-plyr/dist/vue-plyr.ssr.js' // The second argument is optional and sets the default config values for every
2020-09-18 19:32:48 前端
nuxt
Plyr – 一个轻量级的 HTML5 播放器
Plyr 是一个简单的可定制的 HTML5 媒体播放器,使用原生 JavaScript 没有其他依赖。支持 YouTube 和 Vimeo 。 特色 无障碍 – 完全支持 VTT 字幕和屏幕阅读器 轻量级 – 压缩后小于 10 KB 可定制 – 根据需求定制你想要的播放器 语义化 – 使用 正确的 元素。 <input type="range"> 用于音量,
2020-09-18 19:12:19 前端
JavaScript
vue 中使用 marked + highlight.js 代码高亮
markdown 代码高亮 需要依赖 npm install marked --save npm install highlight.js --save 这里使用的主题是monokai-sublime.css可以自行更换主题。 结果 <template> <div> <div class="hljs" ref="hlDi
2020-09-18 13:34:34 前端
Vue
用Vue.js和Tailwind CSS构建一个确认框
modal.vue <template> <div v-if="showing" class="fixed inset-0 w-full h-screen flex items-center justify-center bg-semi-75"> <div class="relative w-full ma
2020-09-17 01:40:55 前端
Vue
node使用 log4js
const log4js = require("log4js"); // log4js的输出级别6个: trace, debug, info, warn, error, fatal const config = { "appenders": { //设置控制台输出 (默认日志级别是关闭的(即不会输出日志)) "consoleo
2020-09-17 01:20:00 前端
Node
原生 js 实现移动端 Touch 轮播图
Touch 轮播图 touch 轮播图其实就是通过手指的滑动, 来左右切换轮播图, 下面我们通过一个案例, 来实现下. 1. html 结构 结构上, 还是用 ul 、 li 来存放轮播图片, ol 、 li 来存放轮播小圆点: 2. 样式初始化 html 的一些标签, 都会有一些默认样式, 比如 body 标签默认是有一个边距的, 为了不影响美观, 我们需要清除掉. /* 清除标签
2020-09-16 21:50:29 前端
轮播图
MySql 根据时间排序,重新生成主键
表名:blog 步骤如下: 复制 blog 结构 重置 blog_copy 表,主键递增值(截断表清空数据) 使用 insert into select 语句,从 blog 表根据时间排序搜索,插入 blog_copy 检查数据,删除 blog blog_copy 为 blog 表 例子(记得不要 select 原来的主键 id): INSERT INTO blogs_copy(title,
2020-09-15 16:12:32 前端
MySql
Vite、Vue3开发项目
NPM npm查看某个依赖版本 npm info vue-router versions npm添加依赖特定版本 npm add [email protected]^4.0.0-beta.7 npm升级某个依赖版本 npm update -g npm npm升级项目所有依赖版本 npm update 项目搭建 创建项目 npm init vite-app <project-n
2020-09-15 11:22:21 前端
ViteVue3
部署nuxt项目
后端 pm2安装 npm install pm2 -g 启动后端 pm2 start app.js 查看node和Pm2安装路径 which node # /usr/bin/node which pm2 # /usr/bin/pm2 软连接指向 ln -s /usr/bin/node/pm2 /usr/local/bin/pm2 Nginx配置代理服务 新建一个nuxtserver服务
2020-09-14 19:32:39 前端
nuxt
如何从 Debian 9(Stretch)删除 mariadb-server
卸载mariadb-server 要从Debian 9(Stretch)中仅删除mariadb-server软件包本身,请在终端上执行: sudo apt-get remove mariadb-server 卸载mariadb-server及其附属程序包 要从Debian Stretch中删除不再需要的mariadb-server软件包和任何其他从属软件包。 sudo apt-get autor
2020-09-14 19:30:49 前端
mariadb
如何在 Debian 9(Stretch)上安装 mariadb-server
安装mariadb-server 在Debian 9(Stretch)上安装mariadb-server软件包就像在终端上运行以下命令一样容易: sudo apt-get update sudo apt-get install mariadb-server MariaDB服务将自动启动。您可以输入以下内容进行验证: sudo systemctl status mariadb 设置开机启动 s
2020-09-14 19:29:27 前端
mariadb
ubuntu 20.04 设置不见了
ubuntu20.04 用着用着突然发现设置不见了,即使重启电脑还是找不到设置,后来通过扒帖子发现是一个包丢失了,gnome-control-center,重新安装一个这个包就好了 sudo apt install gnome-control-center 附上前面扒到的帖子: https://forum.ubuntu.com.cn/viewtopic.php?t=491114
2020-09-05 13:48:59 Linux
UbuntuLinux
Ubuntu20.04 安装 Mysql
Ubuntu20.04 安装 Mysql 1、方法一: 下载安装 MySQL(安装其他版本) 1.1 在官网下载 mysql 安装包 1.2 解压文件 1.3 安装 2、方法二:通过 apt 安装 MySQL 服务(推荐,会安装最新版) 2.1 初始化配置 2.2 检查 mysql 服务状态 3.1 配置远程访问 3.2 新建数据库和用户 3.3mysql
2020-09-04 14:19:55 Linux
Ubuntu
Ubuntu 20 初始化配置
Ubuntu 20 初始化配置 一、初始化配置 1.更新系统 # 更新本地报数据库 sudo apt update # 更新所有已安装的包(也可以使用 full-upgrade) sudo apt upgrade # 自动移除不需要的包 sudo apt autoremove 这里补充几个常用的清理命令: 命令描述apt autoclean将已删除软件包的. deb 安装文件从硬盘中删除ap
2020-09-02 21:32:11 Linux
Ubuntu
Debian 9上安装Node.js部署Nuxt项目
1.安装nodejs 要获得Distro-stable版本的Node.js,您可以使用apt包管理器。首先,刷新本地包索引: sudo apt update 然后从存储库安装Node.js包: sudo apt install nodejs 如果存储库中的软件包满足您的需求,那么您需要做的就是使用Node.js进行设置。 要检查在这些初始步骤之后安装了哪个版本的Node.js,请键入: nod
2020-08-14 09:17:37 Linux
node
VUE防抖与节流的最佳解决方案——函数式组件
函数防抖(debounce) 解释:当持续触发某事件时,一定时间间隔内没有再触发事件时,事件处理函数才会执行一次,如果设定的时间间隔到来之前,又一次触发了事件,就重新开始延时。 案例:持续触发scroll事件时,并不立即执行handle函数,当1000毫秒内没有触发scroll事件时,才会延时触发一次handle函数。 * @param {Function} fn 需要执行的函数 *
2020-08-13 21:19:52 前端
Vue
javascript - 使用正则表达式从路径中提取文件名
如何使用正则表达式从下面的URL中提取字符串“ XMLFileName” 可以使用split(),pop()和replace() ... var x = "C:\\Documents and Settings\\Dig\\Desktop\\XMLFileName.xml"; var filename = x.split('\\').pop().replace(/\..+$/,
2020-08-12 00:57:09 前端
正则