vben 启动!

488 阅读2分钟

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-antdapps/web-eleapps/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新版本。

corepack/issues/612

关于“Cannot Find Matching Keyid”或“Corepack/PNPM Not Found”的错误

当你看到这儿,祝你启动成功!

链接汇总:
  1. vue-vben-admin:github.com/vbenjs/vue-…
  2. vben admin 文档:doc.vben.pro/guide/intro…
  3. corepack/issues/612:github.com/nodejs/core…
  4. 关于“Cannot Find Matching Keyid”或“Corepack/PNPM Not Found”的错误:segmentfault.com/a/119000004…