Next-generation Vben framework
Home Page: https://vben.mufei88.com/
License: MIT License
English | 简体中文
Vben3 是一个免费开源的中后台模版。使用了最新的vue3,vite4,TypeScript等主流技术开发，开箱即用的中后台前端解决方案，也可用于学习参考。
git clone https://github.com/vbenjs/vben3.git
pnpm i
pnpm dev
非常欢迎你的加入！提一个 Issue 或者提交一个 Pull Request。
详见贡献指南
Vben3 使用 MIT 协议开源
watchEffect(() => {
setTimeout(() => {
const columns = table.getColumns();
console.log('columns watch');
console.log(columns);
if (columns.length && !state.isInit) {
console.log('来init了吗');
init();
}
}, 0);
});
代码中的这个如果换成延时1秒再执行，可以获取到数据，如果0秒执行，获取不到数据
.../[email protected]/node_modules/gifsicle postinstall$ node lib/install.js
│ ⚠ spawn Unknown system error -86
│ ⚠ gifsicle pre-build test failed
│ ℹ compiling from source
│ ✖ Error: Command failed: /bin/sh -c autoreconf -ivf
│ /bin/sh: autoreconf: command not found
│ at /Users/afe1/Desktop/vben3/node_modules/.pnpm/[email protected]/node_modules/execa/index.js:231:11
│ at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
│ at async Promise.all (index 0)
└─ Failed in 167ms at /Users/afe1/Desktop/vben3/node_modules/.pnpm/[email protected]/node_modules/gifsicle
ELIFECYCLE Command failed with exit code 1.
Table组件缺少自定义行customRow的props
在此添加customRow可解决
除了导航栏模式为"顶部菜单栏模式",其他模式下鼠标移动到导航栏会报错
拉取最新代码并运行
问题描述：包裹在BasicModal中的BasicTable，开启BasicModal弹窗时报The table instance has not been obtained yet(尚未获取BasicTable实例)，应该是因为加了watch监听在还没有实例化完成BasicTable时就调用了useTable解构出的reload()方法。
问题代码
<template>
<BasicModal @register="registerModal">
<BasicTable @register="registerTable" @row-click="handleRowClick">
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
const [registerTable, { reload }] = useTable({
})
watch(() => [locateStore.customerName, locateStore.terminalCode, locateStore.userNumber], () => { reload() })
</script>The table instance has not been obtained yet. 应该如何解决这种控制台报错？(如何判断table instance已实例化完成或如何在实例化完成后才watch监听)亦或是无需考虑vben3抛出的这种错误？
const [registerTable] = useTable({
rowSelection: { type: 'checkbox' }, // 注释后，合计行数据不展示
showIndexColumn: false,
columns: columns,
showSummary: true,
summaryFunc: handleSummary,
dataSource: [orderList.value[0]],
})
pnpm run dev
Please describe the steps of the problem in detail to ensure that we can restore the correct problem
H5登录样式
希望可以使用element作为ui库，而不是ant design vue。
因为ant design vue 在实际生产中功能表现过于单一。
If the feature requests relates to a problem, please describe the problem you are trying to solve here.
What should happen? Please describe the desired behaviour.
What are the alternative solutions? Please describe what else you have considered?
2. 运行成功截图
拉取最新代码并运行
BasicTable报错
fetchSetting: {
// 传给后台的当前页字段
pageField: 'pagetNum',
// 传给后台的每页显示多少条的字段
sizeField: 'pageSize',
// 接口返回表格数据的字段
listField: 'pageRecords',
// 接口返回表格总数的字段
totalField: 'totalCount',
// 传给后台用于排序的字段
sortField: SORT_FIELD,
// 传给后台用于排序指定asc/desc的字段
orderField: ORDER_FIELD,
},
接口也是正常返回 突然就报错这个？不清楚什么原因
我的需求是把生成的文件放在根目录，而不是apps下面。配置turbo如下，没有生效，看起来是turbo有问题还是turbo本身不支持？
outputs设置如下
{
"$schema": "https://turborepo.org/schema.json",
"pipeline": {
"build": {
"outputs": ["../../dist/**"],
"dependsOn": ["^build"]
},
"clean": {
"dependsOn": ["^clean"]
},
"test": {
"dependsOn": ["^test"],
"outputs": []
},
"dev": {
"cache": false
},
"preview": {
"cache": false
}
}
}
VbenForm组件单独用的时候(<vben-form :rule="{...}">)， rules 参数无效
因为对rules 特殊处理了，只有用useForm的时候才能正确传入
当运行项目时，提示缺少依赖安装
[plugin:vite:import-analysis] Failed to resolve import "vite-plugin-mock/es/createProdMockServer" from "mock\_mock-server.ts". Does the file exist?
C:/study/vue/vben3/apps/admin/mock/_mock-server.ts:1:37
1 | import * as __vite_glob_0_0 from "./auth.ts";import * as __vite_glob_0_1 from "./demo/form.ts";import * as __vite_glob_0_2 from "./demo/table.ts";import * as __vite_glob_0_3 from "./menu.ts";import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
| ^
2 | const modules = /* #__PURE__ */ Object.assign({"./auth.ts": __vite_glob_0_0,"./demo/form.ts": __vite_glob_0_1,"./demo/table.ts": __vite_glob_0_2,"./menu.ts": __vite_glob_0_3});
3 | const mockModules = [];
at formatError (file:///C:/study/vue/vben3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41235:46)
at TransformContext.error (file:///C:/study/vue/vben3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41231:19)
at normalizeUrl (file:///C:/study/vue/vben3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39540:33)
at async TransformContext.transform (file:///C:/study/vue/vben3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:39673:47)
at async Object.transform (file:///C:/study/vue/vben3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-5e7f419b.js:41506:30)
at async loadAndTransform (file:///C:/study/vue/vben3/node_modules/.pnpm/[email protected]/node_modules/vite/dist/n如题，想问下是大佬否有这个计划呢，是否有相关的日期表
1、根据nginx配置子目录多项目部署，项目发布后静态路径没有变更配置文件中的基础路径
2、根据nginx配置子目录多项目部署，使用useECharts导致页面空白
1.使用pnpm build 打包后部署至nginx子目录 静态文件无法访问
解决方式：打包时修改package.json 为 "build": "cross-env NODE_ENV=production NODE_OPTIONS=--max-old-space-size=8192 pnpm vite build --base=/***(nginx子目录名)/",
2.使用pnpm build 打包后部署至nginx子目录 进入首页空白
解决方式：直接弃用const { setOptions } = useECharts(chartRef as Ref); 写法 参照官方写法进行或是重新封装组件
将项目打包后进行preview，登录后页面空白，控制台报错：TypeError: Cannot destructure property 'currentRoute' of 't' as it is undefined.
拉取main分支 ，可以直接复现
希望增加3级以上的路由
当前只支持二级，不知道三级路由有什么问题。
希望能增加3级路由
设置系统主题颜色\顶栏主题\菜单主题\灰色模式\色弱模式不工作
拉取最新代码并运行
翻译直接做在pinia中不生效
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'type') useMenuSetting.ts:34
at ReactiveEffect.fn (useMenuSetting.ts:34:65)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
at get value [as value] (reactivity.esm-bundler.js:1171:39)
at ReactiveEffect.fn (index.vue:19:23)
at ReactiveEffect.run (reactivity.esm-bundler.js:190:25)
at get value [as value] (reactivity.esm-bundler.js:1171:39)
at unref (reactivity.esm-bundler.js:1074:29)
at Object.get (reactivity.esm-bundler.js:1077:37)
at Proxy._sfc_render (index.vue:34:19)
at renderComponentRoot (runtime-core.esm-bundler.js:914:44)
项目配置除了主题设置外，其它配置均失效
Please describe the steps of the problem in detail to ensure that we can restore the correct problem
运行dev命令时出现异常
run failed: Invalid package dependency graph: cyclic dependency detected: @vben/stores,@vben/hooks
Uncaught SyntaxError: Unexpected reserved word
卡在加载进度条这个页面
https://element-plus.org/zh-CN/component/link.html
Describe your issue here.
If the feature requests relates to a problem, please describe the problem you are trying to solve here.
What should happen? Please describe the desired behaviour.
What are the alternative solutions? Please describe what else you have considered?
TypeError: Cannot read properties of undefined (reading 'data') at responseInterceptorsCatch
radio-group 中的 radio 点击后不会显示checked，但能正常显示focus，绑定v-model:value后也没反应
<script setup lang="ts>
import { ref } from 'vue'
import { NRadioGroup, NRadio } from 'naive-ui'
const testRadioOptions = ref([
{
label: '1',
value: '1'
},
{
label: '2',
value: '2'
}
])
const rValue = ref('1')
</script>
<template>
<div>
<n-radio-group v-model:value="rValue" name="radiogroup">
<template v-for="song in testRadioOptions" :key="`${song.value}`">
<n-radio :value="song.value" v-model:value="song.value" >
{{ song.label }}
</n-radio>
</template>
</n-radio-group>
</div>
<div>
<vben-radio-group v-model:value="rValue" name="radiogroup2" :options="testRadioOptions"/>
</div>
</template>
点击下面的2后，上面的2会check，但下面的不会check
登录无法正常获取ref
RollupError: Could not resolve "../layouts/src/page/redirect/index.vue" from "../../packages/components/index.ts"
编译报错
应该是这样：
拉取最新代码运行
清理旧代码与无效代码
代码从之前的版本重构修改，里面遗留了很多陈旧的代码，很多不再使用的代码只是简单的注释掉，还有些相同功能的代码放在多个文件中，这会给后面开发的人造成很大的困惑
代码干净整洁
createViteConfig 能否改为返回 Promise<UserConfig>
我有多个app需要通过 @originjs/vite-plugin-federation 插件来共享代码，
不同app vite的plugin配置都有差别，用现在的@config/vite/createViteConfig 方法，很难把plugin参数传进去
能否这样改：
// \configs\vite\src\index.ts
export async function createViteConfig(
command: 'build' | 'serve',
mode: string,
cwd: string,
{ preset }: { preset: PresetType },
): Promise<UserConfig> {
......
}
//vite.config.ts
export default defineConfig(async ({ command, mode }) => {
const cfg = await createViteConfig(command, mode, process.cwd(), { preset: 'naive' })
......
return cfg
})vben component 能否提供方法 access 实际 component
类似于：
<script lang="ts" setup>
import { maps } from '#/index'
const Xxx= maps.get('Xxx')
const originRef = ref(null)
defineExpose(
{
origin: originRef
}
)
</script>
<template>
<Xxx ref="originRef">
...
</Xxx>
</template>注意到您项目中剥离了用到的组件，放入了@vben/vbencomponents中
admin app中直接载入了navieui。
这是一种很好的剥离依赖的思路，但是对于组件的使用就限制死了navieui，这个其实有点得不偿失。提供一种基于driver的思路，供您参考。目前正基于这种思路调整现有模版的实现。需要的话可以提供具体实现的pr
@vben/vbencomponents作为应用引入的标准，只规范使用的方式和相关协议@vben/components-driver，用来支持组件库的插拔机制/**
* 基础Builder
*/
export abstract class BaseBuilder implements CornerstoneComponentBuilder {
public bridge: CornerstoneComponentBridge;
constructor(bridge: CornerstoneComponentBridge) {
this.bridge = bridge;
}
/**
* 获取组件Bridge
* @returns {CornerstoneComponentBridge}
*/
componentBridge(): CornerstoneComponentBridge {
return this.bridge;
}
async enableAll(): Promise<CornerstoneComponentBridge> {
await this.installAllComponetToVue(this.bridge.app);
return this.finish();
}
finish(): CornerstoneComponentBridge {
return this.bridge;
}
/**
* 注册组件
* @param entry 组件属性元组
* @returns {CornerstoneComponentBuilder}
*/
registerComponent(entry: ComponentEntry): CornerstoneComponentBuilder {
this.bridge.componentMap.set(entry.key, entry.value);
return this;
}
/**
* 安装全部组件到Vue实例中
* @param app Vue application
* @returns {Promise<void>}
*/
abstract installAllComponetToVue(app: App): Promise<void>;
/**
* @override
*/
abstract enableSwitch(app?: App): CornerstoneComponentBuilder;
}
@vben/components-driver-navieui和@vben/components-driver-antdv两个库，基于@vben/components-driver开发的插拔标准，分别依据@vben/vbencomponents的使用标准来实现对接库<script lang="ts" setup name="AntSwitch">
import { Switch } from 'ant-design-vue';
console.log('AntSwitch', Switch);
const adaptSlotName = (name: string):string => {
console.log('adaptSlotName1', name);
switch (name) {
case 'checked-icon':
return 'checkedChildren';
case 'unchecked-icon':
return 'unCheckedChildren';
default:
return name;
}
};
</script>
<template>
<Switch v-bind="$attrs">
<template v-for="item in Object.keys($slots)" #[`${adaptSlotName(item)}`]="data" :key="item">
<slot :name="item" v-bind="data || {}"></slot>
</template>
</Switch>
</template>
请清晰地描述此 Bug 的具体表现。
请描述在演示页面中复现 Bug 的详细步骤，以确保我们可以理解并定位问题。部分 Bug 如果未在 Demo 中涉及，请务必提供关键代码
目前表格，使用 sorter: true,开启表格排序。同一时刻仅能排序一个列字段。
{ title: '用户名称', dataIndex: 'name', sorter: true, width: 400, }, { title: '部门名称', dataIndex: 'orgName', sorter: true, width: 400, },
A clear and concise description of what the bug is..
Please describe the steps of the problem in detail to ensure that we can restore the correct problem
最新更新包循环依赖了
左侧菜单收缩样式出现错乱
展开菜单没有隐藏，FoldButton图标没有变化
想要还原只能重置
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.