助力 Arco design pro vue 快速开发

demo查看

快速创建项目

1. 脚手架安装
   需要确认是否安装过node，然后运行一下命令进行安装脚手架
   npm i -g arco-cli
2. 项目创建
   运行这个命令来进入里面选择自己需要的一些选项
   arco init hello-arco-pro
3. 运行
   npm run dev
4. 打包构建
   npm run build

目录展示

为什么要进行代码调整

1. Arco design 采用token的方式来校验身份，而公司都是采用cookie的方式校验身份，因此需去掉token相关代码

项目代码调整及讲解

1. 主文件main.js中删除 import './mock'; 代码

2. 在 @/api/interceptor.ts 请求拦截器中调整以下代码
   请求拦截器

   axios.interceptors.request.use(
     (config: AxiosRequestConfig) => {
       if (import.meta.env.MODE !== 'development') {
         const url = config?.url;
         if (url) {
           config.url = url.substring(4);
         }
       }
       
       return config;
     },
     (error) => {
       // do something
       return Promise.reject(error);
     }
   );
   

   响应拦截器里面的处理逻辑全部注释掉就好

3. 在 ./config/vite.config.dev.ts 文件下添加以下代码进行代理和运行其他人访问本地服务

   server: {
       open: true,
       fs: {
         strict: true,
       },
       proxy: { // 跨域代理
         '/api': {
           target: '要跨域的地址。例：192.168.1.74:3000',
           changeOrigin: true, // 允许跨域
         },
       },
       host: '0.0.0.0', // 允许其他电脑访问
     },
   

4. 这个项目本身不支持一级菜单，如果想实现一级菜单需进行一下配置，添加注释的部分为设置一级菜单的必要参数

   const DASHBOARD: AppRouteRecordRaw = {
     path: '/authenticationManagement', // 一级菜单的路径
     name: 'authenticationManagement',
     component: DEFAULT_LAYOUT,
     redirect: '/authenticationManagement/', // 还是重定向到这个一级菜单
     meta: {
       locale: 'menu.authenticationManagement',
       requiresAuth: true,
       order: 0,
       hideChildrenInMenu: true, // 隐藏子菜单
       icon: 'authorization',
     },
     children: [
       {
         path: '', // 二级菜单路径设为空
         name: 'Workplace',
         component: () => import('@/views/dashboard/workplace/index.vue'),
         meta: {
           locale: 'menu.dashboard.workplace',
           requiresAuth: true,
           roles: ['*'],
           activeMenu: 'authenticationManagement', // 表示如果在这个菜单会让父级菜单高亮显示
         },
       },
     ],
   };
   

5. 在 @/router/guard/userLoginInfo.ts 修改登录逻辑，主要是将判断token是否存在变为判断cookie是否存在

   import type { Router, LocationQueryRaw } from 'vue-router';
   import NProgress from 'nprogress'; // progress bar
   import { getCookie } from '@/utils/jsCookie';
   
   export default function setupUserLoginInfoGuard(router: Router) {
     router.beforeEach(async (to, from, next) => {
       NProgress.start();
   
       if (getCookie()) {
         next();
       } else {
         if (to.name === 'login') {
           next();
           return;
         }
         next({
           name: 'login',
           query: {
             redirect: to.name,
             ...to.query,
           } as LocationQueryRaw,
         });
       }
     });
   }
   

   由于js-cookie插件不支持ts，因此写了一个工具函数来判断cookie是否存在

   import jsCookie from 'js-cookie';
   
   const cookieKey = 'sessionid';
   export const getCookie = () => {
     return jsCookie.get(cookieKey);
   };
   export const removeCookie = () => {
     return jsCookie.remove(cookieKey);
   };
   

6. 更多问题请访问 github