Git Product home page Git Product logo

buqiyuan / vue3-antdv-admin Goto Github PK

View Code? Open in Web Editor NEW
3.2K 76.0 776.0 5.23 MB

基于 vite5.x + vue3.x + ant-design-vue4.x + typescript hooks 的基础后台管理系统 RBAC的权限系统, JSON Schema动态表单,动态表格,锁屏界面

Home Page: https://buqiyuan.gitee.io/vue3-antdv-admin

License: MIT License

JavaScript 4.11% HTML 0.05% TypeScript 54.68% Vue 40.49% Less 0.49% Shell 0.07% Dockerfile 0.09% CSS 0.01%
vue3 typescript vite ant-design-vue admin-template vite-vue3 tsx vite-template vite-starter-template vue-cli

vue3-antdv-admin's Introduction

vue3-antdv-admin

基于 vite5.x + vue3.x + antd-design-vue4.x + typescript5.x 的后台管理系统

安装使用

  • 获取项目代码
git clone https://github.com/buqiyuan/vue3-antdv-admin
  • 安装依赖
cd vue3-antdv-admin

pnpm install
  • 运行
pnpm dev
  • 打包
pnpm build

vscode 配置

安装项目根目录 .vscode 推荐的插件,再安装 Volar,并禁用 Vetur,重启 vscode 即可。

使用了 Vue3.x 全家桶、ant-design-vue4.x 和 typescript5.x,实践 vue3.x 的新特性以及玩法,不得不说 vue3.x 的 Composition API 相比于 vue2.x 的 Options API 灵活很多,让我们可以灵活地组合组件逻辑,我们可以很轻松的使用 hooks 的形式去代替以前 mixins 等的写法。更多 hooks 可以参考vueuse

todolist

  • 动态表格(完善中)
  • 动态表单(完善中)
  • 电商 SKU 功能演示
  • 纯前端导出 PDF 动态分页
  • 其他...

Git 贡献提交规范

  • 参考 vue 规范 (Angular)

    • feat 增加新功能
    • fix 修复问题/BUG
    • style 代码风格相关无影响运行结果的
    • perf 优化/性能提升
    • refactor 重构
    • revert 撤销修改
    • test 测试相关
    • docs 文档/注释
    • chore 依赖更新/脚手架配置修改等
    • workflow 工作流改进
    • ci 持续集成
    • types 类型定义文件更改
    • wip 开发中

更新日志

CHANGELOG

赞赏

如果你觉得这个项目对你有帮助,你可以帮作者买一杯咖啡表示支持!

微信 支付宝

感谢 JetBrains 免费的开源授权

vue3-antdv-admin's People

Contributors

buqiyuan avatar chaesv587 avatar chenerleiq avatar xiaomudk avatar yanbowe avatar zhengqbbb avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue3-antdv-admin's Issues

TypeError: Cannot read property 'upgrade' of undefined

由于获取不到 process.env.VUE_APP_API_URL1,导致 devServer 的 proxy 配置失败
解决方案:更换 target,或直接把 proxy 注释掉

  devServer: {
    proxy: {
      "/api": {
        // target: process.env.VUE_APP_API_URL1,
        target: 'http://localhost:8888',
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

启动不了

拉main的代码,然后npm i ,然后npm run serve 报错

批量删除好像有点问题

image

前端传的是多个id组成的字符串

    // 删除多项
    const deleteItems = () => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(QuestionCircleOutlined),
        content: '您确定要删除所有选中吗?',
        onOk: async () => {
          await delAdminRole(state.rowSelection.selectedRowKeys.toString())
          tableRef.value.refreshTableData()
          state.rowSelection.selectedRowKeys = []
        }
      })
    }
/**
 * 删除角色
 * @param params
 */
export function delAdminRole(id: string) {
  return http.request({
    url: [Api.adminRole, id].join('/'),
    method: RequestEnum.DELETE,
  }, {
    isShowErrorMessage: true, // 是否显示错误提示信息
    successMessageText: '删除成功'
  });
}

后端api接收的是单个id

  /**
   * @Author: 水痕
   * @Date: 2020-05-18 17:16:21
   * @LastEditors: 水痕
   * @Description: 根据角色id删除角色
   * @param {type} 
   * @return: 
   */
  async deleteById(id: number): Promise<string> {
    // 查询如果有账号的时候就不能删除
    const isExistAccount = await this.accountRoleRepository.findOne({ where: { roleId: id } });
    if (isExistAccount) {
      throw new HttpException('该角色下面有账号,不能删除,如果要删除请先解绑', HttpStatus.OK);
    }
    const { raw: { affectedRows } } = await this.roleRepository.update(id, { isDel: 1 });
    if (affectedRows) {
      return '删除成功';
    } else {
      return '删除失败';
    }
  }

效果感觉不错,但是代码细嗯。。

vue3 特性没发挥

  1. setup 函数渲染组件、空标签
setup() {
   return () => <></>
}
  1. use bus吗 可以看下 vant的实现
provide-inject
  1. typescript 没有充分发挥,偷懒 any
  2. 其中很多代码 jsx 开发效率更高,参考 @vue/babel-plugin-jsx
    ...

不多写了,加油

重构计划

想问一下重构预计在什么时间进行呢,期望回复,谢谢

yarn build error occurred

PS C:\Users\Admin\Desktop\vue3-antd-admin> yarn build
yarn run v1.22.5
$ vue-cli-service build

| Building for production...

ERROR Failed to compile with 4 errors 下午4:44:38
error in ./node_modules/ant-design-vue/es/config-provider/style/index.less

// ant-design/ant-motion#44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in C:\Users\Admin\Desktop\vue3-antd-admin\node_modules\ant-design-vue\es\style\color\bezierEasing.less (line 110, column 0)

@ ./node_modules/ant-design-vue/es/config-provider/style/index.js 1:0-22
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/App.vue?vue&type=script&lang=ts
@ ./src/App.vue?vue&type=script&lang=ts
@ ./src/App.vue
@ ./src/main.ts
@ multi ./src/main.ts

error in ./node_modules/ant-design-vue/es/alert/style/index.less

// ant-design/ant-motion#44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in C:\Users\Admin\Desktop\vue3-antd-admin\node_modules\ant-design-vue\es\style\color\bezierEasing.less (line 110, column 0)
at runMicrotasks ()

@ ./node_modules/ant-design-vue/es/alert/style/index.js 2:0-22
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/views/shared/demos/button.vue?vue&type=script&lang=ts
@ ./src/views/shared/demos/button.vue?vue&type=script&lang=ts
@ ./src/views/shared/demos/button.vue
@ ./src/router/modules/demos.ts
@ ./src/router/common.ts
@ ./src/router/index.ts
@ ./src/main.ts
@ multi ./src/main.ts

error in ./src/components/button/button.vue?vue&type=style&index=0&id=4e80b8e7&lang=less&scoped=true

// ant-design/ant-motion#44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in C:\Users\Admin\Desktop\vue3-antd-admin\node_modules\ant-design-vue\lib\style\color\bezierEasing.less (line 110, column 0)

@ ./src/components/button/button.vue?vue&type=style&index=0&id=4e80b8e7&lang=less&scoped=true 1:0-544 1:0-544
@ ./src/components/button/button.vue
@ ./src/components/button/index.ts
@ ./src/plugins/antd.ts
@ ./src/plugins/index.ts
@ ./src/main.ts
@ multi ./src/main.ts

error in ./src/layout/header/index.vue?vue&type=style&index=0&id=ac2fbb44&lang=scss&scoped=true

SassError: Undefined variable.

9 │ height: $header-height;
│ ^^^^^^^^^^^^^^

src\layout\header\index.vue 9:11 root stylesheet

@ ./src/layout/header/index.vue?vue&type=style&index=0&id=ac2fbb44&lang=scss&scoped=true 1:0-539 1:0-539
@ ./src/layout/header/index.vue
@ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader-v16/dist??ref--0-1!./src/layout/index.vue?vue&type=script&lang=ts
@ ./src/layout/index.vue?vue&type=script&lang=ts
@ ./src/layout/index.vue
@ ./src/router/index.ts
@ ./src/main.ts
@ multi ./src/main.ts

ERROR Build failed with errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

store 里面这段代码 不是很看得懂 , 能否求请求解析一下

export type UserStore<S = State> = Omit<VuexStore, 'getters' | 'commit' | 'dispatch'>
& {
commit<K extends keyof Mutations, P extends Parameters<Mutations[K]>[1]>(
key: K,
payload: P,
options?: CommitOptions
): ReturnType<Mutations[K]>;
} & {
dispatch(
key: K,
payload?: Parameters<Actions[K]>[1],
options?: DispatchOptions
): ReturnType<Actions[K]>;
} & {
getters: {
[K in keyof Getters]: ReturnType<Getters[K]>
};
};

vite版登陆时http proxy error

[vite] http proxy error:
Error: connect ECONNREFUSED 109.166.36.55:63922
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1146:16)

表格功能增强

表格功能可否增强,例如自定义列以及修改列的顺序。像ant-design-pro表格功能一样
image

项目编译有问题

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] electron:build: vue-cli-service electron:build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] electron:build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

下载新版本,运行npm install报错

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/eslint
npm ERR! dev eslint@"^7.32.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer eslint@">= 1.6.0 < 7.0.0" from @vue/[email protected]
npm ERR! node_modules/@vue/cli-plugin-eslint
npm ERR! dev @vue/cli-plugin-eslint@"^4.5.13" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Administrator\AppData\Local\npm-cache\eresolve-report.txt for a full report.

照你的写法报错了

import state from './index.vue'

export const getColumns=(state) TableColumn[] => {
这样写不对吧

useAsync

import { isReactive, isRef } from 'vue';

function setLoading(loading: any, val: boolean) {
    if (loading) {
        if (isRef(loading)) {
          loading.value = val;
        }
        if (isReactive(loading)) {
            if (isRef(loading.loading)) {
              loading.loading.value = val;
            } else {
              loading.loading = val;
            }
        }
    }
}

export async function useAsync(fn: Promise<any>, loading: any): Promise<any> {
  setLoading(loading, true);
  return await fn.finally(() => setLoading(loading, false));
}

```

标签那里有bug

关闭当前标签不行,只会关闭最后一个;也没有缓存,切回来数据都没有了

有q群之类的吗

此项目模版风格非常符合我司现在,请问作者有q群或者微信群吗

请教个问题

你好,请教个问题 ,我修改了VUE_APP_API_URL和devServer访问我的后台,报错,访问不到

大神,tabs切换 如何保存数据状态

有2个困难问题需要请教下
1.tabs切换 保留数据信息 我想了keeppalive 但是无法很好的解决
2.tree 最末一级 有办法平铺显示么
3.动态表单 能自定义一行多列扩展么

vuex

看了几次,都不太明白vuex,如何不使用命名空间直接调用的,下图这样还是在modules里面的啊。怎么做到的?
image
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.