caoliancun/vue-antd-admin-skeleton
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

第一次提交

Browse Source
This commit is contained in:
caolc
2022-09-08 16:13:28 +08:00
parent 56635a948b
commit a31960fc1a
45 changed files with 9371 additions and 9230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/README.md
View File

@@ -1,17 +0,0 @@
---
title: 首页
home: true
heroImage: /logo.png
heroText: Vue Antd Admin
tagline: 开箱即用的中台前端/设计解决方案
actionText: 快速上手 →
actionLink: /start/use
features:
- title: 简洁
details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
- title: 优雅
details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
- title: 自然
details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
footer: MIT Licensed | Copyright © 2018-present iczer
---

10
docs/advance/skill.md
View File

@@ -1,10 +0,0 @@
---
title: 108个小技巧
lang: zn-CN
---
# 108个小技巧
## 自定义菜单icon
## 隐藏页面标题
## 关闭页签API
## 权限校验PI

5
docs/develop/README.md
View File

@@ -1,5 +0,0 @@
---
title: 开发
lang: zh-CN
---
# 开发

161
docs/develop/service.md
View File

@@ -1,161 +0,0 @@
---
title: 服务端交互
lang: zh-CN
---
# 服务端交互
数据服务是一个应用的灵魂，它驱动着应用的各个功能模块的正常运转。Vue Antd Admin 在 service 模块封装了服务端交互，通过 API 的形式可以和任何技术栈的服务端应用一起工作。
## 服务交互流程
在 Vue Antd Admin 中，服务端交互流程如下：
* 组件内调用 service 服务 API
* service 服务 API 封装请求数据，通过 request.js 发送请求
* 组件获取 service 返回的数据，更新视图数据或触发其它行为
我们以登录为例，Login.vue 组件内，用户输入账号密码，点击登录，调用 services/user/login api
```vue {5,17}
<template>
...
</template>
<script>
import {login} from '@/services/user'
...
export default {
name: 'Login',
methods: {
onSubmit (e) {
e.preventDefault()
this.form.validateFields((err) => {
if (!err) {
this.logging = true
const name = this.form.getFieldValue('name')
const password = this.form.getFieldValue('password')
login(name, password).then(res => this.afterLogin(res))
}
})
}
}
}
</script>
```
`services/user/login` 封装账户密码数据，通过 `request.js` 发送登录服务请求
```js
import {request, METHOD} from '@/utils/request'
/**
* 登录服务
* @param name 账户名
* @param password 账户密码
* @returns {Promise<AxiosResponse<T>>}
*/
async function login(name, password) {
return request(LOGIN, METHOD.POST, {
name: name,
password: password
})
}
```
Login.vue 获取登录服务返回的数据，进行后续操作
```vue {14,18-23}
<template>
...
</template>
<script>
import {login} from '@/services/user'
...
export default {
name: 'Login',
methods: {
onSubmit (e) {
this.form.validateFields((err) => {
if (!err) {
...
login(name, password).then(res => this.afterLogin(res))
}
})
},
afterLogin(res) {
if (res.data.code >= 0) { //登录成功
...
} else { //登录失败
this.error = loginRes.message
}
}
}
}
</script>
```
## 服务模块结构
服务模块结构如下：
```bash
...
├── src
│ └── services # 数据服务模块
│ ├── user.js # 用户数据服务
│ ├── product.js # 产品服务
│ ...
│ ├── api.js # api 地址管理
│ └── index.js # 服务模块导出
...
│ └── utils # 数据服务模块
│ ├── request.js # 基于 axios 的 http 请求工具
...
```
services 文件夹下， api.js 用于服务请求地址的统一管理，index.js 用于模块化导出服务，其它 *.js 文件对应各个服务模块。
## request.js
request.js 基于 axios 封装了一些常用的函数，如下：
```js
export {
METHOD, //http method 常量
AUTH_TYPE, //凭证认证类型 常量
request, //http请求函数
setAuthorization, //设置身份凭证函数
removeAuthorization, //移除身份凭证函数
checkAuthorization //检查身份凭证是否过期函数
}
```
:::tip
凭证认证类型默认为 [Bearer](https://www.jianshu.com/p/8f7009456abc)，你可以根据自己的需要实现其它类型的认证
:::
## Base url 配置
你可以在项目根目录下的环境变量文件(.env 和 .env.development)中配置你的 API 服务 base url 地址。
生产环境，.env 文件
```properties
VUE_APP_API_BASE_URL=https://www.server.com
```
开发环境，.env.development 文件：
```properties
VUE_APP_API_BASE_URL=https://localhost:8000
```
## 跨域设置
在开发环境中，通常我们的Vue应用和服务应用运行在不同的地址或端口上。我们可以通过简单的设置，代理前端请求，来避免跨域问题。如下：
首先，在 services/api.js 文件中设置 API_PROXY_PREFIX 常量，BASE_URL 像下面这样设置：
```js {2,4}
//跨域代理前缀
const API_PROXY_PREFIX='/api'
//base url
const BASE_URL = process.env.NODE_ENV === 'production' ? process.env.VUE_APP_API_BASE_URL : API_PROXY_PREFIX
//导出api服务地址
module.exports = {
LOGIN: `${BASE_URL}/login`,
ROUTES: `${BASE_URL}/routes`
}
```
然后，在 vue.config.js 文件中配置代理：
```js
model.exports = {
devServer: {
proxy: {
'/api': { //此处要与 /services/api.js 中的 API_PROXY_PREFIX 值保持一致
target: process.env.VUE_APP_API_BASE_URL,
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
```
:::tip
此代理配置仅适用于开发环境，生产环境的跨域代理请在自己的web服务器配置。
:::

5
docs/other/README.md
View File

@@ -1,5 +0,0 @@
---
title: 其它
lang: zh-CN
---
# 其它

8
docs/other/community.md
View File

@@ -1,8 +0,0 @@
---
title: 社区
lang: zh-CN
---
# 社区
## 交流学习
### QQ群：812277510、610090280（已满）

5
docs/other/upgrade.md
View File

@@ -1,5 +0,0 @@
---
title: 更新日志
lang: zh-CN
---
# 更新日志

5
docs/start/README.md
View File

@@ -1,5 +0,0 @@
---
title: 开始
lang: zh-CN
---
## 开始

22
docs/start/faq.md
View File

@@ -1,22 +0,0 @@
---
title: 常见问题
lang: zh-CN
---
# 常见问题
### 为什么不是 Ant Design Pro Vue ？
[Ant Design Pro Vue](https://github.com/vueComponent/ant-design-vue-pro) 是 [Ant Design Pro](https://github.com/ant-design/ant-design-pro) 的 Vue 版本，其中项目结构、组件、
布局和使用方法等基本与 Ant Design Pro 的 react 版本保持一致。如果你比较熟悉 react 版，或者你已经在使用它，这确实是一个不错的选择。
[Vue Antd Admin](https://github.com/iczer/vue-antd-admin) 同样实现了 Ant Design Pro 的所有功能。与此同时，我们还根据 Vue 的特性，对 Ant Design Pro 的一些组件和布局作出了相应的修改及优化，同时不影响保持与 Ant Design Pro 的一致。
另外，我们还在添加一些 Ant Design Pro 没有的功能，比如全局动画、多页签模式等。
如果你想使用 Ant Design Pro，但又觉得它缺乏一些你想要的功能，不妨看看 [Vue Antd Admin](https://github.com/iczer/vue-antd-admin)，我们会认真考虑每个用户的需求。
因此，如果你有一些不错的想法和建议，欢迎随时和我们交流，很可能你的想法就在我们下一个版本中实现。
### 如何使用 Vue Antd Admin ？
请阅读文档 [开始使用](./use.md)。有任何疑问，欢迎在 github 上给我们提交 [issue](https://github.com/iczer/vue-antd-admin/issues/new)。
### 是否支持国际化 ？
Vue Antd Admin 引入了 vue-i18n 支持。因此你可以使用 vue-i18n 的特性对项目做国际化修改，详细请查看 [国际化](../advance/i18n.md)

18
docs/start/use.md
View File

@@ -2,13 +2,6 @@
title: 使用
lang: zh-CN
---
# 使用
## 准备
你的本地环境需要安装 yarn、node 和 git。我们的技术栈基于 ES2015+、Vue、Antd，提前学习这些知识会非常有帮助。
## 安装
克隆本项目到本地
```bash
$ git clone https://github.com/iczer/vue-antd-admin.git
```
安装依赖
```bash
@@ -16,17 +9,7 @@ $ yarn install
or
$ npm install
```
:::tip
master 分支是 Vue Antd Admin 的标准版代码，此分支代码适合用于用于学习研究，不推荐在此分支做正式开发。
我们在 basic 分支提供了 Vue Antd Admin 的基础版代码，正式开发请切换至此分支，以便于后续的版本更新。
:::
:::warning
如果基于 `master分支` 进行开发，在版本更新时遇到的代码冲突问题请自行解决，我们不对基于 `master分支` 开发时遇到的问题提供技术支持。
再次强调，`master分支` 仅推荐用于学习参考，正式开发请切换至 `basic` 分支！！！
:::
## 目录结构
我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。
```bash
├── docs # 使用文档
├── public
@@ -59,4 +42,3 @@ $ yarn serve
or
$ npm run serve
```
启动成功后，会看到一个本地预览地址，通常是 http://localhost:8080 。接下来就可以修改代码，并实时预览修改结果啦！