前端开发

本章节介绍如何开发 Fastdotnet 插件的前端部分，包括管理端（Admin）和应用端（App）。

📖 本章内容

Vue 3 + TypeScript 基础
Element Plus 组件库
路由配置
状态管理（Pinia）
API 调用
微前端集成
构建和部署

🎨 双端架构

管理端 (Admin)

面向管理员的后台管理系统。

特点：

数据管理
系统配置
权限控制
统计分析

路由前缀： /micro/{PluginId}/admin/

应用端 (App)

面向最终用户的业务应用。

特点：

业务流程
数据展示
用户交互
移动适配

路由前缀： /micro/{PluginId}/app/

🚀 快速开始

1. 安装依赖

bash

cd MyPlugin/Frontend/MyPlugin.Admin
pnpm install

2. 启动开发服务器

bash

pnpm dev

访问 http://localhost:8099 预览。

3. 添加页面

在 src/views/ 目录下创建 Sample.vue:

vue

<template>
  <div class="sample-page">
    <el-card>
      <template #header>
        <span>示例页面</span>
      </template>
      
      <el-button type="primary" @click="handleClick">
        点击我
      </el-button>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ElMessage } from 'element-plus'

const handleClick = () => {
  ElMessage.success('操作成功！')
}
</script>

<style scoped>
.sample-page {
  padding: 20px;
}
</style>

4. 配置路由

编辑 src/router/index.ts:

typescript

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/sample',
    name: 'Sample',
    component: () => import('../views/Sample.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

📚 详细内容

💡 提示: 本章节正在完善中，详细内容即将添加。

核心主题

Vue 3 组合式 API - setup 语法糖
TypeScript 类型定义 - 接口和类型
Element Plus 组件 - 常用组件使用
路由管理 - Vue Router 配置
状态管理 - Pinia Store
HTTP 请求 - Axios 封装
微前端 - qiankun 生命周期
样式方案 - Scoped CSS / SCSS

前端开发 ​

📖 本章内容 ​

🎨 双端架构 ​

管理端 (Admin) ​

应用端 (App) ​

🚀 快速开始 ​

1. 安装依赖 ​

2. 启动开发服务器 ​

3. 添加页面 ​

4. 配置路由 ​

📚 详细内容 ​

核心主题 ​

🔗 相关链接 ​