总览：vue3项目(pc端+移动端+真实业务场景+支付功能+真实接口)

1.环境配置

用vite创建vue3：

2.路由创建：

vue-router 安装：

vue中，页面跳转是使用vue router实现的

创建路由和对应页面：

路由模式：
Hash模式：不需要刷新，直接去更新当前的一个路由
使用了 createWebHashHistory()，这意味着你的路由路径会带有 # 号创建路由和对应页面：，例如 http://localhost:5173/#/ 和 http://localhost:5173/#/login

Memory模式：不会假定自己处于浏览器环境，因此不会与URL交互，也不好自动触发初始导航，适合Node环境和SSR，用createMemoryHistory（）创建，需要在调用时手动push到初始导航，一般使用在服务端。

HTML5模式：
用 `createWebHistory()` 创建 HTML5 模式，访问一个具体路径时，一般是需要服务器先进行一个回退路由，然后由vue-router接管路由功能并跳转。

（本项目用的是hash模式）

lementPlus引入和按需加载
UI框架：
element Plus：https://element-plus.org/zh-CN
1.下载：

2.引入：

我选择了按需导入：
首先需要安装unplugin-vue-components和unplugin-duto-import

然后在vite.config.js中引入

和

然后重启一下项目： 可以直接r+回车
*每次修改配置文件后都需要重启项目*
随即可以引用按钮：

效果如图：

3.####页面layout布局
Main.vue：

效果：默认为居中

如何取消默认居中之类样式？
需要修改style.css中代码：

左侧菜单效果：
先看效果：

在main.vue中引用：

4.#####aside组件内容
1.下载less工具：

在aside.vue中添加less属性:

1. **设置 html 和 body 高度:** html 和 body 是根元素，需要先将它们的高度设置为 100%，才能让子元素继承高度。
    
2. **设置 #app 高度:** #app 是 Vue 应用挂载的根元素，也需要设置高度为 100%。
    
3. **设置 .common-layout 和 .el-container 高度:** 最后，确保 .common-layout 和 .el-container 的高度也设置为 100%，这样侧边菜单就能占满浏览器高度了
 

设置高度时，设置成100%一直无法实现：

改成100vh即可：

aside内容和treeMenu：

treeMenu组件递归实现：
子目录：

aside.vue：

数据通过父值组件通信传递到子组件中：

删除：

*alt+shift+A注释代码*
渲染左侧菜单：若菜单有子菜单则递归，否则直接渲染
没有子菜单：

有子菜单：

更新中...