优化更新

DjangoAdmin_Flask_NaiveVue/zh/volume4/frontend/setup.md

@@ -1,7 +1,7 @@
 # 前端环境与结构
 
 :::tip 说明
-前端基于 Vue3 + ElementPlus 构建，使用 pnpm 作为包管理工具，Vite 作为构建工具，TypeScript 作为开发语言。
+前端基于 Vue3 + NaiveUI 构建，使用 pnpm 作为包管理工具，Vite 作为构建工具，TypeScript 作为开发语言。
 :::
 
 ## 技术栈
@@ -9,11 +9,11 @@
 | 技术 | 版本 | 说明 |
 |------|------|------|
 | Vue | 3.x | 渐进式 JavaScript 框架，组合式 API |
-| ElementPlus | 2.x | Vue3 组件库 |
+| NaiveUI | 2.x | Vue3 组件库 |
 | Vite | 3.x | 下一代前端构建工具 |
 | Pinia | 2.x | 状态管理（Vuex 替代方案） |
 | Vue Router | 4.x | 路由管理 |
-| Axios | 1.x | HTTP 请求库 |
+| Axios | 0.27.x | HTTP 请求库 |
 | TypeScript | 5.x | 类型安全的 JavaScript 超集 |
 | Tailwind CSS | 3.x | 原子化 CSS 框架 |
 | SCSS | - | CSS 预处理器 |
@@ -82,34 +82,23 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
     const { VITE_PUBLIC_PATH, VITE_PORT, VITE_GLOB_PROD_MOCK } = viteEnv;
 
     let VITE_PROXY: any = viteEnv.VITE_PROXY;
-    // VITE_PROXY 容错处理
-    if (!VITE_PROXY) {
-        VITE_PROXY = '[[]]';
-    }
+    if (!VITE_PROXY) { VITE_PROXY = '[[]]'; }
     try {
-        if (typeof VITE_PROXY === 'string') {
-            VITE_PROXY = JSON.parse(VITE_PROXY);
-        }
-    } catch (e) {
-        VITE_PROXY = [[]];
-    }
+        if (typeof VITE_PROXY === 'string') { VITE_PROXY = JSON.parse(VITE_PROXY); }
+    } catch (e) { VITE_PROXY = [[]]; }
 
     const isBuild = command === 'build';
 
     return {
         base: VITE_PUBLIC_PATH,
         resolve: {
-            alias: [
-                { find: '@', replacement: pathResolve('src') + '/' },
-            ],
+            alias: [{ find: '@', replacement: pathResolve('src') + '/' }],
             dedupe: ['vue'],
         },
         plugins: createVitePlugins(viteEnv, isBuild, prodMock),
         css: {
             preprocessorOptions: {
-                scss: {
-                    additionalData: `@import "src/styles/var.scss";`,
-                },
+                scss: { additionalData: `@import "src/styles/var.scss";` },
             },
         },
         server: {
@@ -140,24 +129,16 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
 
 ```typescript
 import './styles/tailwindbase.css';
-import 'element-plus/dist/index.css';
 import './styles/index.scss';
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import { createApp } from 'vue';
 import App from './App.vue';
 import router, { setupRouter } from './router';
 import { setupStore } from '@/store';
-import { setupElement, setupDirectives, setupCustomComponents } from '@/plugins';
+import { setupDirectives, setupCustomComponents } from '@/plugins';
 
 async function bootstrap() {
     const app = createApp(App);
 
-    // 注册所有 ElementPlus 图标
-    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-        app.component(key, component);
-    }
-
-    setupElement(app);              // 全局引入 ElementPlus 组件
     setupCustomComponents(app);     // 注册自定义组件
     setupDirectives(app);           // 注册自定义指令（v-perm 等）
     setupStore(app);                // 挂载 Pinia 状态管理
@@ -170,7 +151,7 @@ async function bootstrap() {
 void bootstrap();
 ```
 
-初始化顺序：样式加载 -> ElementPlus -> 自定义组件 -> 自定义指令 -> Pinia Store -> Router -> 挂载。
+初始化顺序：样式加载 -> 自定义组件 -> 自定义指令 -> Pinia Store -> Router -> 挂载。
 
 ## 核心目录说明
 
@@ -180,7 +161,7 @@ API 接口定义目录，按模块组织文件。公共接口在 `api/common/`
 
 ### components/
 
-公共组件目录，基于 ElementPlus 二次封装，包含 `Table`（BasicTable 表格）、`Form`（BasicForm 表单）、`Modal`（BasicModal 弹窗）、`Upload`、`Editor`、`Cropper`、`Select` 等。
+公共组件目录，基于 NaiveUI 二次封装，包含 `Table`（BasicTable 表格）、`Form`（BasicForm 表单）、`Modal`（BasicModal 弹窗）、`Upload`、`Editor`、`Cropper`、`Select` 等。
 
 ### directives/
 
@@ -212,4 +193,4 @@ Pinia 状态管理目录，核心模块：
 
 ## 总结
 
-前端项目基于 Vue3 + ElementPlus + Vite + TypeScript + Pinia 构建，使用 pnpm 管理依赖，Tailwind CSS + SCSS 提供样式能力。通过 `main.ts` 的 `bootstrap()` 函数按顺序初始化所有基础设施，目录结构按功能分层组织，便于维护和扩展。
+前端项目基于 Vue3 + NaiveUI + Vite + TypeScript + Pinia 构建，使用 pnpm 管理依赖，Tailwind CSS + SCSS 提供样式能力。通过 `main.ts` 的 `bootstrap()` 函数按顺序初始化所有基础设施，目录结构按功能分层组织，便于维护和扩展。