Fantastic Admin

https://fantastic-admin.hurui.me/
Admin
Fantastic Admin is a ready-to-use Vue3 admin framework featuring 60+ built-in components, flexible...
Tokens:273,891
Snippets:753
Trust Score:4.4
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install and Run Fantastic-admin

Source: https://fantastic-admin.hurui.me/v2-docs/guide/start

Instructions for installing project dependencies and starting the development server. It emphasizes the use of pnpm for dependency management and provides the default local development URL. Troubleshooting steps for common installation errors are also included.

```shell
sh
# Install dependencies
# Note: Must use pnpm to install dependencies, do not use npm or yarn
pnpm install
# Run
pnpm run dev
```

```shell
sh
# Troubleshooting: Switch to domestic npmmirror source
pnpm config set registry https://registry.npmmirror.com/
# Or use nrm to switch sources
# Then delete node_modules folder and reinstall dependencies.
# If still not working, delete node_modules and pnpm-lock.yaml, remove "preinstall": "npx only-allow pnpm" from package.json, and install with npm/yarn.
```

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

### Application Settings Configuration (Minimal Example)

Source: https://fantastic-admin.hurui.me/v2-docs/guide/configure

A minimal example demonstrating how to set application configurations in TypeScript, specifically enabling the application settings feature.

```ts
const globalSettings:Settings.all={
  app:{
    enableAppSetting:true,
  },
}
```

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

### Fantastic-admin Routing Guide

Source: https://fantastic-admin.hurui.me/guide/build

Documentation on how routing is handled within the Fantastic-admin project, including setup, dynamic routing, and navigation guards.

```APIDOC
## 路由（导航） (Routing)

**Description:** This guide explains the routing system used in Fantastic-admin, focusing on Vue Router configuration and best practices for navigation.

**Key Concepts:**

- **Vue Router:** The project utilizes Vue Router for declarative routing.
- **File-System Based Routing:** The project supports file-system based routing, where the file structure in a specific directory (e.g., `src/views`) automatically generates routes.
- **Dynamic Routes:** How to define routes with parameters (e.g., `/users/:id`).
- **Navigation Guards:** Implementing guards for authentication, authorization, and other route-specific logic.

**Configuration:**

- The main router configuration is typically found in `src/router/index.js`.
- Routes can be defined statically or dynamically generated based on file structure.

**Example (File-System Based Routing):**

If you have a file structure like:

```
src/
└── views/
    ├── index.vue
    └── system/
        └── user.vue
```

This might automatically generate routes like:

- `/` mapped to `views/index.vue`
- `/system/user` mapped to `views/system/user.vue`

**Example (Programmatic Navigation):**

```javascript
import { useRouter } from 'vue-router'

const router = useRouter()

// Navigate to a specific path
router.push('/dashboard')

// Navigate with parameters
router.push({ name: 'UserProfile', params: { id: 123 } })
```
```

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

### Fantastic Admin - Axios Configuration Example

Source: https://fantastic-admin.hurui.me/guide/q-a

Demonstrates a typical setup for Axios within the Fantastic Admin project, highlighting base URL and interceptor usage for API requests.

```JavaScript
import axios from 'axios';

const request = axios.create({
  baseURL: '/api', // Base URL for API requests
  timeout: 10000, // Request timeout
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
});

// Request interceptor
request.interceptors.request.use(
  (config) => {
    // Do something before request is sent
    // e.g., add authorization token
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // Do something with request error
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);

// Response interceptor
request.interceptors.response.use(
  (response) => {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response.data;
  },
  (error) => {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    if (error.response && error.response.status === 401) {
      // Handle unauthorized access, e.g., redirect to login
      console.error('Unauthorized access');
      // window.location.href = '/login';
    } else {
      console.error('Response Error:', error.message);
    }
    return Promise.reject(error);
  }
);

export default request;

```

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

### Application Settings Configuration (Full Example)

Source: https://fantastic-admin.hurui.me/v2-docs/guide/configure

An example of custom application settings defined in TypeScript. This configuration object allows developers to enable or disable various framework features such as permission management, dynamic titles, layout adaptations, menu collapse buttons, and toolbar functionalities.

```ts
const globalSettings:Settings.all={
  app:{
    enablePermission:true,
    enableDynamicTitle:true,
    enableAppSetting:true,
  },
  layout:{
    enableMobileAdaptation:true,
  },
  menu:{
    enableSubMenuCollapseButton:true,
    enableHotkeys:true,
  },
  topbar:{
    mode:'fixed',
  },
  toolbar:{
    enableFullscreen:true,
    enablePageReload:true,
    enableColorScheme:true,
  },
}
```

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

### Environment Configuration (.env files)

Source: https://fantastic-admin.hurui.me/v2-docs/guide/configure

Examples of environment configuration files used by Fantastic-admin. These files define application settings such as the page title, API base URL, debugging tools, and build options for different environments (development, test, production).

```yaml
# 页面标题
VITE_APP_TITLE = Fantastic-admin
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否开启代理
VITE_OPEN_PROXY = false
```

```yaml
# 页面标题
VITE_APP_TITLE = Fantastic-admin
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否在打包时启用 Mock
VITE_BUILD_MOCK = true
# 在构建时生成 sourcemap
VITE_BUILD_SOURCEMAP = true
# 在构建时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip,brotli
```

```yaml
# 页面标题
VITE_APP_TITLE = Fantastic-admin
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
```

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

### simple-git-hooks and lint-staged Setup

Source: https://fantastic-admin.hurui.me/v3-docs/guide/coding-standard

Describes the integration of simple-git-hooks and lint-staged to enforce code quality checks (ESLint, StyleLint) before Git commits. This prevents non-compliant code from being pushed. Requires `git init` before dependency installation.

```json
{
  "scripts": {
    "postinstall": "simple-git-hooks && esno scripts/prepare.js"
  },
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged"
  }
}
```

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

### Install Project Dependencies

Source: https://fantastic-admin.hurui.me/v4-docs/guide/replace-to-naive

Installs all necessary project dependencies using the pnpm package manager. This is a prerequisite before adding new libraries.

```sh
pnpm install
```

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

### Fantastic-admin Documentation Navigation

Source: https://fantastic-admin.hurui.me/guide/login

This section provides an overview of the main navigation structure for the Fantastic-admin documentation, categorizing topics into Guidance, Getting Started, Advanced, and Expert levels. It lists various sub-sections and their corresponding links.

```APIDOC
Fantastic-admin Documentation Structure:

## 指引 (Guidance)
  - 文档说明 (Doc Description): https://fantastic-admin.hurui.me/guide/intro.html
  - 为什么选择我们 ? (Why Choose Us?): https://fantastic-admin.hurui.me/guide/why.html
  - 更新日志 (Changelog): https://fantastic-admin.hurui.me/guide/changelog.html

## 入门 (Getting Started)
  - 准备工作 (Prerequisites): https://fantastic-admin.hurui.me/guide/ready.html
  - 开始 (Getting Started): https://fantastic-admin.hurui.me/guide/start.html
  - 代码规范 (Coding Standard): https://fantastic-admin.hurui.me/guide/coding-standard.html
  - 术语 (Terminology): https://fantastic-admin.hurui.me/guide/term.html
  - 配置 (Configuration): https://fantastic-admin.hurui.me/guide/configure.html
  - 开发者工具 (Developer Tools): https://fantastic-admin.hurui.me/guide/devtools.html
  - 路由（导航） (Routing/Navigation): https://fantastic-admin.hurui.me/guide/router.html
  - 与服务端交互 (Server Interaction): https://fantastic-admin.hurui.me/guide/axios.html
  - 全局状态管理 (Global State Management): https://fantastic-admin.hurui.me/guide/store.html
  - 资源 (Resources): https://fantastic-admin.hurui.me/guide/resources.html
  - 图标 (Icons): https://fantastic-admin.hurui.me/guide/icon.html
  - 构建与预览 (Build & Preview): https://fantastic-admin.hurui.me/guide/build.html

## 进阶 (Advanced)
  - 登录相关 (Login Related): https://fantastic-admin.hurui.me/guide/login.html
  - 权限 (Permissions): https://fantastic-admin.hurui.me/guide/permission.html
  - 主页 (Homepage): https://fantastic-admin.hurui.me/guide/home.html
  - 布局 (Layout): https://fantastic-admin.hurui.me/guide/layout.html
  - 主题 (Theme): https://fantastic-admin.hurui.me/guide/theme.html
  - 动态标题 (Dynamic Title): https://fantastic-admin.hurui.me/guide/title.html
  - 导航菜单 (Navigation Menu): https://fantastic-admin.hurui.me/guide/menu.html
  - 顶栏 (Topbar) (Topbar): https://fantastic-admin.hurui.me/guide/topbar.html
  - 标签栏 (Tabbar): https://fantastic-admin.hurui.me/guide/tabbar.html
  - 工具栏 (Toolbar): https://fantastic-admin.hurui.me/guide/toolbar.html
  - 快捷键 (Hotkeys): https://fantastic-admin.hurui.me/guide/hotkeys.html
  - 版权信息 (Copyright): https://fantastic-admin.hurui.me/guide/copyright.html

## 高级 (Expert)
  - 页面缓存 (Page Cache): https://fantastic-admin.hurui.me/guide/keep-alive.html
  - 国际化 (Internationalization): https://fantastic-admin.hurui.me/guide/i18n.html
  - 预留插槽 (Reserved Slots): https://fantastic-admin.hurui.me/guide/slots.html
  - RTL 模式 (RTL Mode): https://fantastic-admin.hurui.me/guide/rtl.html
  - 代码文件自动生成 (Code File Auto Generation): https://fantastic-admin.hurui.me/guide/plop.html
  - 标准模块 (Standard Module): https://fantastic-admin.hurui.me/guide/plop-module.html
  - 常用 API (Common APIs): https://fantastic-admin.hurui.me/guide/api.html
  - 私有 Storage 数据 (Private Storage Data): https://fantastic-admin.hurui.me/guide/storage.html
  - 首屏 Loading (First Screen Loading): https://fantastic-admin.hurui.me/guide/loading.html
  - 页面水印 (Page Watermark): https://fantastic-admin.hurui.me/guide/watermark.html
  - 检查更新 (Check Updates): https://fantastic-admin.hurui.me/guide/check-updates.html
  - 错误日志 (Error Log): https://fantastic-admin.hurui.me/guide/error-log.html
  - 自定义字体 (Custom Font): https://fantastic-admin.hurui.me/guide/font.html
  - 用户偏好设置 (User Preferences): https://fantastic-admin.hurui.me/guide/preferences.html
  - JSX: https://fantastic-admin.hurui.me/guide/jsx.html
  - 基于文件系统的路由 (File-System Routing): https://fantastic-admin.hurui.me/guide/file-system-route.html
  - 使用 Composition API 开发 (Vue3 Composition API Development): https://fantastic-admin.hurui.me/guide/vue3-composition-api.html

### 替换 UI 组件库 (Replace UI Component Library)
  - 替换为 Ant Design Vue (Replace to Ant Design Vue): https://fantastic-admin.hurui.me/guide/replace-to-antd.html
  - 替换为 Arco Design Vue (Replace to Arco Design Vue): https://fantastic-admin.hurui.me/guide/replace-to-arco.html
  - 替换为 Naive UI (Replace to Naive UI): https://fantastic-admin.hurui.me/guide/replace-to-naive.html
  - 替换为 TDesign (Replace to TDesign): https://fantastic-admin.hurui.me/guide/replace-to-tdesign.html
  - 替换为 Vexip UI (Replace to Vexip UI): https://fantastic-admin.hurui.me/guide/replace-to-vexip.html
  - 替换为 iDux (Replace to iDux): https://fantastic-admin.hurui.me/guide/replace-to-idux.html
```

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

### Install iDux Dependencies

Source: https://fantastic-admin.hurui.me/guide/replace-to-idux

Installs the necessary iDux packages using pnpm. This step is crucial before proceeding with code modifications.

```sh
pnpm install
pnpm add @idux/cdk @idux/components
```

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

### Basic GET and POST Requests

Source: https://fantastic-admin.hurui.me/v2-docs/guide/axios

Demonstrates how to perform common GET and POST requests using the api instance. It shows how to pass parameters for GET requests and data for POST requests, along with handling the response.

```TypeScript
import api from'@/api'
// GET 请求
api.get('news/list',{
params:{
page:1,
size:10,
},
}).then((res)=>{
// 后续业务代码
})
// POST 请求
api.post('news/create',{
title:'新闻标题',
content:'新闻内容',
}).then((res)=>{
// 后续业务代码
})
```

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

### Install TDesign Dependencies

Source: https://fantastic-admin.hurui.me/guide/replace-to-tdesign

Commands to install project dependencies and the TDesign Vue Next library using pnpm.

```shell
# Install dependencies
pnpm install
# Install TDesign
pnpm add tdesign-vue-next
```

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

### simple-git-hooks and lint-staged Setup

Source: https://fantastic-admin.hurui.me/v2-docs/guide/coding-standard

Explains the integration of simple-git-hooks and lint-staged to enforce code quality checks on pre-commit. Demonstrates the `package.json` configuration for hooks.

```json
{
  "simple-git-hooks": {
    "pre-commit": "pnpm lint-staged",
    "preserveUnused": true
  }
}
```

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

### Vue 3 Composition API with `<script setup>` and Auto-Imports

Source: https://fantastic-admin.hurui.me/v4-docs/guide/vue3-composition-api

Demonstrates basic usage of Vue 3's Composition API within the `<script setup>` syntax. It leverages unplugin-auto-import for automatic import of Vue, Vue Router, and Pinia APIs, reducing boilerplate code. Shows usage of `ref`, `computed`, `useRoute`, and `useRouter`.

```vue
<script setup lang="ts">
// 无需手动 import 相关 API
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const count = ref(0)
const doubled = computed(() => count.value * 2)
const route = useRoute()
const router = useRouter()
console.log(route.path)
router.push('/dashboard')
</script>
```

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

### Configure ArcoVue Provider (Basic)

Source: https://fantastic-admin.hurui.me/guide/replace-to-arco

Sets up the ArcoVue provider in `/src/ui/provider/index.ts` for the basic version, importing and installing the library and its CSS.

```ts
import type { App } from 'vue'
import ArcoVue from '@arco-design/web-vue'
import '@arco-design/web-vue/dist/arco.css'
function install(app: App) {
  app.use(ArcoVue)
}
export default { install }
```

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

### Element Plus Official Icon Installation

Source: https://fantastic-admin.hurui.me/v4-docs/components

Provides instructions on how to install the official Element Plus icons package to use them in the standard way. This is an alternative if you prefer not to use custom SVG icons for all cases.

```bash
pnpm install @element-plus/icons-vue
```

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

### Fantastic-admin Build & Preview

Source: https://fantastic-admin.hurui.me/guide/build

Instructions on how to build the project for production and preview the application. This typically involves using build tools like Vite or Webpack.

```APIDOC
## 构建与预览 (Build & Preview)

**Description:** This section covers the commands and configurations required to build the Fantastic-admin project for deployment and to preview it locally.

**Commands:**

- **Development Server:**
  ```bash
  npm run dev
  # or
  yarn dev
  ```
  Starts the development server with hot module replacement.

- **Build for Production:**
  ```bash
  npm run build
  # or
  yarn build
  ```
  Bundles the application for production, optimizing assets and code.

- **Preview Production Build:**
  ```bash
  npm run preview
  # or
  yarn preview
  ```
  Serves the production build locally to test the final output.

**Configuration:**

- The build process is typically configured via `vite.config.js` (or similar for other bundlers).
- Environment variables can be managed using `.env` files.

**Output:**

The `build` command generates static assets in a `dist` directory, ready for deployment to any static hosting service.
```

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

### Preview Build with pnpm

Source: https://fantastic-admin.hurui.me/v4-docs/guide/build

Allows local preview of the built project files before deployment. Use 'pnpm run serve' for the default build or 'pnpm run serve:test' for the test build.

```shell
pnpm run serve
pnpm run serve:test
```

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

### API Request Methods

Source: https://fantastic-admin.hurui.me/v3-docs/guide/api

Provides methods for making API requests using the `api` object. Supports GET and POST requests. Refer to the 'Interacting with the Server' guide for details.

```ts
import api from'@/api'
api.get()
api.post()
```

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

### Interface Request API

Source: https://fantastic-admin.hurui.me/guide/api

Provides methods for making API requests to the server. It abstracts common HTTP methods like GET and POST. Detailed usage can be found in the 'Interacting with the Server - Interface Requests' guide.

```ts
import api from '@/api'
api.get()
api.post()
```

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

### Fantastic-admin Project Structure and Navigation

Source: https://fantastic-admin.hurui.me/guide/tabbar

Overview of the Fantastic-admin project's documentation structure, including main navigation categories like Guides, Components, and Technical Deep Dives. It also lists historical versions and online demos.

```APIDOC
Project Structure:
  - Guides (指南)
    - Introduction (文档说明)
    - Why Choose Us (为什么选择我们)
    - Changelog (更新日志)
    - Getting Started (入门)
      - Prerequisites (准备工作)
      - Start (开始)
      - Coding Standards (代码规范)
      - Terminology (术语)
      - Configuration (配置)
      - Developer Tools (开发者工具)
      - Routing (路由)
      - Server Interaction (与服务端交互)
      - Global State Management (全局状态管理)
      - Resources (资源)
      - Icons (图标)
      - Build & Preview (构建与预览)
    - Advanced (进阶)
      - Login Related (登录相关)
      - Permissions (权限)
      - Homepage (主页)
      - Layout (布局)
      - Theme (主题)
      - Dynamic Title (动态标题)
      - Navigation Menu (导航菜单)
      - Topbar (顶栏)
      - Tabbar (标签栏)
      - Toolbar (工具栏)
      - Hotkeys (快捷键)
      - Copyright Info (版权信息)
    - Expert (高级)
      - Page Caching (页面缓存)
      - Internationalization (国际化)
      - Reserved Slots (预留插槽)
      - RTL Mode (RTL 模式)
      - Code File Auto Generation (代码文件自动生成)
      - Standard Modules (标准模块)
      - Common APIs (常用 API)
      - Private Storage Data (私有 Storage 数据)
      - First Screen Loading (首屏 Loading)
      - Page Watermark (页面水印)
      - Check Updates (检查更新)
      - Error Log (错误日志)
      - Custom Font (自定义字体)
      - User Preferences (用户偏好设置)
      - JSX
      - File-System Based Routing (基于文件系统的路由)
      - Developing with Composition API (使用 Composition API 开发)
  - Components (组件)
  - Technical Deep Dive (技术揭秘)

Versions:
  - v4 (Vue3)
  - v3 (Vue3)
  - v2 (Vue3)
  - v1 (Vue2)

Demos:
  - Basic Version
  - Pro Version
```

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

### Build Project with pnpm

Source: https://fantastic-admin.hurui.me/v4-docs/guide/build

Executes the build command for the project. Generates a 'dist' folder with production-ready files. Supports building for a test environment.

```shell
pnpm run build
pnpm run build:test
```

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

### Fantastic Admin Get Permissions Vuex Action

Source: https://fantastic-admin.hurui.me/v1-docs/guide/permission

Illustrates the Vuex action `getPermissions` used to fetch user permissions from an API. This action handles asynchronous operations, typically involving an API call, and commits the fetched permissions to the store.

```js
// Get my permissions
getPermissions({state, commit}) {
    return new Promise(resolve=> {
        // Get permissions via mock
        api.get('mock/member/permission', {
            params: {
                account: state.account
            }
        }).then(res=> {
            commit('setPermissions', res.data.permissions)
            resolve(res.data.permissions)
        })
    })
}
```

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

### Fantastic-admin Environment Configuration (.env files)

Source: https://fantastic-admin.hurui.me/guide/configure

Provides example configurations for different environments (development, test, production) using `.env` files. These settings control application title, API base URLs, debugging tools, build options like mocking, sourcemaps, compression, and archiving.

```yaml
# 应用配置面板
VITE_APP_SETTING = true
# 页面标题
VITE_APP_TITLE = Fantastic-admin
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否禁用开发者工具，可防止被调试
VITE_APP_DISABLE_DEVTOOL = false
# 是否开启代理
VITE_OPEN_PROXY = false
# 是否开启开发者工具
VITE_OPEN_DEVTOOLS = false
```

```yaml
# 应用配置面板
VITE_APP_SETTING = false
# 页面标题
VITE_APP_TITLE = Fantastic-admin
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否禁用开发者工具，可防止被调试
VITE_APP_DISABLE_DEVTOOL = false
# 是否在打包时启用 Mock
VITE_BUILD_MOCK = true
# 在构建时生成 sourcemap
VITE_BUILD_SOURCEMAP = true
# 在构建时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS =
# 是否在打包后生成存档，支持 zip 和 tar
VITE_BUILD_ARCHIVE =
```

```yaml
# 应用配置面板
VITE_APP_SETTING = false
# 页面标题
VITE_APP_TITLE = Fantastic-admin
# 接口请求地址，会设置到 axios 的 baseURL 参数上
VITE_APP_API_BASEURL = /
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
VITE_APP_DEBUG_TOOL =
# 是否禁用开发者工具，可防止被调试
VITE_APP_DISABLE_DEVTOOL = false
# 是否在打包时启用 Mock
VITE_BUILD_MOCK = false
# 在构建时生成 sourcemap
VITE_BUILD_SOURCEMAP = false
# 在构建时开启压缩，支持 gzip 和 brotli
VITE_BUILD_COMPRESS = gzip,brotli
# 是否在打包后生成存档，支持 zip 和 tar
VITE_BUILD_ARCHIVE =
```

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

### Axios GET and POST Requests

Source: https://fantastic-admin.hurui.me/v4-docs/guide/axios

Demonstrates common GET and POST request patterns using the framework's API wrapper. It shows how to pass parameters for GET requests and data payloads for POST requests, handling the response asynchronously.

```typescript
import api from '@/api'

// GET 请求
api.get('news/list', {
  params: {
    page: 1,
    size: 10,
  },
}).then((res) => {
  // 后续业务代码
})

// POST 请求
api.post('news/create', {
  title: '新闻标题',
  content: '新闻内容',
}).then((res) => {
  // 后续业务代码
})
```

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

### 预览构建结果

Source: https://fantastic-admin.hurui.me/v2-docs/guide/build

在本地预览构建好的项目，可以使用 `pnpm run serve` 命令预览生产环境的 `dist` 文件夹，或使用 `pnpm run serve:test` 命令预览测试环境的 `dist-test` 文件夹。

```shell
pnpm run serve
pnpm run serve:test
```

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

### 构建项目

Source: https://fantastic-admin.hurui.me/v2-docs/guide/build

执行 `pnpm run build` 命令进行项目构建，打包后的文件会生成在根目录的 `dist` 文件夹中。若需构建测试环境，请使用 `pnpm run build:test` 命令，生成 `dist-test` 文件夹。

```shell
pnpm run build
pnpm run build:test
```

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

### 在 <script setup> 中定义组件名

Source: https://fantastic-admin.hurui.me/guide/vue3-composition-api

演示了如何在 Vue 3 的 `<script setup>` 语法糖中，使用 `defineOptions` API 来显式定义组件的名称。这有助于提高代码的可读性和调试的便利性。

```typescript
<script setup lang="ts">
defineOptions({
  name: 'ComponentName',
})
</script>
```

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

### Define Component Name with `defineOptions` in `<script setup>`

Source: https://fantastic-admin.hurui.me/v4-docs/guide/vue3-composition-api

Introduces the `defineOptions` function, available in Vue 3.3 and later, which allows defining component options like `name` directly within the `<script setup>` block. This simplifies component definition by keeping all setup logic in one place.

```vue
<script setup lang="ts">
defineOptions({
  name: 'ComponentName',
})
</script>
```

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

### 克隆基础版源码 (GitHub/Gitee)

Source: https://fantastic-admin.hurui.me/guide/ready

提供从 GitHub 和 Gitee 克隆 Fantastic-admin 基础版框架源码和演示源码的 shell 命令。请根据您的偏好选择克隆源。

```sh
# 拉取框架源码
git clone https://github.com/fantastic-admin/basic.git
# 拉取演示源码
git clone -b example https://github.com/fantastic-admin/basic.git
```

```sh
# 拉取框架源码
git clone https://gitee.com/fantastic-admin/basic.git
# 拉取演示源码
git clone -b example https://gitee.com/fantastic-admin/basic.git
```

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

### Axios GET and POST Requests

Source: https://fantastic-admin.hurui.me/v3-docs/guide/axios

演示了如何使用封装的 `api` 实例发起 GET 和 POST 请求。GET 请求支持通过 `params` 对象传递查询参数，POST 请求则将请求体数据作为第二个参数。示例展示了如何处理请求的响应。

```ts
import api from'@/api'
// GET 请求
api.get('news/list', {
  params: {
    page: 1,
    size: 10,
  },
}).then((res) => {
// 后续业务代码
})
// POST 请求
api.post('news/create', {
  title: '新闻标题',
  content: '新闻内容',
}).then((res) => {
// 后续业务代码
})
```

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

### 配置构建压缩

Source: https://fantastic-admin.hurui.me/v2-docs/guide/build

通过在环境配置文件中设置 `VITE_BUILD_COMPRESS` 变量，可以在构建时生成 `.gz` 或 `.br` 压缩文件。支持 `gzip` 和 `brotli` 两种压缩算法，其中 `brotli` 提供更高的压缩率。

```config
# 单独开启 gzip
VITE_BUILD_COMPRESS = gzip

# 单独开启 brotli ，brotli 是比 gzip 压缩率更高的算法
VITE_BUILD_COMPRESS = brotli
```

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

### Fantastic-admin Application Settings (src/settings.ts)

Source: https://fantastic-admin.hurui.me/guide/configure

Example of custom application configuration within the `/src/settings.ts` file for Fantastic-admin. This demonstrates how to configure various aspects of the application's layout, menu, topbar, and toolbar.

```ts
// 这是基础版演示源码里的自定义配置示例
const globalSettings: Settings.all = {
  app: {
    enablePermission: true,
    enableDynamicTitle: true,
  },
  layout: {
    enableMobileAdaptation: true,
  },
  menu: {
    enableSubMenuCollapseButton: true,
    enableHotkeys: true,
  },
  topbar: {
    mode: 'fixed',
  },
  toolbar: {
    enableFullscreen: true,
    enablePageReload: true,
    enableColorScheme: true,
  },
}
```

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

### GET and POST Requests

Source: https://fantastic-admin.hurui.me/guide/axios

演示了如何使用封装的 `api` 实例发起 GET 和 POST 请求。GET 请求可以传递 `params` 对象，POST 请求可以传递请求体数据。请求成功后会执行 `.then()` 回调。

```ts
import api from '@/api'
// GET 请求
api.get('news/list', {
  params: {
    page: 1,
    size: 10,
  },
}).then((res) => {
  // 后续业务代码
})
// POST 请求
api.post('news/create', {
  title: '新闻标题',
  content: '新闻内容',
}).then((res) => {
  // 后续业务代码
})
```

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

### Install iDux Dependencies

Source: https://fantastic-admin.hurui.me/v4-docs/guide/replace-to-idux

Installs the necessary iDux packages using pnpm. This step is crucial for integrating the iDux component library into your project.

```sh
# 安装依赖
pnpm install
# 安装 iDux
pnpm add @idux/cdk @idux/components
```

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

### Example Router Configuration for Banner Management

Source: https://fantastic-admin.hurui.me/v1-docs/guide/router

Demonstrates a typical route configuration structure for managing 'Banner' resources. It includes a main layout, a redirect, and nested child routes for listing, creating, and editing banners, each with specific meta configurations for titles and permissions.

```javascript
import Layout from'@/layout'

exportdefault {
    path: '/banner',
    component: Layout,
    redirect: '/banner/list',
    name: 'banner',
    meta: {
        title: 'Banner 管理',
        icon: 'banner',
        auth: ['banner.browse']
    },
    children: [
        {
            path: 'detail',
            name: 'bannerCreate',
            component: () =>import(/* webpackChunkName: 'banner' */'@/views/banner/detail'),
            meta: {
                title: '新增 Banner',
                auth: ['banner.create']
            }
        },
        {
            path: 'list',
            name: 'bannerList',
            component: () =>import(/* webpackChunkName: 'banner' */'@/views/banner/list'),
            meta: {
                title: 'Banner 列表',
                auth: ['banner.browse']
            }
        },
        {
            path: 'detail/:id',
            name: 'bannerEdit',
            component: () =>import(/* webpackChunkName: 'banner' */'@/views/banner/detail'),
            meta: {
                title: '编辑 Banner',
                auth: ['banner.edit'],
                sidebar: false,
                activeMenu: '/banner/list'
            }
        }
    ]
}
```

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

### StyleLint 自动格式化命令

Source: https://fantastic-admin.hurui.me/guide/coding-standard

运行 StyleLint 命令来校验和格式化 CSS/SCSS 等样式文件。如果规则支持自动修复，不符合规范的代码将被自动格式化。

```bash
pnpm run lint:stylelint
```

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

### Define Component Name with Separate `<script>` and `<script setup>`

Source: https://fantastic-admin.hurui.me/v4-docs/guide/vue3-composition-api

Illustrates how to define a component's name using a traditional `<script>` block when also utilizing `<script setup>` in the same Single File Component (SFC). This approach is useful for compatibility or when needing to define other component options outside of `<script setup>`.

```vue
<script lang="ts">
export default {
  name: 'componentName',
}
</script>
<script setup lang="ts">
...
</script>
```

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

### Install Dependencies and Arco Design Vue

Source: https://fantastic-admin.hurui.me/v4-docs/guide/replace-to-arco

This snippet shows the commands to install project dependencies using pnpm and then add Arco Design Vue as a development dependency.

```sh
sh```
# 安装依赖
pnpm install
# 安装 Arco Design Vue
pnpm add @arco-design/web-vue -D
```
```

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

### Install Vexip UI

Source: https://fantastic-admin.hurui.me/guide/replace-to-vexip

Commands to install Vexip UI dependencies using pnpm. This step is essential for integrating Vexip UI into the project after deciding to switch from Element Plus.

```sh
# 安装依赖
pnpm install
# 安装 Vexip UI
pnpm add vexip-ui
```

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

### Install Ant Design Vue

Source: https://fantastic-admin.hurui.me/guide/replace-to-antd

Installs the necessary dependencies for the project and adds Ant Design Vue version 4.x. This is the first step in migrating to Ant Design Vue.

```sh
# Install dependencies
pnpm install
# Install Ant Design Vue
pnpm add ant-design-vue@4.x
```

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

### 专业版 UI Provider (index.ts)

Source: https://fantastic-admin.hurui.me/guide/replace-to-naive

修改专业版项目的 src/ui/provider/index.ts 文件，引入 Naive UI 并导出多语言配置。

```ts
import type { App } from 'vue'
import naive, { dateEnUS, dateZhCN, dateZhTW, enUS, zhCN, zhTW } from 'naive-ui'
function install(app: App) {
  app.use(naive)
}
// 此处的对象属性和 src/locales/index.ts 中的 messages 对象属性一一对应
const locales: Record<string, any> = {
  'zh-cn': {
    ui: zhCN,
    date: dateZhCN,
  },
  'zh-tw': {
    ui: zhTW,
    date: dateZhTW,
  },
  'en': {
    ui: enUS,
    date: dateEnUS,
  },
}
export default { install }
export { locales }
```
Tokens:
Raw