framework 前端开发手册

1. 开发前准备

安装 Node.js

版本要求 >= 18.0.0 < 21

安装 PNPM

版本要求 >= 8.0.0

2. 下载前端脚手架代码

下载前端脚手架代码，安装依赖，启动项目

# 下载前端脚手架
git clone http://61.169.126.130:58000/bigdata/magus-cli/magus-cli-ui.git [你的项目名]

# 进入项目文件夹
cd [你的项目名]

# 修改远程仓库地址为自己项目地址
git remote set-url origin [你的项目仓库地址]

# 切换到 develop 分支
git checkout develop

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

3. 项目结构

[你的项目名]
├── public                  # 公共静态资源
│   ├── favicon.ico         # 浏览器标签图标
├── src                     # 项目资源目录
│   ├── assets              # 静态资源
│   ├── components          # 公共组件
│   ├── layout              # 项目布局文件
│   ├── router              # 项目路由文件
│   ├── store               # 状态管理
│   ├── App.vue             # 根组件
│   └── main.ts             # 入口文件
│   └── scan-modules.ts     # 项目模块扫描 
├── .eslintrc.cjs           # eslint 配置
├── .npmrc                  # pnpm 配置
├── package.json            # package.json
├── prettier.config.cjs     # 代码格式化配置
├── tsconfig.json           # ts 配置文件
├── vite.config.ts          # vite 配置文件

4. 集成 framework-wujie

在 src/router/index.ts 中添加路由

// router/index.ts
import { createRouter } from '@magustek/framework-core'
import { createMainRouter } from '@magustek/framework-wujie'

const router = createRouter({ base: '', routes: []})
const mainRouter = createMainRouter(router)

export {
  router,
  mainRouter
}

在 src/main.ts 使用

// main.ts
import { createApp } from 'vue'
import { router, mainRouter } from '@/router'

const app = createApp()
app.use(router)
app.use(mainRouter)

5. 集成 Keep-Alive

在项目中可以使用 useKeepAliveTag 提供的方法来缓存子应用的页面

<!-- src/layout/index.vue --> 
<template>
  <keep-alive :include="keepAliveList">
    <router-view v-slot="{ Component, route }">
      <component :is="keepAliveComponent(Component, route)" />
    </router-view>
  </keep-alive>
</template>

<script lang="ts" setup>
import { useKeepAliveTag } from "@magustek/framework-core";
const { keepAliveList, keepAliveComponent } = useKeepAliveTag();
</script>

6. 应用开发

6.1 普通应用开发(示例)

在 src/views/project/index.vue 中编写代码, 并使用 useAxios 发送请求查询项目列表

<template>
  <div>
    <h1>项目列表</h1>
    <button @click="onClick">查询项目列表</button>
    <div v-if="isLoading">
      <div>加载中...</div>
    </div>
    <div v-else>
      <div v-for="item in data" :key="item.id">
        <div>项目名称: {{ item.name }}</div>
        <div>项目描述: {{ item.desc }}</div>
        <div>项目地址: {{ item.url }}</div>
        <div>项目状态: {{ item.status }}</div>
        <div>项目创建时间: {{ item.createTime }}</div>  
        <div>项目更新时间: {{ item.updateTime }}</div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 查询项目列表
import { useAxios } from '@magustek/framework-core'

const { post } = useAxios()
const { data, execute, isLoading } = post('/api/project/list', {}, {}, { immediate: false })

// 按钮点击, 查询项目列表
const onClick = () => {
  execute({ page:1, psgeSize: 100})
}
</script>

6.2 流程应用开发

流程应用开发过程与普通应用开发完全相同

7. 使用 useMainRouter

在项目中可以使用 useMainRouter 提供的方法跳转到另一个子应用的页面上

// src/views/home/index.vue
import { useMainRouter } from '@magustek/framework-wujie'

const { push } = useMainRouter()

// 使用 push 方法跳转到另一个子应用的页面上
push('/home/index', 'appName')

8. 使用 useCoreStore

在项目中可以使用 useCoreStore 提供的方法获取全局提供的数据

import { useCoreStore } from '@magustek/framework-core'

const { 
  userInfo, // 当前用户基本信息
  dicts,    // 所有字典信息
  authCodes // 当前用户所拥有的权限码
} = useCoreStore()

console.log(userInfo, dicts, authCodes)

9. 使用 useGlobalStore

在项目中可以使用 useGlobalStore 提供的方法来存储、读取共享数据

import { useGlobalStore } from '@magustek/framework-core'

const { getItem, setItem, removeItem } = useGlobalStore()

// 获取数据
const value = getItem('key')

// 设置数据
setItem('key', 'value')

// 删除数据
removeItem('key')

10. 使用 useMultiTags

在项目中可以使用 useMultiTags 提供的方法来操作标签栏

import { useMultiTags } from '@magustek/framework-core'

const {
  multiTags,   // 当前所有的标签
  activeTag,   // 当前激活的标签
  lastTag,     // 上一个标签
  pushTag,     // 添加标签
  closeTag,    // 关闭标签
  updateTag,   // 更新标签
  closeAll,    // 关闭所有标签
  closeActive, // 关闭激活的标签
  closeOthers, // 关闭除激活的标签以外的标签
} = useMultiTags();