LeDao's Blog

打包项目使用下面命令将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 配置文件的语法和结构是否正确，而不会加载或应用这些配置，如果配置文件中存在语法错误或其他 ...

介绍和使用浏览器的全文翻译（机器翻译）相比，使用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& ...

介绍这里说的页面全屏和Microsoft Edge浏览器的F11快捷键的效果是一样的，Vue项目可以通过screenfull插件来实现 实现过程安装1npm install screenfull --save 常用方法 使用在要实现页面全屏效果的页面引入 1import screenfull from "screenfull" 实现页面全屏或退出全屏都直接调用下面函数即可 123const fullScreenOrNot = () => { screenfull.toggle();}

介绍uni-app 是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台 创建过程安装开发工具开发uni-app项目指定的开发工具是HBuilderX，下载地址为：HBuilderX-高效极客技巧 (dcloud.io) 开始创建文件>>路径>>项目 一般直接选择默认模板进行开发 运行项目运行到浏览器可以运行到电脑上安装的浏览器，也可以运行到HBuilderX内置的浏览器（推荐使用），第一次运行会自动安装一些插件 运行到小程序我这里说的小程序是微信小程序，需要先安装微信开发者工具，安装地址为：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)，安装好后打开服务端口（设置>>安全设置） 在HBuilderX中运行到微信开发者工具，会让我们配置微信开发者工具的安装路径，然后会自动打开微信开发者工具即可查看效果

概述和输入验证码相比，使用右滑拼图验证对用户更友好 右滑拼图验证插件的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是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 ...

制作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） 重装系统进 ...

概述有时候需要学习一下其它版本的JDK，那么就需要安装多个JDK了，然后通过修改环境变量来实现切换JDK的版本，我这里安装的是JDK1.8和JDK11两个版本，继续安装其它的版本也是一样的步骤 下载 版本 阿里云盘链接 JDK1.8.0_202 阿里云盘分享 (aliyundrive.com) JDK11.0.18 阿里云盘分享 (aliyundrive.com) 配置环境JAVA_HOME直接引用要切换的JDK的安装路径，JAVA_HOME_8和JAVA_HOME_11是JDK的安装路径 Path变量的设置和博客Java 环境配置 | LeDao’s Blog (zoutl.cn)的一样就行，Path变量的设置要放在第一行 变量名 变量值 说明 JAVA_HOME %JAVA_HOME_8% 用于切换JDK版本 JAVA_HOME_8 D:\Java\jdk1.8.0_202 jdk1.8.0_202的安装路径 JAVA_HOME_11 D:\Java\jdk11.0.18 dk11.0.18的安装路径 切换JDK直接修改JAVA_HOME这 ...

介绍TypeScript 是JavaScript的一个超集，支持ES6标准，由微软开发的自由和开源的编程语言，TypeScript的设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上 安装我是使用npm命令安装，命令如下： 1npm install -g typescript 查看是否安装成功，输入下面命令查看版本号，出现版本号说明安装成功 1tsc -v 测试首先新建一个名为test.ts的文件，内容如下： 12let message: string = "Hello World!!";console.log(message); 在上面ts文件所在文件夹打开cmd命令窗口，输入下面命令编译这个ts文件，会在该文件所在文件夹生成一个test.js的文件（用来运行，而不是运行ts文件，ts文件只是用来编译生成js文件的） 1tsc test.ts 使用Node.js的命令运行js文件，会输出Hello World!! 1node test.js 配置TypeScript是有一个名为tsconfi ...

区别margin对整个标签起作用，是外边距；而padding对标签的内容起作用，是内边距 下图中div2使用了margin和padding，margin是div2和div1的边距，padding是div2和div3的边距 使用margin 语法结构 说明 margin-left:10px 左外边距 margin-right:10px 右外边距 margin-top:10px 上外边距 margin-bottom:10px 下外边距 margin:10px 四边统一外边距 margin:10px 20px 上下、左右外边距 margin:10px 20px 30px 上、左右、下外边距 margin:10px 20px 30px 40px 上、右、下、左外边距 padding 语法结构 说明 padding-left:10px 左内边距 padding-right:10px 右内边距 padding-top:10px 上内边距 padding-bottom:10px 下内边距 padding:10px 四边统一内边距 ...