Pure Admin

https://pure-admin.cn
Admin
Pure Admin is an open-source, free, and out-of-the-box mid-to-back office management system template...
Tokens:35,014
Snippets:351
Trust Score:6.2
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install unplugin-element-plus

Source: https://pure-admin.cn/pages/FAQ

Use this command to add the unplugin-element-plus dependency for on-demand component loading.

```bash
  pnpm add unplugin-element-plus -D

```

--------------------------------

### Install dependencies with pnpm

Source: https://pure-admin.cn/pages/FAQ

Installs project dependencies using pnpm after clearing existing lock files and node_modules.

```bash
pnpm install
```

--------------------------------

### Install vxe-table Dependencies

Source: https://pure-admin.cn/pages/FAQ

Commands to install the necessary packages for integrating vxe-table.

```bash
pnpm add vxe-table xe-utils
```

```bash
pnpm add font-awesome -D
```

--------------------------------

### HTTP GET Request

Source: https://pure-admin.cn/pages/request

Demonstrates how to perform GET requests using params or URL query strings.

```typescript
import { http } from "@/utils/http";

// params传参
export const textRequest = (params?: object) => {
  return http.request("get", "/xxx", { params });
};

// url拼接传参
export const textRequest = (params?: object) => {
  return http.request("get", "/xxx?message=" + params);
};
```

--------------------------------

### Install lodash dependencies

Source: https://pure-admin.cn/pages/FAQ

Install the required lodash packages for the project.

```bash
pnpm add lodash lodash-es lodash-unified
```

--------------------------------

### Install lodash type definitions

Source: https://pure-admin.cn/pages/FAQ

Install the development dependencies for TypeScript support.

```bash
pnpm add @types/lodash @types/lodash-es -D
```

--------------------------------

### User API Interface

Source: https://pure-admin.cn/pages/request

Example of exporting a login interface using the platform's http utility.

```typescript
import { http } from "@/utils/http";
import { baseUrlApi } from "./utils";

/** 登录 */
export const getLogin = (data?: object) => {
  return http.request<any>("post", baseUrlApi("login"), { data });
};
```

--------------------------------

### Preview local build

Source: https://pure-admin.cn/pages/build

Runs a local preview of the production build.

```bash
pnpm preview:build
```

--------------------------------

### 使用 @pureadmin/cli 创建项目

Source: https://pure-admin.cn/pages/start

通过官方脚手架快速初始化项目，支持交互式模板选择。

```bash
npm install -g @pureadmin/cli
```

```bash
pure create
```

--------------------------------

### Build for production

Source: https://pure-admin.cn/pages/build

Generates a build using the .env.production configuration file.

```bash
pnpm build
```

--------------------------------

### Configure Gzip and Brotli Compression without Deletion

Source: https://pure-admin.cn/pages/buildgood

Set these values in .env.production to enable compression while keeping original files.

```text
开启 gzip 压缩
VITE_COMPRESSION = "gzip"

开启 brotli 压缩
VITE_COMPRESSION = "brotli"

# 同时开启 gzip 与 brotli 压缩
VITE_COMPRESSION = "both"

# 不开启压缩，默认
VITE_COMPRESSION = "none"
```

--------------------------------

### Configure Gzip and Brotli Compression with Deletion

Source: https://pure-admin.cn/pages/buildgood

Set these values in .env.production to enable compression and remove original files after compression.

```text
开启 gzip 压缩
VITE_COMPRESSION = "gzip-clear"

开启 brotli 压缩
VITE_COMPRESSION = "brotli-clear"

# 同时开启 gzip 与 brotli 压缩
VITE_COMPRESSION = "both-clear"

# 不开启压缩，默认
VITE_COMPRESSION = "none"
```

--------------------------------

### Define component name in Vue 3 script setup

Source: https://pure-admin.cn/pages/FAQ

Use the defineOptions macro to specify a component name within a script setup block.

```typescript
<script setup lang="ts">
defineOptions({
  name: "页面名称"
});
</script>
```

--------------------------------

### Build for staging

Source: https://pure-admin.cn/pages/build

Generates a build using the .env.staging configuration file.

```bash
pnpm build:staging
```

--------------------------------

### Other API Interface

Source: https://pure-admin.cn/pages/request

Example of exporting an interface for a secondary backend service.

```typescript
import { http } from "@/utils/http";
import { baseUrlOtherApi } from "./utils";

/** 该接口采用 http://127.0.0.1:3290 后端地址 */
export const getOther = (data?: object) => {
  return http.request<any>("get", baseUrlOtherApi("other"), { data });
};
```

--------------------------------

### 查看 git 配置

Source: https://pure-admin.cn/pages/git

查看全局 Git 配置信息。

```bash
# 查看全局配置
git config --global --list

# 查看用户名
git config --global user.name
```

--------------------------------

### 检查Nginx配置文件语法

Source: https://pure-admin.cn/pages/build

在重启服务前验证nginx.config的语法正确性，防止配置错误导致服务无法启动。

```bash
sudo nginx -t
```

--------------------------------

### Use i18n in .ts files

Source: https://pure-admin.cn/pages/i18n

Use the platform-provided transformI18n function for translations outside of Vue setup components.

```typescript
import { transformI18n } from "@/plugins/i18n";
transformI18n("buttons.hsLoginOut");
```

--------------------------------

### Environment Configuration File Structure

Source: https://pure-admin.cn/pages/config

The platform uses four environment configuration files located in the root directory with varying priorities.

```text
├── .env                  # 基础环境变量配置文件（优先级最低）
├── .env.development      # 开发环境变量配置文件
├── .env.production       # 生产环境变量配置文件
├── .env.staging          # 预发布环境变量配置文件
```

--------------------------------

### 停止Nginx服务

Source: https://pure-admin.cn/pages/build

立即停止正在运行的Nginx服务。

```bash
sudo nginx -s stop
```

--------------------------------

### 重启Nginx服务

Source: https://pure-admin.cn/pages/build

在修改配置文件后，使用reload命令平滑重启Nginx。

```bash
sudo nginx -s reload
```

--------------------------------

### 启动Nginx服务

Source: https://pure-admin.cn/pages/build

使用sudo权限启动Nginx服务。

```bash
sudo nginx
```

--------------------------------

### 查看 git 状态

Source: https://pure-admin.cn/pages/git

查看当前工作区和暂存区的状态。

```bash
git status
```

--------------------------------

### 本地开发常用命令

Source: https://pure-admin.cn/pages/start

用于项目依赖安装、启动开发服务器、打包构建以及包管理。

```bash
pnpm install
```

```bash
pnpm dev
```

```bash
pnpm build
```

```bash
pnpm add 包名
```

```bash
pnpm remove 包名
```

--------------------------------

### 配置环境变量开启压缩

Source: https://pure-admin.cn/pages/build

在.env.production文件中设置VITE_COMPRESSION以同时启用gzip和brotli压缩。

```text
# 同时开启 gzip 与 brotli 压缩
VITE_COMPRESSION = "both"
```

--------------------------------

### 从 GitHub 拉取项目代码

Source: https://pure-admin.cn/pages/start

根据需求选择不同的版本仓库进行克隆。

```bash
git clone https://github.com/pure-admin/vue-pure-admin.git
```

```bash
git clone -b i18n https://github.com/pure-admin/pure-admin-thin.git
```

```bash
git clone https://github.com/pure-admin/pure-admin-thin.git
```

```bash
git clone https://github.com/pure-admin/tauri-pure-admin.git
```

```bash
git clone https://github.com/pure-admin/electron-pure-admin.git
```

```bash
git clone https://github.com/pure-admin/pure-admin-backend.git
```

--------------------------------

### Define project scripts in package.json

Source: https://pure-admin.cn/pages/config

Contains the configuration for development, build, linting, and utility commands used in the project.

```json
{
  "scripts": {
    "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite", // 启动平台
    "serve": "pnpm dev", // 启动平台（有人喜欢dev、有人喜欢serve）
    "build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build", // 打包平台（rimraf 包的作用：以包的形式包装rm -rf命令，用来删除文件和文件夹的，不管文件夹是否为空，都可删除）
    "build:staging": "rimraf dist && vite build --mode staging", // 打包平台（预发布环境）
    "report": "rimraf dist && vite build", // 打包平台并生产平台包文件大小图形化分析
    "preview": "vite preview", // 预览平台，需先打包（无需安装live-server等工具，vite自带预览功能）
    "preview:build": "pnpm build && vite preview", // 打包并预览平台（无需安装live-server等工具，vite自带预览功能）
    "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck", // 使用vue-tsc工具对指定的.ts、.tsx、.vue文件进行类型校验
    "svgo": "svgo -f . -r", // 压缩当前目录下的所有SVG文件，更多详情看 https://github.com/pure-admin/vue-pure-admin/commit/a114dbb4652d6316853d75ff127180fc07d07d2b#commitcomment-136451628
    "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML", // 平台文件、语言分析
    "clean:cache": "rimraf .eslintcache && rimraf pnpm-lock.yaml && rimraf node_modules && pnpm store prune && pnpm install", // 删除pnpm-lock.yaml、node_modules、清除eslint和pnpm缓存并重新安装平台依赖
    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix", // eslint修复
    "lint:prettier": "prettier --write  \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"", // prettier格式化
    "lint:stylelint": "stylelint --cache --fix \"**/*.{html,vue,css,scss}\" --cache-location node_modules/.cache/stylelint/", // stylelint格式化修复
    "lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint", // 平台整体lint格式化并修复
    "prepare": "husky", // 自动生成husky（https://typicode.github.io/husky/#/）
    "preinstall": "npx only-allow pnpm" // 只允许运行pnpm命令，如果您换成yarn、npm需要把这行删除（https://pnpm.io/zh/only-allow-pnpm）
  }
}
```

--------------------------------

### Define platform configuration

Source: https://pure-admin.cn/pages/config

The platform-config.json file contains global settings. Note that fields marked as '会缓存' require clearing browser cache to apply changes.

```json
{
  "Version": "6.3.0", // 平台版本号
  "Title": "PureAdmin", // 平台标题
  "FixedHeader": true, // 是否固定页头和标签页（true 内容区超出出现纵向滚动条 false 页头、标签页、内容区可纵向滚动）
  "HiddenSideBar": false, // 隐藏菜单和页头，只显示标签页和内容区
  "MultiTagsCache": false, // 是否开启持久化标签 （会缓存）
  "KeepAlive": true, // 是否开启组件缓存（此处不同于路由的 keepAlive，如果此处为 true 表示设置路由的 keepAlive 起效，反之设置 false 屏蔽平台整体的 keepAlive，即使路由设置了keepAlive 也不再起作用）
  "Locale": "zh", // 默认国际化语言 （zh 中文、en 英文）（会缓存）（max版本额外配置：tw 繁體中文、ja 日语、ko 韩语）
  "Layout": "vertical", // 导航菜单模式 （vertical 左侧菜单模式、horizontal 顶部菜单模式、mix 混合菜单模式）（会缓存）（max版本额外配置：double 左侧双栏菜单模式）
  "Theme": "light", // 主题模式（会缓存）
  "DarkMode": false, // 是否开启暗黑模式 （会缓存）
  "OverallStyle": "light", // 整体风格（浅色：light、深色：dark、自动：system）（会缓存）更多详情看 https://github.com/pure-admin/vue-pure-admin/commit/dd783136229da9e291b518df93227111f4216ad0#commitcomment-137027417
  "Grey": false, // 灰色模式（会缓存）
  "Weak": false, // 色弱模式（会缓存）
  "HideTabs": false, // 是否隐藏标签页（会缓存）
  "HideFooter": false, // 是否隐藏页脚（会缓存）
  "SidebarStatus": true, // vertical左侧菜单模式模式下侧边栏状态（true 展开、false 收起）（会缓存）
  "EpThemeColor": "#409EFF", // 主题色（会缓存）
  "ShowLogo": true, // 是否显示logo（会缓存）
  "ShowModel": "smart", // 标签页风格（smart 灵动模式、card 卡片模式）（会缓存）
  "MenuArrowIconNoTransition": false, // 菜单展开、收起图标是否开启动画，如遇菜单展开、收起卡顿设置成 true 即可（默认 false，开启动画）
  "CachingAsyncRoutes": false, // 是否开启动态路由缓存本地的全局配置，默认 false
  "TooltipEffect": "light", // 可配置平台主体所有 el-tooltip 的 effect 属性，默认 light，不会影响业务代码
  "ResponsiveStorageNameSpace": "responsive-", // 本地响应式存储的命名空间
  "MenuSearchHistory": 6 // 菜单搜索历史的最大条目
}
```

--------------------------------

### 撤销代码

Source: https://pure-admin.cn/pages/git

通过创建一个新的提交来撤销指定的提交。

```bash
git revert commit_id
```

--------------------------------

### 动态路由处理逻辑

Source: https://pure-admin.cn/pages/routerMenu

通过 import.meta.glob 匹配视图文件，并使用 addAsyncRoutes 函数处理后端返回的路由数据，实现自动化的组件映射与元数据注入。

```typescript
// 具体实现代码1高亮处解析：
// 将/src/views/文件里所有的.vue和.tsx文件塞进modulesRoutes变量
// 当然这里只匹配了`.vue`和`.tsx`，如果您想匹配别的在下面 {} 加上即可，记得用 , 分开
const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");

// 具体实现代码2高亮处解析：
// addAsyncRoutes函数作用为过滤后端传来的动态路由，重新生成规范路由，
// 先读取后端返回的所有路由，从中过滤出component和path字段，然后在modulesRoutesKeys中对应匹配，
// 如果对应路由同时匹配到component和path，优先以component为主，这样您的path路径就可以随便写啦，
// 如果匹配到path未匹配到component，path必须按上面提到的跟实际业务`.vue`或`.tsx`代码路径保持一致，
// 如果匹配到component未匹配到path或者两个都未匹配到，我想问问您咱能好好玩不😭
function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
  if (!arrRoutes || !arrRoutes.length) return;
  const modulesRoutesKeys = Object.keys(modulesRoutes);
  arrRoutes.forEach((v: RouteRecordRaw) => {
    // 将backstage属性加入meta，标识此路由为后端返回路由
    v.meta.backstage = true;
    // 父级的redirect属性取值：如果子级存在且父级的redirect属性不存在，默认取第一个子级的path；如果子级存在且父级的redirect属性存在，取存在的redirect属性，会覆盖默认值
    if (v?.children && v.children.length && !v.redirect)
      v.redirect = v.children[0].path;
    // 父级的name属性取值：如果子级存在且父级的name属性不存在，默认取第一个子级的name；如果子级存在且父级的name属性存在，取存在的name属性，会覆盖默认值（注意：测试中发现父级的name不能和子级name重复，如果重复会造成重定向无效（跳转404），所以这里给父级的name起名的时候后面会自动加上`Parent`，避免重复）
    if (v?.children && v.children.length && !v.name)
      v.name = (v.children[0].name as string) + "Parent";
    if (v.meta?.frameSrc) {
      v.component = IFrame;
    } else {
      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会跟path保持一致）
      const index = v?.component
        ? modulesRoutesKeys.findIndex(ev => ev.includes(v.component as any))
        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
      v.component = modulesRoutes[modulesRoutesKeys[index]];
    }
    if (v?.children && v.children.length) {
      addAsyncRoutes(v.children);
    }
  });
  return arrRoutes;
}
```

--------------------------------

### Initialize vxe-table in index.ts

Source: https://pure-admin.cn/pages/FAQ

Set up global configurations, internationalization, and component registration for vxe-table.

```typescript
import "xe-utils";
import "./index.scss";
import XEUtils from "xe-utils";
import { App, unref } from "vue";
import { i18n } from "@/plugins/i18n";
import zh from "vxe-table/lib/locale/lang/zh-CN";
import en from "vxe-table/lib/locale/lang/en-US";

import {
  // 核心
  VXETable,
  // 表格功能
  Icon,
  Filter,
  Edit,
  Menu,
  Export,
  Keyboard,
  Validator,
  // 可选组件
  Column,
  Colgroup,
  Grid,
  Tooltip,
  Toolbar,
  Pager,
  Form,
  FormItem,
  FormGather,
  Checkbox,
  CheckboxGroup,
  Radio,
  RadioGroup,
  RadioButton,
  Switch,
  Input,
  Select,
  Optgroup,
  Option,
  Textarea,
  Button,
  Modal,
  List,
  Pulldown,
  // 表格
  Table
} from "vxe-table";

// 全局默认参数
VXETable.setup({
  size: "medium",
  version: 0,
  zIndex: 1002,
  table: {
    // 自动监听父元素的变化去重新计算表格
    autoResize: true,
    // 鼠标移到行是否要高亮显示
    highlightHoverRow: true
  },
  input: {
    clearable: true
  },
  i18n: (key, args) => {
    return unref(i18n.global.locale) === "zh"
      ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
      : XEUtils.toFormatString(XEUtils.get(en, key), args);
  },
  translate(key) {
    const NAMESPACED = ["el.", "buttons."];
    if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
      return i18n.global.t.call(i18n.global.locale, key);
    }
    return key;
  }
});

export function useTable(app: App) {
  app
    .use(Icon)
    .use(Filter)
    .use(Edit)
    .use(Menu)
    .use(Export)
    .use(Keyboard)
    .use(Validator)
    // 可选组件
    .use(Column)
    .use(Colgroup)
    .use(Grid)
    .use(Tooltip)
    .use(Toolbar)
    .use(Pager)
    .use(Form)
    .use(FormItem)
    .use(FormGather)
    .use(Checkbox)
    .use(CheckboxGroup)
    .use(Radio)
    .use(RadioGroup)
    .use(RadioButton)
    .use(Switch)
    .use(Input)
    .use(Select)
    .use(Optgroup)
    .use(Option)
    .use(Textarea)
    .use(Button)
    .use(Modal)
    .use(List)
    .use(Pulldown)
    // 安装表格
    .use(Table);
}
```

--------------------------------

### 生产环境打包路径配置

Source: https://pure-admin.cn/pages/build

在 .env.production 文件中设置项目的公共路径。

```text
# 线上环境平台打包路径
VITE_PUBLIC_PATH = /vue-pure-admin/
```

--------------------------------

### 配置 Git 用户名和邮箱

Source: https://pure-admin.cn/pages/git

设置全局的 Git 用户名和邮箱地址。

```bash
# 用户名
git config --global user.name "Your Name"

# 邮箱
git config --global user.email "email@example.com"
```

--------------------------------

### 配置Nginx压缩参数

Source: https://pure-admin.cn/pages/build

在nginx.config中配置gzip和brotli模块以优化资源传输。注意brotli模块可能需要额外编译。

```nginx
http {
  # 开启gzip
  gzip on;
  # https://blog.csdn.net/fxss5201/article/details/106535475
  gzip_static on;
  gzip_proxied any;
  # 低于1kb的资源不压缩
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_comp_level 2;
  # 需要压缩的类型
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
  # 配置禁用gzip条件，支持正则。此处表示ie6及以下不启用gzip（因为ie低版本不支持）
  gzip_disable "MSIE [1-6]\.";
  # 是否添加“Vary: Accept-Encoding”响应头
  gzip_vary off;

  # 开启brotli压缩，与gzip共存不会冲突，nginx默认不支持ngx_brotli模块，需要自行编译，参考 https://cloud.tencent.com/developer/article/2071894
  brotli on;
  brotli_comp_level 6;
  brotli_buffers 16 8k;
  brotli_min_length 20;
  brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;
}
```

--------------------------------

### 添加提交信息

Source: https://pure-admin.cn/pages/git

提交代码到本地仓库。

```bash
git commit -m 'xxxx'
```

--------------------------------

### 修改用户名

Source: https://pure-admin.cn/pages/git

更新全局配置中的用户名。

```bash
git config --global user.name newName
```

--------------------------------

### 创建分支

Source: https://pure-admin.cn/pages/git

创建并切换到新分支的多种方式。

```bash
git branch dev
# or
git checkout -b dev
# or
git switch -c dev
```

--------------------------------

### 把本地未 push 的分叉提交历史整理成直线

Source: https://pure-admin.cn/pages/git

使用 rebase 将当前分支的提交变基到目标分支。

```bash
git rebase origin/dev
```

--------------------------------

### Check current npm registry

Source: https://pure-admin.cn/pages/FAQ

Use this command to verify the currently configured npm registry source.

```bash
npm config ls
```

--------------------------------

### Implement Dark Mode

Source: https://pure-admin.cn/pages/tailwindcss

Use the dark: prefix to apply specific styles when the application is in dark mode.

```html
<div class="bg-white dark:bg-black"></div>
```

--------------------------------

### 查看尚未暂存的更新

Source: https://pure-admin.cn/pages/git

查看工作区与暂存区之间的差异。

```bash
git diff
```

--------------------------------

### 将代码从工作区添加暂存区

Source: https://pure-admin.cn/pages/git

将当前目录下的所有更改添加到暂存区。

```bash
git add .
```

--------------------------------

### 组件方式判断权限 (接口模式)

Source: https://pure-admin.cn/pages/RBAC

使用全局注册的 Perms 组件包裹需要权限控制的元素。

```vue
<Perms value="permission:btn:add">
  <el-button plain type="warning"> 拥有code：'permission:btn:add' 权限可见 </el-button>
</Perms>
```

--------------------------------

### Analyze bundle size

Source: https://pure-admin.cn/pages/build

Generates a report to analyze the bundle size.

```bash
pnpm report
```

--------------------------------

### Iconify Unplugin Usage

Source: https://pure-admin.cn/pages/icon

Demonstrates on-demand icon importing using unplugin-icons.

```vue
<script setup lang="ts">
// 按需引入
import IconAvatar from '~icons/ep/avatar';
import IconClose from '~icons/ep/close';
</script>

<template>
  <icon-avatar/>
  <icon-close style="font-size: 2em; color: red"/>
</template>
```

--------------------------------

### 文件或文件夹重命名

Source: https://pure-admin.cn/pages/git

使用 git mv 安全地重命名文件或文件夹，解决大小写不敏感问题。

```bash
# 将 filename.ts 文件重命名为 fileName.ts，分下面两步
# 第一步（注意下面的 name.ts 与 filename.ts 是不同的，如果你把 name.ts 改为 fileName.ts 是不行的，因为上面讲了仅大小写不同是不行的）
git mv src/filename.ts src/name.ts
# 第二步
git mv src/name.ts src/fileName.ts

# 将 jsutils 文件夹重命名为 jsUtils，分下面两步
# 第一步
git mv src/jsutils src/utils
# 第二步
git mv src/utils src/jsUtils
```

--------------------------------

### 回到 rebase 执行之前的状态

Source: https://pure-admin.cn/pages/git

终止当前的 rebase 操作。

```bash
git rebase --abort
```

--------------------------------

### 删除用户名

Source: https://pure-admin.cn/pages/git

从全局配置中删除用户名。

```bash
git config --global --unset user.name
```

--------------------------------

### 子目录部署 Nginx 配置

Source: https://pure-admin.cn/pages/build

针对部署在子目录下的项目进行 Nginx 路由配置。

```nginx
location / {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
}

location /vue-pure-admin/ {
    root   html;
    index  index.html index.htm;
    try_files $uri $uri/ /vue-pure-admin/index.html;
}

location /api {
    # 如果后端在本地比如127.0.0.1或者localhost请解开下面的rewrite注释即可
    # rewrite  ^.+api/?(.*)$ /$1 break;
    # 这里填写后端地址（后面一定不要忘记添加 / ）
    proxy_pass http://127.0.0.1:3000/;
    proxy_set_header Host $host;
    proxy_set_header Cookie $http_cookie;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_redirect default;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

location /otherApi {
    # 如果后端在本地比如127.0.0.1或者localhost请解开下面的rewrite注释即可
    # rewrite  ^.+otherApi/?(.*)$ /$1 break;
    # 这里填写后端地址（后面一定不要忘记添加 / ）
    proxy_pass http://127.0.0.1:3290/;
    proxy_set_header Host $host;
    proxy_set_header Cookie $http_cookie;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_redirect default;
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}
```

--------------------------------

### 配置 optimizeDeps.include

Source: https://pure-admin.cn/pages/optimize

将需要预构建的模块加入 include 列表，以编译成 ESM 格式并缓存，减少开发环境切换页面的卡顿。

```javascript
const include = [
  "qs",
  "mitt",
  "dayjs",
  "axios",
  "pinia",
  "vue-types",
  "js-cookie",
  "vue-tippy",
  "pinyin-pro",
  "sortablejs",
  "@vueuse/core",
  "@pureadmin/utils",
  "responsive-storage",
];
```

--------------------------------

### 添加用户名

Source: https://pure-admin.cn/pages/git

向全局配置添加用户名。

```bash
git config --global --add user.name newName
```

--------------------------------

### 回退版本

Source: https://pure-admin.cn/pages/git

将当前分支回退到指定的提交版本。

```bash
# 回退指定 commit_id 版本
git reset --hard commit_id

# 回退上一个版本
git reset --soft HEAD^
# or
git reset --soft HEAD~1
```

--------------------------------

### 查看远程所有分支

Source: https://pure-admin.cn/pages/git

列出当前仓库的所有远程分支。

```bash
git branch -r
```

--------------------------------

### 拉取远程分支代码

Source: https://pure-admin.cn/pages/git

从远程仓库拉取最新代码并合并。

```bash
git pull origin dev
```

--------------------------------

### Access configuration via utility

Source: https://pure-admin.cn/pages/config

Use the getConfig helper function to retrieve configuration values in .ts or .vue files.

```typescript
import { getConfig } from "@/config";

console.log("Version：", getConfig()?.Version)
```

--------------------------------

### 函数方式判断权限 (接口模式)

Source: https://pure-admin.cn/pages/RBAC

使用 hasPerms 函数在模板或逻辑中判断权限。

```vue
<el-button v-if="hasPerms('permission:btn:add')" plain type="warning">
  拥有code：'permission:btn:add' 权限可见
</el-button>
```

```javascript
hasPerms("btn_add") ? "显示" : "隐藏";
```

--------------------------------

### 删除远程分支

Source: https://pure-admin.cn/pages/git

从远程仓库删除指定分支。

```bash
git push origin -d dev
```

--------------------------------

### 统计代码行数

Source: https://pure-admin.cn/pages/git

统计当前仓库的代码总行数。

```bash
git ls-files | xargs wc -l
```

--------------------------------

### Add custom configuration

Source: https://pure-admin.cn/pages/config

Extend the platform configuration by adding properties to the JSON file and updating the TypeScript interface.

```json
{
  "Handsome": true // 自定义配置
}
```

```typescript
interface PlatformConfigs {
  Handsome?: boolean; // 根据实际类型编写
}
```

--------------------------------

### 切换本地分支

Source: https://pure-admin.cn/pages/git

在已存在的本地分支之间切换。

```bash
git checkout dev
# or
git switch dev
```

--------------------------------

### 删除本地分支

Source: https://pure-admin.cn/pages/git

删除指定的本地分支。

```bash
git branch -d dev
```
Tokens:
Raw