Vue3+vite重构通用后台

项目展示

确定版本

node 16.16.0

@vue/cli 4.5.15

 创建项目

 yarn create vite my-vue3 --template vue

安装报错，原因是yarn 的全局安装位置与 bin 目录的位置并不一致

yarn报“文件名、目录名或卷标语法不正确”错误的解决方案 - 掘金

https://www.cnblogs.com/520BigBear/p/17007606.html

yarn create vite my-vue-app --template /vue关于yarn创建vite所遇到的坑，创建vite错误_前端筱攻城狮的博客-CSDN博客

在my-vue3文件中安装依赖

yarn install

yarn dev

安装element-plus

yarn add element-plus -S

快速开始 | Element Plus

全局引入

 

volar是什么插件？Volar - vue终极开发神器！_慕课手记

 

 按需引入

 npm install -D unplugin-vue-components unplugin-auto-import

 又出错，vite.config.ts加载配置失败启动开发服务器时出错:错误:无法找到@esbuild/win32-x64包，esbuild需要这个包。

 没有就下载这个包就行，成功解决！

 注释掉全局引用的代码

 

 路由设置

vue3对应的是vue-router4，安装 | Vue Router

yarn add vue-router@4 

 引入element-plus icon图标

 

 

 vite静态资源引入