From 9b6ba7d475e4efc6b9172abe825072b1f329e0d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B6=9B?= <1420925946@qq.com>
Date: Sun, 14 May 2023 14:22:50 +0000
Subject: [PATCH 1/4] =?UTF-8?q?add=2017=E5=88=98=E6=B6=9B/20230508-?=
=?UTF-8?q?=E8=BE=B9=E6=A1=86=E5=92=8C=E5=B8=83=E5=B1=80.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 刘涛 <1420925946@qq.com>
---
...06\345\222\214\345\270\203\345\261\200.md" | 338 ++++++++++++++++++
1 file changed, 338 insertions(+)
create mode 100644 "17\345\210\230\346\266\233/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
diff --git "a/17\345\210\230\346\266\233/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md" "b/17\345\210\230\346\266\233/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
new file mode 100644
index 0000000..3b8344c
--- /dev/null
+++ "b/17\345\210\230\346\266\233/20230508-\350\276\271\346\241\206\345\222\214\345\270\203\345\261\200.md"
@@ -0,0 +1,338 @@
+## 一、边框和布局
+### components里的文件夹MenuBar里的lndex.vue
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+### components里的文件夹MenuBar里的Menultem.vue
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+
+
+
+
+```
+
+### components里的Applcon.vue
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### HelloWorld.vue
+```html
+
+
+
+
+
+
+
+
+```
+
+### components里的Home.vue
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Main
+
+ Footer
+
+
+
+
+
+
+
+
+```
+
+### components里的SlideMenu.vue
+```html
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+ {{ subMenu.title }}
+
+
+ {{ subSubMenu.title }}
+
+
+ {{ subSubMenu.title }}
+
+
+ {{ subMenu.title }}
+
+
+
+ {{ menu.title }}
+
+
+
+
+
+
+
+
+
+```
+
+### App.vue
+```html
+
+
+
+
+```
+
+### main.js
+```js
+import { createApp } from 'vue'
+// import './style.css'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+
+
+
+const app = createApp(App)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ app.component(key, component)
+}
+app.use(ElementPlus)
+
+app.mount('#app')
+```
\ No newline at end of file
--
Gitee
From 78428bf566cb19dedf6952c7e98737069851ca8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B6=9B?= <1420925946@qq.com>
Date: Sun, 14 May 2023 14:23:32 +0000
Subject: [PATCH 2/4] =?UTF-8?q?add=2017=E5=88=98=E6=B6=9B.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 刘涛 <1420925946@qq.com>
---
.../20230509-icon\345\233\276\346\240\207.md" | 373 ++++++++++++++++++
1 file changed, 373 insertions(+)
create mode 100644 "17\345\210\230\346\266\233/20230509-icon\345\233\276\346\240\207.md"
diff --git "a/17\345\210\230\346\266\233/20230509-icon\345\233\276\346\240\207.md" "b/17\345\210\230\346\266\233/20230509-icon\345\233\276\346\240\207.md"
new file mode 100644
index 0000000..1712f4b
--- /dev/null
+++ "b/17\345\210\230\346\266\233/20230509-icon\345\233\276\346\240\207.md"
@@ -0,0 +1,373 @@
+## 一、icon图标
+### components里的文件夹MenuBar里的lndex.vue
+```html
+
+
+
+
+
+
+
+
+
+
+```
+
+### components里的文件夹MenuBar里的Menultem.vue
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+
+
+
+
+```
+
+### components里的Applcon.vue
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### HelloWorld.vue
+```html
+
+
+
+
+
+
+
+
+```
+
+### components里的Home.vue
+```html
+
+
+
+
+
+```
+
+### components里的SlideMenu.vue
+```html
+
+
+
+
+
+
+ {{ menu.title }}
+
+
+ {{ subMenu.title }}
+
+
+ {{ subSubMenu.title }}
+
+
+ {{ subSubMenu.title }}
+
+
+ {{ subMenu.title }}
+
+
+
+ {{ menu.title }}
+
+
+
+
+
+
+
+
+
+```
+
+### App.vue
+```html
+
+
+
+
+```
+
+### main.js
+```js
+import { createApp } from 'vue'
+// import './style.css'
+import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+
+
+
+const app = createApp(App)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+ app.component(key, component)
+}
+app.use(ElementPlus)
+
+app.mount('#app')
+```
\ No newline at end of file
--
Gitee
From c3fe83906026d6a46d15438bf372872b86c9c258 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B6=9B?= <1420925946@qq.com>
Date: Sun, 14 May 2023 14:24:23 +0000
Subject: [PATCH 3/4] =?UTF-8?q?add=2017=E5=88=98=E6=B6=9B/20230511-?=
=?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=95=B0=E6=8D=AE=E8=BD=AC=E6=8D=A2.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 刘涛 <1420925946@qq.com>
---
...60\346\215\256\350\275\254\346\215\242.md" | 84 +++++++++++++++++++
1 file changed, 84 insertions(+)
create mode 100644 "17\345\210\230\346\266\233/20230511-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242.md"
diff --git "a/17\345\210\230\346\266\233/20230511-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242.md" "b/17\345\210\230\346\266\233/20230511-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242.md"
new file mode 100644
index 0000000..422b8c9
--- /dev/null
+++ "b/17\345\210\230\346\266\233/20230511-\350\267\257\347\224\261\346\225\260\346\215\256\350\275\254\346\215\242.md"
@@ -0,0 +1,84 @@
+# 路由数据转换成菜单栏数据
+
+## 一.步骤
+
++ 1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+
+ + a. 将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+
+ + b. 定义一个空数组,用于存储处理好的路由
+
+ + c. 循环遍历传进的数组，处理每一个路由
+
+ + (1). 定义一个对象，存储需要的数据
+
+ + (2). 判断传传入的上级节点的路径path是否为空同时原来的路径是否为空，进行相关的处理
+
+ + (3). 判断是否有下级节点，递归调用converPath 函数,进行相关处理
+
+ + (4). 将处理好的路由插入到空的数组中
+
+ + d. 返回定义的存储变量
+
++ 2.排除一下主页面的路由，使其不会出现在菜单栏(请看下一个笔记)
+
++ 3.返回处理好的菜单栏数据
+
+```js
+// 使用计算属性，将导入的路由，转换成菜单栏数据
+const menus = computed(() => {
+ //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+ let list = converPath(routes, '')
+
+ // 2.排除一下主页面的路由，使其不会出现在菜单栏
+ let menuList=processHidden(list)
+
+ // 3.返回处理好的菜单栏数据
+ return menuList
+})
+```
+
+#
+## 二.代码
+```js
+//将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+// 暴露方法
+export function converPath(arr, parentPath) {
+ //定义一个空数组
+ let list = [];
+
+ // 处理每一个路由
+ arr.forEach(item=>{
+
+ // 定义一个对象
+ let tmp={
+ path:item.path,
+ men:item.men?item.men:{title:'标题',icon:'setting'}
+ }
+
+ // 当传入的上级节点的路径path不为空同时原来的路径也不为空时，就叠加
+ if(parentPath && tmp.path){
+ if(parentPath==='/'){
+ tmp.path=parentPath+tmp.path
+ }else{
+ tmp.path=parentPath+'/'+tmp.path
+ }
+ }
+
+ // 判断是否有下级节点，递归调用converPath 函数
+ if (item.children && item.children.length > 0) {
+ // 传入下级路由（是个数组），并且传入当前路由的路径
+ let children=converPath(item.children,item.path)
+
+ if(children.length>0){
+ tmp.children=children
+ }
+ }
+
+ //将处理好的路由插入到空的数组中
+ list.push(tmp)
+ })
+
+ return list
+}
+```
\ No newline at end of file
--
Gitee
From de776a75959d8da40777dbb50f32a98b21d0e4ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E6=B6=9B?= <1420925946@qq.com>
Date: Sun, 14 May 2023 14:25:34 +0000
Subject: [PATCH 4/4] =?UTF-8?q?add=2017=E5=88=98=E6=B6=9B/20230512-?=
=?UTF-8?q?=E6=8E=92=E9=99=A4=E4=B8=BB=E9=A1=B5=E9=9D=A2=E8=B7=AF=E7=94=B1?=
=?UTF-8?q?=E8=BD=AC=E6=8D=A2.md.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Signed-off-by: 刘涛 <1420925946@qq.com>
---
...57\347\224\261\350\275\254\346\215\242.md" | 75 +++++++++++++++++++
1 file changed, 75 insertions(+)
create mode 100644 "17\345\210\230\346\266\233/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md"
diff --git "a/17\345\210\230\346\266\233/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md" "b/17\345\210\230\346\266\233/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md"
new file mode 100644
index 0000000..a32ed30
--- /dev/null
+++ "b/17\345\210\230\346\266\233/20230512-\346\216\222\351\231\244\344\270\273\351\241\265\351\235\242\350\267\257\347\224\261\350\275\254\346\215\242.md"
@@ -0,0 +1,75 @@
+# 排除一下主页面的路由，使其不会出现在菜单栏
+
+## 步骤
+
++ 1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径(请看上个笔记)
+
++ 2.排除一下主页面的路由，使其不会出现在菜单栏
+
+ + a. 将导入的路由中的主页从菜单栏数据排除
+
+ + b. 定义一个空数组,用于存储处理好的路由
+
+ + c. 循环遍历传进的数组，处理每一个路由
+
+ + (1). 定义一个对象，存储需要的数据
+
+ + (2). 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单
+
+ + (3). 判断当path为空时,进行相关的操作
+
+ + (4). 将处理好的路由插入到空的数组中
+
+ + d. 返回定义的存储变量
+
+
++ 3.返回处理好的菜单栏数据
+
+```js
+// 使用计算属性，将导入的路由，转换成菜单栏数据
+const menus = computed(() => {
+ //1、将导入的路由数据转换一下，以使下级path带上上级path，以便组成完成的路由路径
+ let list = converPath(routes, '')
+
+ // 2.排除一下主页面的路由，使其不会出现在菜单栏
+ let menuList=processHidden(list)
+
+ // 3.返回处理好的菜单栏数据
+ return menuList
+})
+```
+
+#
+## 代码
+```js
+// 将导入的路由中的主页从菜单栏数据排除
+// 暴露方法
+export function processHidden(arr){
+ let list=[]
+
+ arr.forEach(item=>{
+ let obj=''
+
+ // 特殊处理，指当前菜单项标识隐藏的时候，则将其下级菜单项的第一个，提取为显示的菜单
+ if(item.men && item.men.hidden && item.children && item.children.length){
+ // 获取下级的第一个数据
+ let children=item.children[0]
+ // 将数据输出
+ obj=children
+ }else{
+ //
+ obj=item
+ }
+
+ // 判断当path为空时
+ if(!obj.path){
+ obj.path='/'
+ }
+
+ // 将处理后的路由赋值
+ list.push(obj)
+ })
+
+ return list
+}
+```
\ No newline at end of file
--
Gitee