# vue3-ubroad-admin

**Repository Path**: gdiao/vue3-ubroad-admin

## Basic Information

- **Project Name**: vue3-ubroad-admin
- **Description**: 利用vue3 + ant-design-vue3 + vite + javascript 构建项目模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-04-01
- **Last Updated**: 2024-04-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue3-ubroad-admin

VUE3 + Vite + Javascript + Pinia + ant-design-vue 实现的一个后端管理系统模版
本项目从https://github.com/lower-greenHand/vue3-PC-admin fork 而来，起因是项目需要使用 vue，之前一直使用
vue2 和 ant-design2.x 构建，考虑到未来的技术路线和 vue3 的成熟度，决定进行技术升级，但是在查找了很多的项目模版之后发现
大多使用 TS 进行构建开发，以项目本身的复杂度 TS 的开发体验要求开发人员进行 Typescript 学习，但前端本身的逻辑复杂度对编码
没有过多的 strict 要求，所以使用 javascript 进行项目模版构建

## 说明

- Get the project code

https://github.com/gary-dgc/vue-ubroad-admin.git

- Notice

1. 为消除 Model.confirm 异常问题，使用锁定版本的 antD（3.2.20）和 Vue（3.3.0）后续的两个组件升级需要留意测试 Model.destroyAll 失效问题

1. 路径别名：@ = src，如有其他需要请在在 vite.config.js 中自行定义

1. 项目在/views/下的不同文件夹中通过探测 routes.js 文件的存在进行路由加载。

1. 考虑到 webpack 下的开发习惯，index.html 模版移动至 public/中，通过 vite-html-plugin 完成模版的注入

1. 通过 env 完成参数配置，支持【dev】和【prod】两种模式,应用的名称在.env 中的 VITE_APP_NAME 定义，并初始化到 store/module/app 中。

```
VITE_BASE_URL_API = https://www.baidu.com # API基本路径
VITE_AUTH_URL_API = https://www.baidu.com/ubapi # 授权访问API路径
VITE_OPEN_URL_API = https://www.baidu.com/opapi # 开放访问API路径
VITE_APP_DES_KEY = 'odvgCvVmuckJXV2B' # 密码等对称加密key
VITE_PUBLIC_PATH = / # 应用context路径
```

1. 在 public/config.js 中可以配置上述的环境变量，此配置可以使打包后的/dist 中代码支持后端访问路径修改，通过修改 config.js 中的内容既可调整后端 API 的访问路径而不必重新打包，此配置的注入通过 vite-html-plugin 实现，参考 vite.config.js 中内容。

1. 应用的 pinia 和 router 加载在/main.js 中处理，定制代码入口在/plugins/boot 中，可以根据定制需要添加代码。router 中的拦截处理在/router/module/guards 中进行定义。store 的初始化在 store/index.js 中完成。axios 的拦截处理在/utils/http/intercept 中定义。

1. 应用式样正在 theme 中进行定制，其中自定义组件的式样在 style 中定义，ant 组件相关式样在 antd 中定义

1. i18n 的支持及使用

```
<div>
{{ t('index.description') }}
</div>
<script setup>
import t from '@/lang/t'
....
</script>
```

1. 功能性组件在 src/components 定义，业务功能相关的功能组件在/src/views/common 中定义。定义在这两处的组件会自动进行注册，具体的加载动作在 plugins/boot 中完成，这意味着在开发中可以直接利用 kebab-case 进行组件声明和使用

```
<div>
  <demo-comp />
</div>
<script setup>
// 此处不需要进行 import DemoComp from '@/views/common/DemoComp.vue'
</script>
```

1. API 的声明在 src/api 中实现，路径信息的定义在 apis.js 中，具体模块的 API 推荐通过独立文件进行集中定义

```
// Api定义方式1: 支持解构导入
import request from '@/utils/http';

import { LOGIN, USER_INFO } from './apis';

export const login = (data) => {
  return request.post(LOGIN, data);
};

export const getUserInfo = () => {
  return request.get(USER_INFO);
};

export default { login, getUserInfo };

// 使用如下代码
import { login } from '@/api/demo1'
login({...}).then((result)=>{...})
```

```
// Api定义方式2：不支持解构导入，推荐使用此方式定义，可以进行namespce的隔离
import request from '@/utils/http';

import { LOGIN, USER_INFO } from './apis';

export default {
  login: (data) => {
    return request.post(LOGIN, data);
  },
  getUserInfo: () => {
    return request.get(USER_INFO);
  },
};

// 推荐使用如下代码, 可以避免login在多模块中存在的命名冲突
import demoApi from '@/api/demo2'
demoApi.login({...}).then((result)=>{...})
```

## 开发准备

- Installation dependencies

版本要求：Node.js >= 18._._

```
yarn 或 yarn install

#!!!IMPORTANT: npm install过程因为pdf-js等问题，加载异常
```

- 开发运行

```
yarn dev  或 npm run dev
```

- 生产打包

```
开发打包
yarn build:dev


生产打包
yarn build

```

## Tauri 开始

- 开发运行

```
npm run tauri dev
```

- 程序打包

```
npm run tauri build
```