vue-vben-admin

基于vue3,vite2,TypeScript的中后台模板快速开发项目.

最新发布版本：v2.8.0 2021/11/03

nodejs: 12/14/16

注意存放代码的目录及所有父级目录不能存在中文、韩文、日文以及空格，否则安装依赖后启动会出错。

本地开发

# 安装依赖
pnpm install

# run
pnpm serve

# build
pnpm build

# 发布预览
pnpm preview:dist

环境变量

注: 修改.env.development配置后需要重启服务。

常用设置项

  • src/settings/componentSetting.ts
  • src/settings/projectSetting.ts
  • build/config/themeConfig.ts

错误处理

// errorMessageMode=‘modal’的时候会显示modal错误弹窗，而不是消息提示，用于一些比较重要的错误
// errorMessageMode='none' 一般是调用时明确表示不希望自动弹出错误提示

API接口调用

axios封装

  • src/utils/http/axios/Axios.ts
// 目前只导出一个默认实例，接口地址对应的是环境变量中的 VITE_GLOB_API_URL 接口地址(默认为 /basic-api )
export const defHttp = createAxios();

// other api url
export const otherHttp = createAxios({
  requestOptions: {
    apiUrl: 'xxx',
  },
});

跨域处理

控制台看到的地址为 http://localhost:3100/basic-api/login ，由于 /basic-api 匹配到了设置的 VITE_PROXY，所以上方实际是请求 http://localhost:3000/login ，这样同时也解决了跨域问题。

3100为项目端口号.

没有跨域时的配置

如果没有跨域问题，可以直接忽略 VITE_PROXY 配置，直接将接口地址设置在 VITE_GLOB_API_URL

# 例如接口地址为 http://localhost:3000 则
VITE_GLOB_API_URL=http://localhost:3000

分页显示

src/settings/componentSetting.ts

    fetchSetting: {
      pageField: 'page',
      sizeField: 'pageSize',
      listField: 'results',
      totalField: 'count',
    },

调试

控制台输出


createMessage.success('click search,values:' + JSON.stringify(values));

界面定制

菜单和路由

  • src/router/routes/modules/demo.ts 菜单定义
  • src/locales/lang/zh-CN/routes/demo.ts 中文名
  • src/views/demo/index.vue 定义页面视图

登录界面左侧标题

src/locales/lang/zh-CN/sys.ts

signInTitle: 'New Title'

链接