vben 启动!
让我们开始学习vben admin吧,vben 启动!
项目初了解
首先,vben admin 使用了monorepo,技术栈为vue3,ts,tailwindcss3,vite,以及多UI库。项目代码规范十分严格,且有丰富的封装。
项目下载
首先,我们要先下载vue-vben-admin的源码,然后开始简单看看项目文档。 如果你跟我一样,刚开始没有过简单过一遍vben admin 文档,那么你可能会走一些弯路。
项目启动
首先,项目配置了node版本,在.node-version中,当前为22.1.0,也配置了包管理工具的版本,在package.json中, "packageManager": "pnpm@10.10.0",
所以按照要求启动项目的话,需要先使用22.1.0的node版本,然后启动corepack,corepack enable ,接着直接pnpm i,如果没有相应的pnpm版本,会提示你进行下载。下载完成后,执行pnpm dev,然后就会弹出选项,
Select the app you need to run [dev]: │ ● @vben/web-antd │ ○ @vben/web-ele │ ○ @vben/web-naive │ ○ @vben/docs │ ○ @vben/playground
前三个是不同UI库的项目,对应着目录是apps/web-antd、apps/web-ele、apps/web-naive,接着是项目文档,最后是项目演示。前三个项目中属于干净的项目模板,里面包含admin的登录,左侧和顶部菜单布局,没有权限配置。而最后一个项目演示,包含的内容比较多,如,组件使用,权限配置,菜单配置,角色管理等等。
至此,项目启动成功!
项目精简
应用精简,直接按照文档中进行操作,即可完成项目精简。
总结
node版本管理
在这个过程中,node版本控制,这个属于大家熟悉的内容了,一般使用.nvmrc 或者 .node-version来进行控制。
npm源配置
关于npm源配置,这里推荐两种,一种是安装nrm,通过nrm use taobao 来切换淘宝镜像源,另一种就是在项目根目录下添加.npmrc文件,文件中添加registry = "https://registry.npmmirror.com"。
corepack(管理包管理器的工具)
corepack是管理包管理器的工具,可以控制使用哪个包管理工具和版本。可以减少不同成员之间,包管理工具不同,版本不同导致的问题。对于多人协作来说,尤为重要,如果是单人开发,可能不了解这个工具。
关于corepack enable之后,pnpm 下载失败的问题,这个可以通过更新corepack的版本解决,由于key id不匹配,无法安装从npm分发的package manager新版本。
关于“Cannot Find Matching Keyid”或“Corepack/PNPM Not Found”的错误
当你看到这儿,祝你启动成功!
链接汇总:
- vue-vben-admin:github.com/vbenjs/vue-…
- vben admin 文档:doc.vben.pro/guide/intro…
- corepack/issues/612:github.com/nodejs/core…
- 关于“Cannot Find Matching Keyid”或“Corepack/PNPM Not Found”的错误:segmentfault.com/a/119000004…