最近公司的項(xiàng)目需要重新做一套模版，在TDesige 和 Arco Desige中我們選擇了后者。
安裝環(huán)境和運(yùn)行項(xiàng)目
安裝arco cli環(huán)境
npm i -g arco-cli
- 進(jìn)入到一個(gè)文件夾新建項(xiàng)目
cd someDir
arco init hello-arco-pro
- 選擇 技術(shù)棧
? 請(qǐng)選擇你希望使用的技術(shù)棧
React
? Vue
- 選擇 arco-design-pro 分類
? 請(qǐng)選擇一個(gè)分類
業(yè)務(wù)組件
組件庫(kù)
Lerna Menorepo 項(xiàng)目
? Arco Pro 項(xiàng)目
等待安裝依賴。。。
看到以下輸出就是創(chuàng)建成功了
- 進(jìn)入到項(xiàng)目中，運(yùn)行代碼
cd hello-arco-pro
npm run dev
打開 localhost:3000 就能看到如下頁(yè)面
關(guān)閉moke環(huán)境走接口
- src->main.ts文件中將下面代碼注釋
import './mock';
- 或者在對(duì)應(yīng)mock中設(shè)置如下參數(shù)
setupMock({
mock:false,
})
1695715517972.png
- 在 ./config/vite.config.dev.ts 文件下添加以下代碼進(jìn)行代理和運(yùn)行其他人訪問本地服務(wù)
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';
// 用戶可以根據(jù)自身后臺(tái)系統(tǒng)進(jìn)行修改
export interface HttpResponse<T = unknown> {
status: number;
msg: string;
code: number;
data: T;
}
axios.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 此處對(duì)請(qǐng)求進(jìn)行配置
return config;
},
(error) => {
// 對(duì)請(qǐng)求錯(cuò)誤做些什么
return Promise.reject(error);
}
);
// 添加響應(yīng)攔截器
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);
}
);
這里登錄的接口已經(jīng)通了，在提示歡迎使用的時(shí)候已經(jīng)存了token
但是立馬就會(huì)報(bào)錯(cuò)，走一個(gè)info和logout的接口，大概率是路由守衛(wèi)搞得鬼
-
打開./src/router/guard/userLoginInfo.ts
1695799872134.jpg - 打開./src/store/modules/user/index.ts，在state中找到role，更改它的值
（由于在同級(jí)目錄下的types.ts中強(qiáng)設(shè)了role的值type RoleType = '' | '*' | 'admin' | 'user';role: RoleType; 所以我們要在里面選一個(gè)，不然會(huì)報(bào)紅，這里我用的admin）
role: 'admin',
登錄成功，進(jìn)來之后發(fā)現(xiàn)報(bào)了兩個(gè)Error錯(cuò)誤，并且有兩個(gè)模塊是沒有數(shù)據(jù)的。
應(yīng)該是我們改了攔截器的原因
- 打開./src/utils/setup-moke.ts,找到successResponseWrap方法，修改里面的code
code: 200
新增一個(gè)菜單
- 在 ./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的語(yǔ)言包中增加菜單名，其他語(yǔ)言包不贅述。
export default {
'menu.dashboard': '儀表盤',
'menu.dashboard.workplace': '工作臺(tái)',
'menu.msgManager': '消息管理',
'menu.application.msgManager': '應(yīng)用消息管理',
}
持續(xù)更新中...
如果這篇文章對(duì)你有幫助，或者在進(jìn)行中遇到其他問題，歡迎評(píng)論區(qū)留言出來。
我們一起探討~
