20 lines
9.1 KiB
JavaScript
20 lines
9.1 KiB
JavaScript
import{_ as s,o as a,c as i,a2 as e}from"./chunks/framework.B-QBKwc1.js";const c=JSON.parse('{"title":"前端工程概述","description":"前端基于 Vue 3 + TypeScript + Vite + ElementPlus 构建，采用 Pinia 状态管理，支持动态菜单和权限控制。","frontmatter":{},"headers":[],"relativePath":"zh/frontend/overview.md","filePath":"zh/frontend/overview.md"}'),n={name:"zh/frontend/overview.md"};function d(l,t,p,r,h,o){return a(),i("div",null,[...t[0]||(t[0]=[e(`<h1 id="_9-1-前端工程概述" tabindex="-1">9.1 前端工程概述 <a class="header-anchor" href="#_9-1-前端工程概述" aria-label="Permalink to "9.1 前端工程概述""></a></h1><div class="tip custom-block"><p class="custom-block-title">概述</p><p>前端基于 Vue 3 + TypeScript + Vite + ElementPlus 构建，采用 Pinia 状态管理，支持动态菜单和权限控制。通过 Axios 封装统一处理请求/响应/错误，通过 v-perm 指令实现按钮级权限控制。</p></div><h2 id="技术栈" tabindex="-1">技术栈 <a class="header-anchor" href="#技术栈" aria-label="Permalink to "技术栈""></a></h2><table tabindex="0"><thead><tr><th>类别</th><th>技术</th><th>版本</th><th>说明</th></tr></thead><tbody><tr><td>框架</td><td>Vue</td><td>3.4+</td><td>核心 UI 框架</td></tr><tr><td>语言</td><td>TypeScript</td><td>4.9+（实际 ^4.9.5）</td><td>类型安全</td></tr><tr><td>UI 库</td><td>ElementPlus</td><td>2.7+</td><td>组件库</td></tr><tr><td>构建</td><td>Vite</td><td>3.2+（实际 ^3.2.10）</td><td>开发服务器与构建</td></tr><tr><td>状态</td><td>Pinia</td><td>2.1+</td><td>全局状态管理</td></tr><tr><td>路由</td><td>Vue Router</td><td>4.3+</td><td>路由管理</td></tr><tr><td>HTTP</td><td>Axios</td><td>0.27+（实际 ^0.27.2）</td><td>HTTP 请求（注：0.27.x 版本较老）</td></tr><tr><td>富文本</td><td>TinyMce</td><td>5.10+</td><td>富文本编辑器</td></tr><tr><td>图表</td><td>ECharts</td><td>5.5+</td><td>数据可视化</td></tr><tr><td>CSS</td><td>TailwindCSS</td><td>3.4+</td><td>原子化 CSS</td></tr></tbody></table><h2 id="核心特性" tabindex="-1">核心特性 <a class="header-anchor" href="#核心特性" aria-label="Permalink to "核心特性""></a></h2><h3 id="动态路由" tabindex="-1">动态路由 <a class="header-anchor" href="#动态路由" aria-label="Permalink to "动态路由""></a></h3><p>从后端 <code>/index/getMenus</code> 接口获取菜单数据，自动生成前端路由，无需手动维护路由表。</p><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>后端菜单数据 → generator-routers.ts → Vue Router 动态路由</span></span></code></pre></div><h3 id="权限控制" tabindex="-1">权限控制 <a class="header-anchor" href="#权限控制" aria-label="Permalink to "权限控制""></a></h3><p><code>v-perm</code> / <code>v-perms</code> 指令控制按钮级权限：</p><div class="language-vue vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"><</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">el-button</span><span style="--shiki-dark:#62E884;--shiki-dark-font-style:italic;--shiki-light:#59873A;--shiki-light-font-style:inherit;"> v-perm</span><span style="--shiki-dark:#F286C4;--shiki-light:#999999;">=</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">"</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;">sys:user:add</span><span style="--shiki-dark:#DEE492;--shiki-light:#B5695977;">'</span><span style="--shiki-dark:#DEE492;--shiki-light:#999999;">"</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span><span style="--shiki-dark:#F6F6F4;--shiki-light:#393A34;">新增</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;"></</span><span style="--shiki-dark:#F286C4;--shiki-light:#1E754F;">el-button</span><span style="--shiki-dark:#F6F6F4;--shiki-light:#999999;">></span></span></code></pre></div><h3 id="Token-管理" tabindex="-1">Token 管理 <a class="header-anchor" href="#Token-管理" aria-label="Permalink to "Token 管理""></a></h3><p>Axios 拦截器自动处理：</p><ul><li>请求拦截：自动添加 <code>Authorization: Bearer <token></code> 请求头</li><li>响应拦截：<code>code === 401</code> 时自动跳转登录页</li></ul><h3 id="组件库" tabindex="-1">组件库 <a class="header-anchor" href="#组件库" aria-label="Permalink to "组件库""></a></h3><p>内置 20+ 个业务组件：</p><table tabindex="0"><thead><tr><th>组件</th><th>说明</th></tr></thead><tbody><tr><td>BasicTable</td><td>数据表格（分页、排序、搜索）</td></tr><tr><td>BasicForm</td><td>动态表单（配置驱动）</td></tr><tr><td>BasicModal</td><td>弹窗（表单弹窗、详情弹窗）</td></tr><tr><td>BasicUpload</td><td>文件上传</td></tr><tr><td>Editor</td><td>富文本编辑器（TinyMce）</td></tr><tr><td>ImportExcel</td><td>Excel 导入</td></tr><tr><td>Cropper</td><td>头像裁剪</td></tr><tr><td>Region</td><td>行政区划选择</td></tr><tr><td>Password</td><td>密码强度检测</td></tr><tr><td>Qrcode</td><td>二维码生成</td></tr></tbody></table><h2 id="工程结构" tabindex="-1">工程结构 <a class="header-anchor" href="#工程结构" aria-label="Permalink to "工程结构""></a></h2><div class="language-text vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">text</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span>ui/src/</span></span>
|
||
<span class="line"><span>├── api/ # API 接口层（按业务域分组）</span></span>
|
||
<span class="line"><span>├── components/ # 公共组件库</span></span>
|
||
<span class="line"><span>├── directives/ # 自定义指令（v-perm）</span></span>
|
||
<span class="line"><span>├── enums/ # 枚举常量</span></span>
|
||
<span class="line"><span>├── hooks/ # 组合式函数</span></span>
|
||
<span class="line"><span>├── layout/ # 布局组件</span></span>
|
||
<span class="line"><span>├── plugins/ # 插件</span></span>
|
||
<span class="line"><span>├── router/ # 路由配置</span></span>
|
||
<span class="line"><span>├── settings/ # 项目配置</span></span>
|
||
<span class="line"><span>├── store/ # Pinia 状态管理</span></span>
|
||
<span class="line"><span>├── styles/ # 全局样式</span></span>
|
||
<span class="line"><span>├── utils/ # 工具函数</span></span>
|
||
<span class="line"><span>└── views/ # 页面视图</span></span></code></pre></div><h2 id="开发命令" tabindex="-1">开发命令 <a class="header-anchor" href="#开发命令" aria-label="Permalink to "开发命令""></a></h2><div class="language-bash vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">bash</span><pre class="shiki shiki-themes dracula-soft vitesse-light vp-code" tabindex="0"><code><span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> install</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # 安装依赖</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> dev</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # 启动开发服务器</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> build</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # 构建生产版本</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> preview</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # 预览构建结果</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> lint:eslint</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # ESLint 检查</span></span>
|
||
<span class="line"><span style="--shiki-dark:#62E884;--shiki-light:#59873A;">pnpm</span><span style="--shiki-dark:#E7EE98;--shiki-light:#B56959;"> lint:prettier</span><span style="--shiki-dark:#7B7F8B;--shiki-light:#A0ADA0;"> # Prettier 格式化</span></span></code></pre></div>`,21)])])}const u=s(n,[["render",d]]);export{c as __pageData,u as default};
|