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 0000000000000000000000000000000000000000..3b8344c626f1c7334b86f75bc61a48d9eac3abc7
--- /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
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 0000000000000000000000000000000000000000..1712f4b9b6edf37c559820a42c7fa1991178bebe
--- /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
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 0000000000000000000000000000000000000000..422b8c90caccd211ccf1f4c26693ec52ff34173a
--- /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
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 0000000000000000000000000000000000000000..a32ed3007f269693b7cb1c140abdf93c52e186f1
--- /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