信息

nodejs 版本

16.16.0

(推荐使用 v16 以上)

包管理器及其版本

pnpm : 7.8.0

(推荐使用 pnpm)

系统

MacOS Monterey 12.5

(该项目开发环境系统为 win11)

bug

描述

项目中引入element-pius，build打包之后发现组件没有编译；另外项目中没有components文件夹，新建src/components，发现组件也没有经过编译；

预期结果

期望能正常编译。下面是本地Dev的时候，是正常的，期望build之后和Dev一致

最小测试仓库

我是用你本项目作为模板直接，pnpm add element-plus 之后跑的

请问i18n怎么支持？

信息

使用default.vue布局没问题，当我添加登录页面时需用新的布局，但是新定义的custom.vue页面不生效，还是用的default。

信息

在 layout/default.vue 中已经嵌入routerView，在page下的home/index.vue 文件中再次配置routerView 并使用vant tab组件配置to属性，此时点击就跳转到 /home/focus 路径下, 但是会丢失 /home 页面上的 tab标签栏，大佬，您知道怎么处理嘛？

nodejs 版本: 18.12.1

包管理器及其版本 : npm

系统: macos-12.6

代码是最新main分支，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/vite
npm ERR!   dev vite@"^4.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vite@"^3.0.0" from @vitejs/[email protected]
npm ERR! node_modules/@vitejs/plugin-vue
npm ERR!   dev @vitejs/plugin-vue@"^3.2.0" 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 /Users/test1/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/test1/.npm/_logs/2022-12-29T02_37_09_121Z-debug-0.log

希望能解决。万分感谢

首先感谢您！因为跟着您分享的框架学习了好多！最近发现了一个问题，不知道别人是否也遇到了！开发环境下，webview是打不开的！只有build后发布到服务器后才能显示在webview中，当然，开发环境下浏览器是可以正常打开的！求指导！谢谢

信息

nodejs 版本

TODO

(推荐使用 v16 以上)

包管理器及其版本

TODO

(推荐使用 pnpm)

系统

TODO

(该项目开发环境系统为 win11)

bug

描述

TODO

预期结果

TODO

最小测试仓库

TODO

icon 自動按需加載，能否優化，自動按需動態加載？
例如：<i-mdi:{var} /> ??

本项目是基于文件路由的。
那么如果某些路由需要携带重要的 meta 信息（权限），标准做法是什么？
是 vite-plugin-pages插件的 extendRoute ？
还是重写路由文件？

https://github.com/iyuangang/tov-template
演示代码在如上链接，naive ui 暗黑模式的切换与tov template 是分离的，如果弃用tov template 的切换效果，后续跟进升级可能改动会比较大。
请问大佬如何使两个模式匹配，不影响后续同步tov template 升级。

信息

nodejs 版本

16.13.1

包管理器及其版本

pnpm

系统

macOS

bug

描述

使用目前最新的代码，然后执行 pnpm install element-plus 安装 element-plus，使用 v-loading 指令，会报错：

[plugin:vite:import-analysis] Failed to resolve import "element-plus/es/components/loading-directive/style/css" from "src/pages/Index.vue". Does the file exist?

预期结果

v-loading 功能正常运行

最小测试仓库

目前最新版执行 pnpm install element-plus 后，在任意元素上增加 v-loading="true" 即可复现

信息

nodejs 版本

v16.14.2

(推荐使用 v16 以上)

包管理器及其版本

pnpm

(推荐使用 pnpm)

系统

mac

(该项目开发环境系统为 win11)

bug

描述

pnpm build 错误

预期结果

解决打包问题

最小测试仓库

TODO

请问在这个框架里常见的路由守护有没有例子？

api请求的错误封装，一般api请求错误处理怎么弄比较好，可否给个例子？

传统vue项目入口都在src目录下，一旦搭配后端同时开发，你会发现src下可能要嵌套三四级目录才能找到组件。
Nuxt3干掉了src，大胆的把里面的组件、页面、布局放在第一级目录里，实际上大有好处，tov-template是个很前沿的项目，可以考虑干掉src

自动导入自定义插件失效，在自己的项目中没有生成，用了模板项目“tov-template”，删除auto-import.d.ts后重新启动项目，会重新生成该文件，但是文件中无引入的自定义api

我自己弄错了

现有的例子多语言文件比较简单，实际翻译文件应该是多层嵌套的，如果可以能否进一步举例子？

代码提示问题应该怎么解决呀。只能用ui 的 vscode插件来解决吗？

信息

nodejs 版本

TODO

(推荐使用 v16 以上)

包管理器及其版本

TODO

(推荐使用 pnpm)

系统

win10

(该项目开发环境系统为 win11)

bug

描述

TODO

预期结果

TODO

最小测试仓库

TODO

我想通过h()来渲染图标，如果像这样

import CarbonAlignBoxMiddleCenter from '~icons/carbon/align-box-middle-center'

直接导入是可以生效的，但是编辑器会报错，实际运行没问题。

编辑器错误显示为找不到模块“~icons/carbon/align-box-middle-center”或其相应的类型声明
那有没有优雅一点的方法导入😫

具体代码类似像这样：

import CarbonAlignBoxMiddleCenter from '~icons/carbon/align-box-middle-center'

const renderIcon = (icon: Component) => {
	return () => h(NIcon, null, { default: () => h(icon) })
}

···
return renderIcon(CarbonAlignBoxMiddleCenter)

能不能做到像这种格式的导入且不报错

import {CarbonAlignBoxMiddleCenter as CA} from '~icons/carbon'

回顾

数据由 Gitee + Github 提供 🤗

tov-template 从 2022/1/8 日起开源至今 2023/1/10

已获得

• 181 + 431 Star
• 72 + 115 Fork

已处理

• 2 PR
• 21 + 39 Issues

在这里由衷感谢每个 关注，使用 甚至 贡献 该项目的靓仔和靓女们 🥰

问题

虽然 tov-template 目前已经具备足够多的 特性 👇

1. Vite 的
2. Vue3 的
3. 文件路由
4. 布局系统
5. Mock 支持
6. Api 自动引入
7. 组件自动引入
8. 图标自动引入
9. VueUse 支持
10. TypeScript 的
11. Windi CSS 的
12. 暗黑模式支持
13. SWR 请求支持
14. pinia 状态管理
15. pnpm 包管理器
16. 跳转进度条支持
17. Inspect 调试支持
18. 插件自动加载支持
19. Vitest 单元测试支持
20. 支持 Markdown 渲染
21. 路径别名 ~ 支持
22. 命令行自动创建与删除
23. i18n 国际化支持
24. 漂亮的 404 页 支持
25. tsx 支持
26. gzip 资源压缩支持
27. 环境变量配置支持
28. 统一的代码规范与风格支持
29. 生产环境自动移除开发日志
30. defineOptions 支持

除此之外，预设 内部也做了很多优化，为我们带来了好的 DX (开发体验)

但是这些也为项目引入了一些新的问题 👇

1. 越来越多的配置文件，让人眼花缭乱 😵
2. 越来越多的 vite 插件，让项目开发和编译卡顿 😢

而这一切的问题都来源于新的功能不断加入 😅

但大多数情况下，我们其实并不需要全部的功能才能满足业务需求 🤔

方案

基于上述问题，我们也许可以采用 按需的方式，只为项目加入自己需要的功能。

prepare

在 node 项目当中，我们拿到项目的第一步就是执行 npm install 执行项目依赖。

其实在安装完依赖之后，会执行 package.json里的 prepare 命令钩子。

例如在 package.json 中设置 👇

{
	"scripts": {
		"prepare": "node foo.js"
	}
}

并创建 foo.js 👇

console.log(1)

执行 npm install 后，将输出 1

由比如在 nuxt3 中，我们会设置 prepare 命令钩子在安装依赖后自动生成类型声明文件 👇

{
	"scripts": {
		"prepare": "nuxi prepare"
	}
}

通过这样的机制，我们就可以将现有的项目功能按需生成 🥰

这在 yarn 和 pnpm 中也是通用的

break

在现有项目中，我们在更新时会保持原有功能的使用不变，但这一定程度上阻碍了我们引入更好的方案。

在新的版本中，一切都是按需生成的，所以新方案的引入会更加的顺畅自然。

unified

在现有项目中，我们可能会在运行时中引入通用的功能，例如动态修改 title，进度条等。

它们被零散地分布在各个文件，一方面这使得功能的分享变得复杂，一方面让维护变得困难。

所以在新的版本中，也许我们会有更规范的 modules 或者 plugins 机制统一地管理它们。

less

pnpm

在现有项目中，我们支持了 npm，yarn 和 pnpm。

各个包管理器存在不一样的差异，这使得功能的测试和维护变得繁杂且困难。

而且由于项目环境基于 pnpm，我们很难保证在 npm 和 yarn 使用过程中出现我们未测试到的 bug。

所以为了对齐彼此的开发环境也为了让项目的维护变得简单，在新的版本中我们将有且仅支持 pnpm。

config

在现有项目中，存在着非常非常多的配置文件。

这些配置文件对应着不同功能，即使这些功能并非我们所需要的，我们也不得不付出管理的成本。

即使我们 explorer.fileNesting 使得配置文件嵌套起来隐藏，但是这似乎并不算完美。

在新的版本中，我们希望我们保持尽量少的配置文件，让一切配置文件都是按需出现。

启发

该 RFC 受以下项目启发

• Vite
• Nuxt3

怎么结合ElementPlus？给个例子如何

composables按需引入失效，不会自动引入

信息

nodejs 版本

TODO

(推荐使用 v16 以上)

包管理器及其版本

TODO

(推荐使用 pnpm)

系统

TODO

(该项目开发环境系统为 win11)

bug

描述

TODO

预期结果

TODO

最小测试仓库

TODO

感谢作者的辛苦劳动，这个项目非常实用，能不能支持下electron呢，谢谢

例如当有 login 的根路由，则根路由无布局时应用默认布局，子路由跳过

信息

nodejs 版本

TODO

(推荐使用 v16 以上)

包管理器及其版本

TODO

(推荐使用 pnpm)

系统

TODO

(该项目开发环境系统为 win11)

bug

描述

TODO

预期结果

TODO

最小测试仓库

TODO

创建QQ群

信息

nodejs 版本

v16.14.1

(推荐使用 v16 以上)

包管理器及其版本

pnpm6.32.8、npm8.5.0、yarn1.22.0

(推荐使用 pnpm)

系统

win11 chrome版本【 99.0.4844.82（正式版本） （64 位）】

(该项目开发环境系统为 win11)

bug

描述

修改页面热更新后F5刷新浏览器，layout匹配错误
eg:

1. 给default Layout随便加点文案，例如加入一个 <h1>default</h1>
2. 浏览器进入notFound页面
3. 修改notFount页面中文案，例如404改为405，热更新后浏览器可见文案更新为405
4. 浏览器F5刷新页面后可以看到刚刚再default layout中新增的元素，同时你再控制台打印router的meta信息会发现layout字段的信息丢失

预期结果

layout通过meta.layout正确匹配

最小测试仓库

tov-template

手動import tsx文件，不認。去掉.tsx尾，可以正常顯示。但是無法按需自動識別導入tsx 組件。
src/componets/XXX.tsx

信息

nodejs 版本

(推荐使用 v16 以上)
v17.2.0

包管理器及其版本

pnpm

(推荐使用 pnpm)

系统

mac

(该项目开发环境系统为 win11)

bug

描述

将代码从git上拉下来，使用pnpm安装完依赖之后发现@click的类型提示错误。之前接触的其他vue3+ts项目没有出现这种提示，谷歌了没能查询到解决办法（typescript萌新）

预期结果

不使用tsignore也能够通过检查

最小测试仓库

TODO

mac-12.6
node-16.19
pnpm

这个项目是目前最好的vue脚手架，希望能一直维护下去。我的调试配置.vscode/launch.json：

{
    "configurations": [
    {
        "name": "Launch Chrome",
        "request": "launch",
        "type": "chrome",
        "url": "http://localhost:5173",
        "webRoot": "${workspaceFolder}/src"
    }
    ]
}

有的断点可以正常，有的断到其它地方了，希望能提供一个官方的，万分感谢

假设我已经使用这个模板进行了开发，但是后面模板更新了，我改如何更新呢？

现在tov是个快速启动模板，跟通常的admin项目相比只有基础配置等；缺失基本的layout和router to menu；未来有没有计划完善这个项目，做成一个基础版本的admin

hi 我该如何使用windi css 渲染naive ui的组件呢， 切换模式时组件的边框和样式切换成暗黑模式了，但组件内的文本并没有渲染，还是说我需要使用naive ui的暗黑模式？
我是个菜鸟，问的问题可能很愚蠢，希望不要介意

如上图，按钮中的文本并没有渲染

场景说明

安装ant-design-vue库后，在使用a-button组件时，因两者命名相同，会有错误

自动引入组件部分 - 代码截图

将AntDesignVueResolver放在ArcoResolver之前即可正常使用。

大部分项目只会用到一个UI库，也不会遇到重命问题，所以项目中删除或替换位置即可；
提出这个issues，以免其他人踩坑，不知道作者大佬有什么其他更好的方式解决。

代码规范是最基本的框架配置 希望能够集成

信息

nodejs 版本

Node.js: 16.14.2

(推荐使用 v16 以上)

包管理器及其版本

pnpm 8.2.0

(推荐使用 pnpm)

系统

vscode Version: 1.77.3
OS: Windows_NT x64 10.0.19044

(该项目开发环境系统为 win11)

bug

描述

volar 报
at G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:846:9951 at Array.map (<anonymous>) at ewe (G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:846:9944) at Object.rwe (G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:846:20241) at Object.kIe (G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:7320:3900) at Object.resolveConfig (G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:7324:8994) at Object.d [as getLanguageService] (G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:510:1933) at G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:510:32874 at Generator.next (<anonymous>) at a (G:\Scoop\persist\vscode\data\extensions\vue.volar-1.2.0-win32-x64\dist\node\server.js:510:24057) [Error - 10:05:46] The Vue Semantic Server server crashed 5 times in the last 3 minutes. The server will not be restarted. See the output for more information.
错误，我使用vitess就不会出现这个错误。请问老师您是怎么配置的。

预期结果

TODO

最小测试仓库

TODO

一般管理后台框架，有个Header,Body,Footer,以及常用的菜单，是用tailwindcss来构建好，还是用ElementPlus好，大神你这边用的是啥样的，能够给个简单的例子。

假设使用你的1.0模板开发项目，但时候后续你的模板变成1.2了，改怎么更新呢？是运行命令还是直接覆盖某些文件就可以了？

assets.zip

信息

nodejs 版本

TODO

(推荐使用 v16 以上)

包管理器及其版本

TODO

(推荐使用 pnpm)

系统

TODO

(该项目开发环境系统为 win11)

bug

描述

TODO

预期结果

TODO

最小测试仓库

TODO

感觉这个框架 动态路由不太好弄呀？

牛的牛的，最近也在做一个admin模板，做了基本的插件自动加载和文件路由，直到我看到了这个项目，原来已经有插件做好了👍👍