作者： admin

Git 初始化与首次提交流程
初始化 Git 仓库（如果还未初始化）
```
git init
```
添加文件并进行第一次提交（如果仓库已经有文件，那么这两步可以不用执行，配置好后续信息后，直接从服务器拉取代码即可。）
```
git add .
```
```
git commit -m "Initial commit"
```
创建 main 分支（如果当前不是 main 分支）
```
git branch -M main
```
设置远程仓库（如果尚未设置）
```
git remote add origin <你的远程仓库地址>
```
使用 git pull 将远程仓库的内容拉取到本地，并合并（如果有冲突的话，你需要手动解决）
```
git pull origin main --rebase
```
推送代码到 main 分支
```
git push -u origin main
```
-u 选项表示将 main 设为默认上游分支，之后你可以直接使用 git push，Git 会自动推送到 main。

如果要推送到 master 分支，那么就把上面的 main 替换为 master 即可。
2025年3月13日
git配置用户名和邮箱
```
$ git config --global user.name "laowu"
$ git config --global user.email "xxxx@outlook.com"
```
注意git config命令的–global参数，用了这个参数，表示你这台机器上所有的 Git 仓库都会使用这个配置，当然也可以对某个仓库指定不同的用户名和Email地址。

让Git显示颜色，会让命令输出看起来更醒目：
```
$ git config --global color.ui true
```
让git显示颜色这个功能，我测试没有效果，如果你也没有效果，那你不是一个人。
2025年3月12日
为 EasyUI TagBox 添加自动回车
在使用 EasyUI 的 TagBox 组件时，默认情况下，用户需要按回车键 (Enter) 才能添加标签。但有时用户可能会输入内容后忘记按回车，导致输入的标签未被添加。为了解决这个问题，我们可以通过 JavaScript 自动触发回车事件，让输入的内容自动转化为标签。

实现方法

使用 jQuery 触发 keydown 事件，并模拟按下 Enter 键，使得用户输入后能够自动完成标签添加。

代码示例
```
$('#tag').tagbox('textbox').trigger($.Event("keydown", { keyCode: 13 }));
```
说明
- $('#tag')：获取 TagBox 组件。
- .tagbox('textbox')：获取 TagBox 组件的输入框。
- .trigger($.Event("keydown", { keyCode: 13 }))：模拟用户按下回车键。
进一步优化

可以在输入框失去焦点时自动触发回车，以确保输入的内容被正确添加为标签。
```
$('#tag').tagbox('textbox').on('blur', function() {
    $(this).trigger($.Event("keydown", { keyCode: 13 }));
});
```
这样做的好处
1. 自动添加标签：用户输入后，即使忘记按回车，输入框失去焦点时也会自动添加标签。
2. 提高用户体验：减少用户手动操作的步骤，使交互更加流畅。
结论

通过以上方法，我们可以让 EasyUI 的 TagBox 组件自动处理用户输入，防止用户忘记按回车导致标签未添加的问题。这不仅提升了用户体验，还能使应用更加智能和易用。
2025年3月11日
EasyUI中tree获取半选中和选中的项
EasyUI中tree有三种选中状态，分别是 checked（选中）、unchecked（未选中）、indeterminate（部分选中）。

其中 indeterminate 状态比较特殊，主要表示只有部分子节点选中的父级状态，表现为选中框是个圆点。

EasyUI 为这三种状态的获取提供了比较好的方法：
```
var nodes = $('#tt').tree('getChecked'); // 获取选中的节点
```
```
var nodes = $('#tt').tree('getChecked', 'unchecked'); //获取未选中的节点
```
```
var nodes = $('#tt').tree('getChecked', 'indeterminate'); // 只获取部分选中的节点
```
```
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']); // 同时获取选中的和部分选中的节点
```
2025年3月10日
如何从零创建 Vue 项目
Vue.js 是一个流行的前端框架，可以用于构建现代化的 Web 应用。本文将介绍如何从零创建一个 Vue 项目。

1. 安装 Node.js

在创建 Vue 项目前，需要先安装 Node.js，因为 Vue 依赖 npm（或 yarn）来管理包。
- 访问 Node.js 官网下载并安装最新版。
- 安装完成后，可以运行以下命令检查安装是否成功：
```
node -v
npm -v
```
如果成功安装，会输出 Node.js 和 npm 的版本号。

2. 使用 npm 创建 Vue 项目

Vue 官方提供了 create-vue 工具来快速创建 Vue 3 项目。

运行以下命令创建一个新的 Vue 项目：
```
npm create vue@latest
```
在执行命令后，终端会提示你选择一些选项，例如是否使用 TypeScript、Pinia、Vue Router 等。根据需要进行选择。

如果希望直接指定项目名称，例如 my-vue-app，可以使用：
```
npm create vue@latest my-vue-app
```
然后进入项目目录：
```
cd my-vue-app
```
3. 安装依赖

Vue 创建完成后，需要安装项目依赖：
```
npm install
```
如果你使用 yarn 或 pnpm，也可以使用：
```
yarn install
# 或
pnpm install
```
4. 启动开发服务器

安装依赖后，运行以下命令启动本地开发服务器：
```
npm run dev
```
终端会输出一个本地访问地址，例如：
```
Local: http://localhost:5173/
```
打开浏览器访问该地址，即可看到 Vue 应用的默认页面。

5. 目录结构介绍

Vue 项目生成后，基本的目录结构如下：
```
my-vue-app/
├── node_modules/       # 依赖包目录
├── public/             # 静态资源
├── src/                # 源代码
│   ├── assets/         # 资源文件
│   ├── components/     # 组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
├── .gitignore          # Git 忽略文件
├── package.json        # 项目配置文件
├── README.md           # 项目说明文件
```
6. 构建生产环境代码

当开发完成后，可以运行以下命令打包生产环境代码：
```
npm run build
```
生成的静态文件会被放在 dist/ 目录下，可以部署到服务器。

7. 其他常用命令
- 运行测试：npm run test
- 格式化代码：npm run lint
至此，你已经成功从零创建了一个 Vue 项目，并可以进行开发和部署。希望这篇教程对你有所帮助！
2025年3月6日
npm 删除全局包
在使用 npm 安装全局包时，可能会遇到需要删除某些不再使用的包的情况。以下介绍两种删除全局 npm 包的方法。

方法一：使用命令行删除

npm 提供了 uninstall 命令，可以直接通过以下命令删除全局安装的 npm 包：
```
npm uninstall -g 包名
```
例如，要删除 express，可以运行：
```
npm uninstall -g express
```
执行此命令后，npm 会自动删除全局安装的 express 及其相关文件。

方法二：手动删除对应包

如果上述方法无法完全删除，或者你希望手动清理全局包，可以直接删除 npm 存储全局包的目录。

Windows 用户

全局 npm 包通常存放在以下目录：
```
C:\Users\你的用户名\AppData\Roaming\npm
```
你可以手动进入该文件夹，找到对应的包文件夹并删除。

此外，全局包的依赖通常存放在 node_modules 目录中，对应的路径是：
```
C:\Users\你的用户名\AppData\Roaming\npm\node_modules
```
在 node_modules 目录下找到需要删除的包，直接删除即可。

macOS / Linux 用户

在 macOS 或 Linux 系统上，全局 npm 包通常存放在 /usr/local/lib/node_modules 目录下。

你可以使用以下命令删除某个包：
```
sudo rm -rf /usr/local/lib/node_modules/包名
```
额外检查

删除全局 npm 包后，可以运行以下命令来检查是否删除成功：
```
npm list -g --depth=0
```
如果包名已经不在列表中，则说明删除成功。

希望这篇文章对你有所帮助！
2025年3月5日
npm使用淘宝源
众所周知，npm官方源在国内很慢，好在国内有一些厂家提供了国内的npm源镜像，比如淘宝的npm源，本文将教会你如何配置npm以使用淘宝源，在终端工具中执行下面的命令：
```
npm config set registry https://registry.npmmirror.com
```
执行后，即可把npm源设置为国内淘宝源。

如果想要改回官方源，可以执行下面的命令：
```
npm config set registry https://registry.npmjs.org
```
执行后，npm源就又变成了官方源。
2025年3月4日
Vue3 + Element Plus 日期时间选择器 (el-date-picker) 格式化指南
在 Vue3 + Element Plus 项目中，el-date-picker 是一个强大的日期时间选择组件，支持多种格式化方式。在使用 el-date-picker 组件时，我们可以通过 value-format 来控制其绑定值的格式。

1. value-format 参数介绍

在 el-date-picker 组件中，value-format 主要用于定义 v-model 绑定的数据格式。常见格式如下：

timestamp：时间戳格式，例如 1709376600000

YYYY-MM-DD：日期格式，例如 2025-03-02

YYYY-MM-DD hh:mm:ss：日期时间格式，例如 2025-03-02 14:30:00

YYYY/MM/DD HH:mm:ss：斜杠分隔格式，例如 2025/03/02 14:30:00

2. 示例代码

以下是一个 el-date-picker 组件的使用示例，绑定到 form.start_time，并使用 YYYY-MM-DD hh:mm:ss 作为 value-format。
```
<template>
  <el-form :model="form">
    <el-form-item label="开始时间">
      <el-date-picker
        v-model="form.start_time"
        type="datetime"
        value-format="YYYY-MM-DD hh:mm:ss"
        placeholder="请选择日期时间" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  start_time: '' // 初始值为空
});
</script>
```
3. value-format 的作用
- value-format 定义了 v-model 绑定的值的格式，适用于表单提交时传输标准化格式的数据。
- 如果不设置 value-format，默认绑定的是 Date 对象，而不是字符串。
- 在处理时间格式化时，建议根据后端要求设置合适的 value-format，如 YYYY-MM-DD HH:mm:ss 以确保数据兼容性。
4. format 与 value-format 的区别

参数作用
format 控制 UI 组件显示的格式
value-format 控制 v-model 绑定的值的格式

例如，如果 format="YYYY/MM/DD" 而 value-format="YYYY-MM-DD hh:mm:ss"，那么用户在界面上看到的格式是 2025/03/02，但提交的数据格式是 2025-03-02 14:30:00。

总结：

在 Vue3 + Element Plus 中，el-date-picker 组件的 value-format 参数用于控制数据的格式化，以便前后端数据交互。通过合理配置 value-format，可以确保数据在前端展示与后端存储之间保持一致。

如果需要更多自定义格式或处理时间转换，可以结合 dayjs 或 moment.js 进行进一步操作。

希望本文能帮助你更好地理解 el-date-picker 的格式化配置！
2025年3月3日
如何在 AdminLTE 中实现动态菜单高亮效果
在开发后台管理系统时，菜单的高亮效果是一个很常见的需求。它可以帮助用户快速识别当前所在的页面，提升用户体验。AdminLTE 是一个流行的后台管理模板，它提供了丰富的 UI 组件和功能，但默认情况下，菜单的高亮效果需要我们自己实现。

下面是一个简单的 JavaScript 代码示例，用于在 AdminLTE3 中实现动态菜单高亮效果。这段代码会根据当前页面的 URL，自动为对应的菜单项添加高亮样式。
```
<script>
	$(function () {
		/** add active class and stay opened when selected */
		var url = window.location;
		// for sidebar menu entirely but not cover treeview
		$('ul.nav-sidebar a').filter(function () {
			return this.href == url;
		}).addClass('active');
		// for treeview
		$('ul.nav-treeview a').filter(function () {
			return this.href == url;
		}).parentsUntil(".nav-sidebar > .nav-treeview").addClass('menu-open').prev('a').addClass('active');
	});
</script>
```
代码解析
1. 获取当前 URL：通过 window.location 获取当前页面的 URL。
2. 普通菜单高亮：通过 ul.nav-sidebar a 选择器找到所有侧边栏菜单项，然后使用 filter 方法筛选出与当前 URL 匹配的菜单项，并为其添加 active 类。
3. 树形菜单高亮：对于树形菜单（通常是有子菜单的项），代码会先找到匹配的菜单项，然后向上查找父级元素，添加 menu-open 类以展开菜单，同时为父级链接添加 active 类。
如果你用的是 AdminLTE2，那么可以使用下面的代码：
```
<script>
    $(document).ready(function () {
        /** add active class and stay opened when selected */
        var url = window.location;
        // for sidebar menu entirely but not cover treeview
        $('ul.sidebar-menu a').filter(function () {
            return this.href == url;
        }).parent().siblings().removeClass('active').end().addClass('active');
        // for treeview
        $('ul.treeview-menu a').filter(function () {
            return this.href == url;
        }).parentsUntil(".sidebar-menu > .treeview-menu").siblings().removeClass('active').end().addClass('active');
    })
</script>
```
2025年3月1日
JS格式化货币
在开发和金额有关的网站应用时，货币格式化是一个常见的需求。无论是电商网站的商品价格，还是财务系统的金额显示，我们都需要将数值以规范的货币格式呈现给用户。比如，将 1234567.89 格式化为 1,234,567.89，这样不仅更美观，也更容易阅读。

下面是一个简单而实用的 JavaScript 函数，可以帮助你轻松实现货币格式化。这个函数会将数值修约为两位小数，并添加千位分隔符，确保金额显示的规范性和一致性。

代码实现：
```
//language:js
// 格式化货币
function formatCurrency(value) {
    // 先将数值修约为两位小数
    let rounded = Math.round(value * 100) / 100;
    // 将数值转换为字符串
    let valueString = rounded.toString();
    
    // 检查是否有小数点
    let decimalPos = valueString.indexOf('.');
    // 如果没有小数点，添加".00"
    if (decimalPos === -1) {
        valueString += ".00";
    } else {
        // 否则, 确保小数部分至少有两位数字
        let decimalPart = valueString.substring(decimalPos + 1);
        if (decimalPart.length === 1) {
            // 如果只有一位小数, 添加一个0
            valueString += "0";
        }
    }
    
    // 添加千位分隔符
    let parts = valueString.split('.');
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    
    return parts.join(".");
}
```
代码解析
1. 修约数值：
  - 使用 Math.round(value * 100) / 100 将数值修约为两位小数。这样可以确保金额的精度符合货币显示的要求。
2. 处理小数部分：
  - 将数值转换为字符串后，检查是否存在小数点。
  - 如果没有小数点，直接添加 .00，确保金额始终显示两位小数。
  - 如果小数点后只有一位数字，则补一个 0，例如将 123.5 转换为 123.50。
3. 添加千位分隔符：
  - 使用正则表达式 /\B(?=(\d{3})+(?!\d))/g 在整数部分添加千位分隔符（逗号）。
  - 例如，将 1234567 转换为 1,234,567。
4. 拼接结果：
  - 最后将整数部分和小数部分拼接起来，返回格式化后的字符串。
使用示例：
```
console.log(formatCurrency(1234567.89)); // 输出: "1,234,567.89"
console.log(formatCurrency(1234.5));      // 输出: "1,234.50"
console.log(formatCurrency(1234));       // 输出: "1,234.00"
```
注意：

如果你需要更复杂的货币格式化功能（例如支持多国货币、自定义符号等），可以考虑使用现成的库，比如 Intl.NumberFormat，它提供了更强大的国际化支持。
2025年2月28日

参数	作用
`format`	控制 UI 组件显示的格式
`value-format`	控制 v-model 绑定的值的格式

作者： admin

实现方法

代码示例

说明

进一步优化

这样做的好处

结论

1. 安装 Node.js

2. 使用 npm 创建 Vue 项目

3. 安装依赖

4. 启动开发服务器

5. 目录结构介绍

6. 构建生产环境代码

7. 其他常用命令

方法一：使用命令行删除

方法二：手动删除对应包

Windows 用户

macOS / Linux 用户

额外检查

1. value-format 参数介绍

2. 示例代码

3. value-format 的作用

4. format 与 value-format 的区别

代码解析

如果你用的是 AdminLTE2，那么可以使用下面的代码：

代码解析