最近公司的項目需要重新做一套模版袒炉，在TDesige 和 Arco Desige中我們選擇了后者希坚。
安裝環(huán)境和運行項目
安裝arco cli環(huán)境
npm i -g arco-cli
- 進(jìn)入到一個文件夾新建項目
cd someDir
arco init hello-arco-pro
- 選擇 技術(shù)棧
? 請選擇你希望使用的技術(shù)棧
React
? Vue
- 選擇 arco-design-pro 分類
? 請選擇一個分類
業(yè)務(wù)組件
組件庫
Lerna Menorepo 項目
? Arco Pro 項目
等待安裝依賴溃睹。玛痊。。
看到以下輸出就是創(chuàng)建成功了
- 進(jìn)入到項目中，運行代碼
cd hello-arco-pro
npm run dev
打開 localhost:3000 就能看到如下頁面
關(guān)閉moke環(huán)境走接口
- src->main.ts文件中將下面代碼注釋
import './mock';
- 或者在對應(yīng)mock中設(shè)置如下參數(shù)
setupMock({
mock:false,
})
1695715517972.png
- 在 ./config/vite.config.dev.ts 文件下添加以下代碼進(jì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ǒng)進(jìn)行修改
export interface HttpResponse<T = unknown> {
status: number;
msg: string;
code: number;
data: T;
}
axios.interceptors.request.use(
(config: AxiosRequestConfig) => {
// 此處對請求進(jìn)行配置
return config;
},
(error) => {
// 對請求錯誤做些什么
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)通了颓哮，在提示歡迎使用的時候已經(jīng)存了token
但是立馬就會報錯家妆，走一個info和logout的接口，大概率是路由守衛(wèi)搞得鬼
-
打開./src/router/guard/userLoginInfo.ts
1695799872134.jpg - 打開./src/store/modules/user/index.ts冕茅，在state中找到role伤极，更改它的值
（由于在同級目錄下的types.ts中強設(shè)了role的值type RoleType = '' | '*' | 'admin' | 'user';role: RoleType; 所以我們要在里面選一個，不然會報紅姨伤，這里我用的admin）
role: 'admin',
登錄成功哨坪，進(jìn)來之后發(fā)現(xiàn)報了兩個Error錯誤，并且有兩個模塊是沒有數(shù)據(jù)的乍楚。
應(yīng)該是我們改了攔截器的原因
- 打開./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': '應(yīng)用消息管理',
}
持續(xù)更新中...
如果這篇文章對你有幫助臊泌，或者在進(jìn)行中遇到其他問題鲤桥，歡迎評論區(qū)留言出來。
我們一起探討~
