.NET6+WebApi+Vue 前后端分离后台管理系统（二）

项目搭建：

这个项目使用的开发工具是：VSCode，工具的下载和安装这里就不赘述了，自行百度吧。使用的技术主要是： Vue3、Element Plus 等，Vue 项目的搭建这里也不赘述，如果不熟悉可以参考我之前写的 vue学习笔记：环境搭建 （https://www.cnblogs.com/tanyongjun/p/16440827.html），也可以百度。

搭建项目：
npm create vite TanYongJun --template vue

引入 Element Plus

引入 Element Plus
Element Plus，由饿了么大前端团队开源出品的一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的组件库。我们使用Element Plus来搭建这个项目的界面。Element Plus 有三种引入方式:完整引入、按需导入、手动导入，这里采用按需引入。
1. 安装：npm install element-plus
2. 安装unplugin-vue-components 和 unplugin-auto-import这两款插件
npm install -D unplugin-vue-components unplugin-auto-import
3. 把下列代码插入到你的 Vite (项目是用 vite创建的)

router  

1. 安装：npm install vue-router -S
2. 路由配置：
先在 src 中新建一个 router文件夹，并在文件夹内创建 index.js 。index.js 就是路由的配置文件，它里面的内容如下：

然后在 src 中新建一个 Views文件夹,并在文件夹内创建 Main.vue 。然后新建一个 home 文件夹，并在文件夹内创建 home.vue 。Views 文件夹里面其实就是放页面组件的地方。

3. 引入
在src 文件夹下的 main.js 文件中添加：