2023年了，让我看看谁还不会用vue3，其实我也不太会。。。。

不会就学啊，别的不说，潜力无穷。下面就把我从网上找到的一个后台管理系统模板放在下面了，需要自取。

该系统模板还是不太完善，后续完善后，会更新资源。

后台管理系统模板地址：
vue3+vite+antd后台管理系统：https://download.csdn.net/download/yehaocheng520/87420798


上面菜单tab中的刷新 关闭等功能，我还没有加完，后续会补充更新资源包。

遇到的问题

1.ERESOLVE unable to resolve dependency tree

在进行npm i安装依赖时，报错内容如下：

网上找到的解决方法如下：


控制台输入npm install --legacy-peer-deps回车，就能解决这个问题了。

2.ERESOLVE unable to resolve dependency tree

在进行npm run dev运行项目时报错：

> talentadmin@0.0.0 dev
> vite

node:events:505
      throw er; // Unhandled 'error' event
      ^

Error: spawn D:\dong\wwwroot_d\vue3ViteAntd\node_modules\esbuild\esbuild.exe ENOENT
	at Process.ChildProcess._handle.onexit (node:internal/child_process:283:19)
	    at onErrorNT (node:internal/child_process:478:16)
	    at processTicksAndRejections (node:internal/process/task_queues:83:21)
Emitted 'error' event on ChildProcess instance at:
    at Process.ChildProcess._handle.onexit (node:internal/child_process:289:12)
    at onErrorNT (node:internal/child_process:478:16)
    at processTicksAndRejections (node:internal/process/task_queues:83:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn D:\\dong\\wwwroot_d\\vue3ViteAntd\\node_modules\\esbuild\\esbuild.exe',
  path: 'D:\\dong\\wwwroot_d\\vue3ViteAntd\\node_modules\\esbuild\\esbuild.exe',
  spawnargs: [ '--service=0.12.15', '--ping' ]
}

解决办法：

执行以下代码：
node node_modules/esbuild/install.js
再重新运行项目：
npm run dev

3.icon图标的使用——vue3

之前vue2版本对应的antd使用图标都是 <a-icon type="step-backward" />
vue3版本对应的antd图标是：<step-backward-outlined />

使用方法如下：

import HomeOutlined from '@ant-design/icons-vue/HomeOutlined';
export default defineComponent({
	components:{
		HomeOutlined,
	}
})

页面中使用图标组件

<home-outlined></home-outlined>

先这样吧。多多积累，多多收获。

下面为补充内容，可忽略！！！

1.1 Vite是什么？

Vite是新一代的前端构建工具，在尤雨溪开发Vue3.0的时候诞生。类似于Webpack+ Webpack-dev-server。其主要利用浏览器ESM特性导入组织代码，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。生产中利用Rollup作为打包工具，号称下一代的前端构建工具。

Vite有如下特点：
快速的冷启动: No Bundle + esbuild 预构建
即时的模块热更新: 基于ESM的HMR，同时利用浏览器缓存策略提升速度
真正的按需加载: 利用浏览器ESM支持，实现真正的按需加载

1.2 Vite和传统打包方式的对比

1.2.1 VS Webapck

Webpack是近年来使用量最大，同时社区最完善的前端打包构建工具，新出的5.x版本对构建细节进行了优化，在部分场景下打包速度提升明显。Webpack在启动时，会先构建项目模块的依赖图，如果在项目中的某个地方改动了代码，Webpack则会对相关的依赖重新打包，随着项目的增大，其打包速度也会下降。

Vite相比于Webpack而言，没有打包的过程，而是直接启动了一个开发服务器devServer。Vite劫持浏览器的HTTP请求，在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器(整个过程没有对文件进行打包编译)。所以编译速度很快。

1.2.2 VS SnowPack

Snowpack 首次提出利用浏览器原生ESM能力的打包工具，其理念就是减少或避免整个bundle的打包。默认在 dev 和 production 环境都使用 unbundle 的方式来部署应用。但是它的构建时却是交给用户自己选择，整体的打包体验显得有点支离破碎。

而 Vite 直接整合了 Rollup，为用户提供了完善、开箱即用的解决方案，并且由于这些集成，也方便扩展更多的高级功能。

两者较大的区别是在需要bundle打包的时候Vite 使用 Rollup 内置配置，而 Snowpack 通过其他插件将其委托给 Parcel/``webpack。