使用npkill查找和清理node_modules包
介绍进行前端开发时,电脑上会有很多node_modules包,会占用很多磁盘空间,我们可以把一些暂时不会打开的项目的node_modules包删除掉,等到要运行项目的时候再安装回来,如果我们一个个手动删除的话,会很麻烦
npkill可以很好的解决上述问题,不仅可以快速找到某个文件夹下的全部node_modules包,还可以根据路径、大小和上次修改时间进行排序,管理起来更加方便
安装打开cmd然后执行下面命令即可完成安装,不安装也可以使用npkill
1npm i -g npkill
使用cmd进入一个文件夹后,执行下面命令即可搜索该文件夹下的全部node_modules包,方向键的上下可以选择node_modules包,用空格键删除,直接删除不会有确认提示
不安装使用1npx npkill
安装后使用1npkill
参数一般只用到-s参数根据size进行排序
参数
说明
默认
-c, --bg-color
更改行突出显示颜色,可用颜色有: blue,cyan,magenta,white,red ,yellow
blue
-d, --directory
设置要开始 ...
IntelliJ IDEA使用MyBatisX插件生成基础代码
介绍使用MyBatis-Plus开发时,一般开发的顺序都是:新建数据库表、实体类、Mapper接口、Mapper.xml文件、Service接口、Service接口实现类,然后才进行相应业务的开发工作
上面的操作都是重复性的,如果已经熟悉了MyBatis-Plus的基本使用,经常做这些重复性的工作对我们没有什么好处,如果这些操作可以自动完成,就可以提高工作效率了
MyBatis-Plus官方出了一个名叫MyBatisX的插件,可以有效解决上述问题,我们只需要自己手动在数据库中新建一张表,然后就可以使用插件自动生成实体类、Mapper接口、Mapper.xml文件、Service接口、Service接口实现类的基础模板了
使用安装直接到IntelliJ IDEA的插件市场安装即可
连接数据库需要在IntelliJ IDEA中配置数据源,具体操作步骤查看博客:IntelliJ IDEA 连接 MySQL 数据库 | LeDao’s Blog (zoutl.cn)
开始生成右键点击对应的数据库表,然后选择MybatisX-Generator
然后配置生成代码的存放位置,图片下的表格是参数的 ...
Vim常用命令或快捷键
介绍Vim是Vi的升级版本,可以当作Vi来使用,完全替代Vi,也就是说:不要使用Vi了,而是使用它的升级版本Vim
下面只列举了一些我常用的命令或快捷键,并不是列举全部,其它没有列出的命令或快捷键如果用到了就在下方放出
常用命令说明我把Vim命令的类型分为命令模式、输入模式和底线命令模式,vim 文件名打开文件后就是命令模式,在命令模式下按下i键就切换到了输入模式,在命令模式下输入:就切换到了底线命令模式
命令模式vim 文件名打开文件后就是命令模式
命令或快捷键
说明
:
切换到底线命令模式
i
切换到输入模式
x
删除当前光标所在处的字符
dd
删除光标所在行
/关键词
向下搜索关键词,按n查找下一个搜索结果,按N则查找上一个
?关键词
向上搜索关键词,按n查找上一个搜索结果,按N则查找下一个,和上面相反
v
切换到可视化模式,一般用于删除一段文本
r
切换到单字符替换模式,用于替换一个字符
R
切换到多字符替换模式,用于替换多个字符
输入模式在命令模式下,按下i键就切换到了输入模式,输入模式没有什么好说的,就和平时在Windows系 ...
在CentOS7系统中使用Nginx部署Vue项目
打包项目使用下面命令将Vue项目打包,会生成一个名为dist的文件夹,然后将它上传到CentOS7系统中,也可以重命名这个文件夹以作区分
1npm run build
修改Nginx配置在配置文件中加入下面代码,我的配置文件路径为/etc/nginx/conf.d/default.conf,如果是部署到云服务器需要在安全组或防火墙中开放端口,不然无法访问
123456789server { listen 8081; #访问的端口 location / { root /home/project/vue/project-template; #要部署的Vue项目存放的位置 index index.html index.htm; #首页文件 try_files $uri $uri/ /index.html; #防止刷新后自动跳到自带404页面 }}
重新加载Nginx配置文件首先使用下面命令测试 Nginx 配置文件的语法和结构是否正确,而不会加载或应用这些配置,如果配置文件中存在语法错误或其他 ...
Vue3项目使用i18n实现国际化
介绍和使用浏览器的全文翻译(机器翻译)相比,使用i18n实现国际化(人工翻译)应该会更准确,但是挺麻烦的,因为每一个组件的文字都需要翻译和配置
实现过程安装1npm install vue-i18n@next
新建语言配置文件在src目录下新建一个名为locales的目录,在这个目录下新建一个名为lang的目录、i18n.js和index.js文件,最后在lang目录下新建en.js和zh.js文件
en.js的内容如下:
1234567891011121314151617181920212223242526export default { menu: { name: 'Background', home: 'Home', userManage: 'Manage User', announcementManage: 'Manage Notice', typeManage: 'Manage Type& ...
Vue3项目实现页面全屏
介绍这里说的页面全屏和Microsoft Edge浏览器的F11快捷键的效果是一样的,Vue项目可以通过screenfull插件来实现
实现过程安装1npm install screenfull --save
常用方法
使用在要实现页面全屏效果的页面引入
1import screenfull from "screenfull"
实现页面全屏或退出全屏都直接调用下面函数即可
123const fullScreenOrNot = () => { screenfull.toggle();}
创建uni-app项目
介绍uni-app 是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台
创建过程安装开发工具开发uni-app项目指定的开发工具是HBuilderX,下载地址为:HBuilderX-高效极客技巧 (dcloud.io)
开始创建文件>>路径>>项目
一般直接选择默认模板进行开发
运行项目运行到浏览器可以运行到电脑上安装的浏览器,也可以运行到HBuilderX内置的浏览器(推荐使用),第一次运行会自动安装一些插件
运行到小程序我这里说的小程序是微信小程序,需要先安装微信开发者工具,安装地址为:微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com),安装好后打开服务端口(设置>>安全设置)
在HBuilderX中运行到微信开发者工具,会让我们配置微信开发者工具的安装路径,然后会自动打开微信开发者工具即可查看效果
Vue项目使用右滑拼图验证
概述和输入验证码相比,使用右滑拼图验证对用户更友好
右滑拼图验证插件的GitHub仓库地址为:javaLuo/vue-puzzle-vcode: vue 拼图人机验证 右滑拼图验证 (github.com)
Vue2和Vue3的使用文档都有,根据自己的需求选择,我使用的是Vue3
实现安装1npm install vue3-puzzle-vcode --save
使用下面是一个最简单的例子,使用的图片是内置的
1234567891011121314151617181920212223<template> <button @click="onShow">开始验证</button> <Vcode :show="isShow" @success="onSuccess" @close="onClose" /></template><script setup> import { ref } from " ...
Pinia的基本使用
介绍Pinia是Vue的专属状态管理库,它允许我们跨组件或页面共享状态,官方文档链接:Home | Pinia (vuejs.org)
安装我使用的Vue.js版本是3.2.45(也就是Vue3),并且项目使用Vite4创建的,Vue3安装Pinia只需要执行下面的命令即可,Vue2则还需要安装一个插件,这里不讨论,可以去查看官方文档:安装 | Pinia (vuejs.org)
1npm install pinia
使用创建实例传递给应用创建一个pinia实例(根store)并将其传递给应用
12345678import { createApp } from 'vue'import { createPinia } from "pinia"import './style.css'import App from './App.vue'const pinia = createPinia()createApp(App).use(pinia).mount('#ap ...
制作Windows 10的U盘启动盘重装系统
制作U盘启动盘下载Rufus下载地址:Rufus - 轻松创建USB启动盘
Rufus用来将下载好的ISO镜像文件制作成U盘启动盘,下载好后直接打开即可运行
下载ISO镜像文件下载地址:MSDN, 我告诉你 - 做一个安静的工具站 (itellyou.cn)
在这里可以找到各种版本的Windows系统,x64是64位系统,x86是32位,我们个人安装的是消费者版本(consumer editions)的系统,点击右边的详细信息复制ed2k链接后使用迅雷下载ISO镜像文件
开始制作打开Rufus后会自动检测插入的U盘,U盘的容量最好在8G及以上,开始制作前U盘会被格式化,如果有重要文件请先备份
设备选项的配置说明查看下表,格式化选项不用修改,状态是准备就绪就可以开始制作了
配置
说明
设备
选择要制作成启动盘的U盘,会自动选择
引导类型选择
选择镜像文件,然后点击右边的选择按钮后选中下载好的镜像文件
镜像选项
默认选择标准Windows安装就行
分区类型
磁盘的分区类型,这里默认选GPT就行
目标系统类型
只有一个选项UEFI(非CSM)
重装系统进 ...