最近公司的项目需要重新做一套模版，在TDesige 和 Arco Desige中我们选择了后者。
安装环境和运行项目
安装arco cli环境
npm i -g arco-cli
- 进入到一个文件夹新建项目
cd someDir
arco init hello-arco-pro
- 选择 技术栈
? 请选择你希望使用的技术栈
React
❯ Vue
- 选择 arco-design-pro 分类
? 请选择一个分类
业务组件
组件库
Lerna Menorepo 项目
❯ Arco Pro 项目
等待安装依赖。。。
看到以下输出就是创建成功了
yy8v7afi.png
- 进入到项目中，运行代码
cd hello-arco-pro
npm run dev
打开 localhost:3000 就能看到如下页面
8t088ais.png
关闭moke环境走接口
- src->main.ts文件中将下面代码注释
import './mock';
- 或者在对应mock中设置如下参数
setupMock({
mock:false,
})
1695715517972.png
- 在 ./config/vite.config.dev.ts 文件下添加以下代码进行代理和运行其他人访问本地服务
server: {
open: true,
fs: {
strict: true,
},
proxy: { // 跨域代理
'/api': {
target: '要跨域的地址。例：https://192.168.1.74:3000',
changeOrigin: true, // 允许跨域
},
},
host: '0.0.0.0', // 允许其他电脑访问
},
- 清空.env.development 中 VITE_API_BASE_URL的值
VITE_API_BASE_URL= ''
- 在./src/api/user.ts修改登录接口(这里我的接口跟示例接口一样)
export function login(data: LoginData) {
return axios.post<LoginRes>('/api/user/login', data);
}
- 在./src/api/interceptor.ts文件下重写拦截器
import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
// 用户可以根据自身后台系统进行修改
export interface HttpResponse<T = unknown> {
status: number;
msg: string;
code: number;
data: T;
}
axios.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 此处对请求进行配置
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
(response: AxiosResponse<HttpResponse>) => {
const res = response.data;
// if the custom code is not 20000, it is judged as an error.
if (res.code !== 200) {
// remind users
// 508: Illegal token; 512: Other clients logged in; 514: Token expired;
if (
[508, 512, 514].includes(res.code)
) {
// do something
}
return Promise.reject(new Error(res.msg || 'Error'));
}
return res;
},
(error) => {
return Promise.reject(error);
}
);
1695799364848.png
这里登录的接口已经通了，在提示欢迎使用的时候已经存了token
但是立马就会报错，走一个info和logout的接口，大概率是路由守卫搞得鬼
-
打开./src/router/guard/userLoginInfo.ts
1695799872134.jpg - 打开./src/store/modules/user/index.ts，在state中找到role，更改它的值
（由于在同级目录下的types.ts中强设了role的值type RoleType = '' | '*' | 'admin' | 'user';role: RoleType; 所以我们要在里面选一个，不然会报红，这里我用的admin）
role: 'admin',
登录成功，进来之后发现报了两个Error错误，并且有两个模块是没有数据的。
1695803303557.png
应该是我们改了拦截器的原因
- 打开./src/utils/setup-moke.ts,找到successResponseWrap方法，修改里面的code
code: 200
新增一个菜单
- 在 ./src/views中新建msgManager文件夹，在其中新建application文件夹，并建index.vue文件
<template lang="">
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="">
</style>
- 在./src/router/routes/modules下新建msgManager.ts文件
import { DEFAULT_LAYOUT } from '../base';
import { AppRouteRecordRaw } from '../types';
const APPLICATION: AppRouteRecordRaw = {
path: '/msgManager',
name: 'msgManager',
component: DEFAULT_LAYOUT,
meta: {
locale: 'menu.msgManager',
requiresAuth: true,
icon: 'icon-list',
order: 2,
},
children: [
{
path: 'application', // The midline path complies with SEO specifications
name: 'application',
component: () => import('@/views/msgManager/application/index.vue'),
meta: {
locale: 'menu.application.msgManager',
requiresAuth: true,
roles: ['*'],
},
},
],
};
export default APPLICATION;
- 在./src/locale/zh-CN.ts的语言包中增加菜单名，其他语言包不赘述。
export default {
'menu.dashboard': '仪表盘',
'menu.dashboard.workplace': '工作台',
'menu.msgManager': '消息管理',
'menu.application.msgManager': '应用消息管理',
}
持续更新中...
如果这篇文章对你有帮助，或者在进行中遇到其他问题，欢迎评论区留言出来。
我们一起探讨~
