Vue：TDesign Starter 定制改造，中后台管理系统（前端）

目前来说，TDesign Starter 和普通的业务代码一样，没法做到像 npm 包一样通过升级来达到同步新增功能或修复问题的效果，所以这里记录一下TDesign Starter的定制改造过程。

0. 源码拉取

安装最新的td-starter, 并初始化项目（完整版），然后进行定制（通过package.json查看定制版本）

npm i tdesign-starter-cli@latest -g
td-starter init

1. 定制迁移

定制迁移是将需要的模块代码迁移的自己的项目中，不需要的代码留作参考即可。

1.1. tdesign/

.editorconfig
.env
.env.development
.eslintignore
.eslintrc
.gitignore
.prettierrc.js
.stylelintignore
commitlint.config.js
globals.d.ts
index.html
jsx.d.ts
package.json
package-lock.json
shims-vue.d.ts
stylelint.config.js
tsconfig.json
vite.config.js

1.2. tdesign/public

public
--/*

1.3. tdesign/src

assets
--/*
components
--/color
--/result
--/thumbnail
config
--/*
layouts
--/*
pages
--/login
--/result
--/user
router
--/*
store
--/*
style
--/*
utils
--/*
App.vue
interface.ts
main.jsx
permission.js

2. 定制调整

定制调整是将迁移过来的部分代码根据自己的需求进行调整。

2.1 路由调整

router/modules/base.ts - 删除

index.js 调整部分代码，如下：

// 这里删除了...baseRouters，注意导入也应该一并删除
export const asyncRouterList = [...componentsRouters, ...othersRouters];
const defaultRouterList = [
  {
    path: '/login',
    name: 'login',
    component: () => import('@/pages/login/index.vue'),
  },
  {
    path: '*',
    // 这里改成跳转到结果页, /store/modules/tab-router.ts的homeRoute也可以跟着调整
    redirect: '/result/success',
  },
  ...asyncRouterList,
];

component.ts 删除除了结果页之外的路由配置（因为页面已经删除了）

2.2 页面调整

/pages/user/index.vue 页面中删除service的导入，即下面的代码：

import { USER_INFO_LIST, TEAM_MEMBERS, PRODUCT_LIST } from '@/service/service-user';

并且将data中的数据设置为空数组，主要是下面这个三个：

data() {
  return {
    USER_INFO_LIST: [],
    TEAM_MEMBERS: [],
    PRODUCT_LIST: [],
  };
},

2.3. 定制request

/utils/request.ts调整，根据自己的需求调整，不一定通用！！

CODE定义不需要，可以删除，或者调整为自定义的CODE

const CODE = {
  LOGIN_TIMEOUT: 1000,
  REQUEST_SUCCESS: 0,
  REQUEST_FOBID: 1001,
};

安装qs，配置axios转化请求参数：

npm i qs --save

axios配置调整，调整为使用form表单请求：

import qs from 'qs'
 
const instance = axios.create({
  baseURL: API_HOST,
  timeout: 6000,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
    'X-Requested-With': 'XMLHttpRequest'
  },
  transformRequest: [
    function (data) {
      return qs.stringify(data, { indices: false })
    }
  ]
});

调整response返回，并且返回code=-1时，跳转到登录页面

import store from '@/store';
 
instance.interceptors.response.use(
  (response) => {
    if (response.status === 200) {
      const { data } = response;
      if (!data.success && data.code === -1) {
        const hash = window.location.hash
        if (!hash.startsWith('#/login')) {
          store.dispatch('user/logout');
        }
      }
      return data
    }
  },
  ...
}

2.4. 定制service

可以根据自己的需要定制service-base统一处理GET、POST请求

2.5. 定制store

/store/modules/user.ts 中的登录和获取用户信息的action需要进行调整

import axiosInstance from '@/utils/request';
 
// 登录改为请求接口：
async login({ commit }, userInfo) {
  return axiosInstance.post('/login', {
    username: userInfo.account,
    password: userInfo.password
  }).then(res => {
    if (res.success) {
      // string
      commit('setToken', res.data);
    }
    return res
  })
},
 
// 获取用户信息也改为请求接口：
async getUserInfo({ commit }) {
  await axiosInstance.get('/admin/userInfo').then(res => {
    if (res.success) {
      // {name: '', roles: []}
      commit('setUserInfo', res.data);
    }
  })
},

2.6. 其他调整

可以根据需要隐藏头部的GitHub链接、帮助文档链接等

/layouts/components/Header.vue

如果不需要keep-alive可以移除（之前遇到遇到过页面无法刷新的问题）

/layouts/components/Content.vue

release打包后的请求地址可以通过src/config/host.ts中的release节点配置

3. 开发文档

开发文档：https://tdesign.tencent.com/starter/docs/vue/develop

修改记录：https://github.com/Tencent/tdesign-vue-starter/commits/develop

发布记录：https://github.com/Tencent/tdesign-vue-starter/releases

3.1 开发配置

/src/config/host.ts 配置开发请求接口前缀

export default {
  development: {
    // 开发环境接口请求
    API: '/api',
    // 开发环境 cdn 路径
    CDN: '',
  },
}

/vite.config.js 配置路径重写

server: {
  host: '0.0.0.0',
  port: 3001,
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, ''),
    },
  },
},

4. 页面效果

登录页：

结果页：