diff --git a/package-lock.json.REMOVED.git-id b/package-lock.json.REMOVED.git-id
index ab81fff2..5fad0882 100644
--- a/package-lock.json.REMOVED.git-id
+++ b/package-lock.json.REMOVED.git-id
@@ -1 +1 @@
-75cce2a7e7e6a79b8b81a09d6028160238f7d647
\ No newline at end of file
+0ec40645fbaa948452267003c25548620961d85e
\ No newline at end of file
diff --git a/package.json b/package.json
index d2b7c747..42e74c29 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "d2-admin",
-  "version": "1.7.1",
+  "version": "1.7.2",
   "scripts": {
     "serve": "vue-cli-service serve --open",
     "build": "vue-cli-service build",
diff --git a/src/layout/header-aside/components/components/menu-item/index.vue b/src/layout/header-aside/components/components/menu-item/index.vue
deleted file mode 100644
index 391b32fe..00000000
--- a/src/layout/header-aside/components/components/menu-item/index.vue
+++ /dev/null
@@ -1,27 +0,0 @@
-<template>
-  <el-menu-item :index="menu.path || uniqueId">
-    <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-    <i v-if="menu.icon === undefined & !menu.iconSvg" class="fa fa-file-o"></i>
-    <d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
-    <span slot="title">{{menu.title || $t('layout.header-aside.menu-item.label-default')}}</span>
-  </el-menu-item>
-</template>
-
-<script>
-import { uniqueId } from 'lodash'
-export default {
-  name: 'd2-layout-header-aside-menu-item',
-  props: {
-    menu: {
-      type: Object,
-      required: false,
-      default: () => {}
-    }
-  },
-  data () {
-    return {
-      uniqueId: uniqueId('d2-menu-empty-')
-    }
-  }
-}
-</script>
diff --git a/src/layout/header-aside/components/components/menu-sub/index.vue b/src/layout/header-aside/components/components/menu-sub/index.vue
deleted file mode 100644
index 7cf222c2..00000000
--- a/src/layout/header-aside/components/components/menu-sub/index.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <el-submenu :index="menu.path || uniqueId">
-    <template slot="title">
-      <i v-if="menu.icon" :class="`fa fa-${menu.icon}`"></i>
-      <i v-if="menu.icon === undefined & !menu.iconSvg" class="fa fa-folder-o"></i>
-      <d2-icon-svg v-if="menu.iconSvg" :name="menu.iconSvg"/>
-      <span>{{menu.title}}</span>
-    </template>
-    <template v-for="(child, childIndex) in menu.children">
-      <d2-layout-header-aside-menu-item v-if="child.children === undefined" :menu="child" :key="childIndex"/>
-      <d2-layout-header-aside-menu-sub v-else :menu="child" :key="childIndex"/>
-    </template>
-  </el-submenu>
-</template>
-
-<script>
-import { uniqueId } from 'lodash'
-// 组件
-import d2LayoutMainMenuItem from '../menu-item'
-
-export default {
-  name: 'd2-layout-header-aside-menu-sub',
-  components: {
-    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem
-  },
-  props: {
-    menu: {
-      type: Object,
-      required: false,
-      default: () => {}
-    }
-  },
-  data () {
-    return {
-      uniqueId: uniqueId('d2-menu-empty-')
-    }
-  }
-}
-</script>
diff --git a/src/layout/header-aside/components/libs/util.menu.js b/src/layout/header-aside/components/libs/util.menu.js
new file mode 100644
index 00000000..0f7b27c3
--- /dev/null
+++ b/src/layout/header-aside/components/libs/util.menu.js
@@ -0,0 +1,34 @@
+import { uniqueId } from 'lodash'
+
+// 创建 el-menu-item
+export function elMenuItem (createElement, menu) {
+  return createElement('el-menu-item', { props: { index: menu.path || uniqueId('d2-menu-empty-') } }, [
+    ...menu.icon ? [
+      createElement('i', { attrs: { class: `fa fa-${menu.icon}` } })
+    ] : [],
+    ...menu.icon === undefined & !menu.iconSvg ? [
+      createElement('i', { attrs: { class: 'fa fa-file-o' } })
+    ] : [],
+    ...menu.iconSvg ? [
+      createElement('d2-icon-svg', { props: { name: menu.iconSvg } })
+    ] : [],
+    createElement('span', { slot: 'title' }, menu.title || this.$t('layout.header-aside.menu-item.label-default'))
+  ])
+}
+
+// 创建 el-submenu
+export function elSubmenu (createElement, menu) {
+  return createElement('el-submenu', { props: { index: menu.path || uniqueId('d2-menu-empty-') } }, [
+    ...menu.icon ? [
+      createElement('i', { slot: 'title', attrs: { class: `fa fa-${menu.icon}` } })
+    ] : [],
+    ...menu.icon === undefined & !menu.iconSvg ? [
+      createElement('i', { slot: 'title', attrs: { class: 'fa fa-file-o' } })
+    ] : [],
+    ...menu.iconSvg ? [
+      createElement('d2-icon-svg', { slot: 'title', props: { name: menu.iconSvg } })
+    ] : [],
+    createElement('span', { slot: 'title' }, menu.title || this.$t('layout.header-aside.menu-item.label-default')),
+    ...menu.children.map((child, childIndex) => (child.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, child))
+  ])
+}
diff --git a/src/layout/header-aside/components/menu-header/index.vue b/src/layout/header-aside/components/menu-header/index.js
similarity index 73%
rename from src/layout/header-aside/components/menu-header/index.vue
rename to src/layout/header-aside/components/menu-header/index.js
index 5aa47b5b..bea42497 100644
--- a/src/layout/header-aside/components/menu-header/index.vue
+++ b/src/layout/header-aside/components/menu-header/index.js
@@ -1,9 +1,8 @@
-<script>
 import { throttle } from 'lodash'
 import { mapState } from 'vuex'
 import menuMixin from '../mixin/menu'
-import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
-import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
+import { elMenuItem, elSubmenu } from '../libs/util.menu'
+
 export default {
   name: 'd2-layout-header-aside-menu-header',
   mixins: [
@@ -12,71 +11,40 @@ export default {
   render (createElement) {
     return createElement('div', {
       attrs: { flex: 'cross:center' },
-      class: {
-        'd2-theme-header-menu': true,
-        'is-scrollable': this.isScroll
-      },
+      class: { 'd2-theme-header-menu': true, 'is-scrollable': this.isScroll },
       ref: 'page'
     }, [
       createElement('div', {
-        attrs: {
-          class: 'd2-theme-header-menu__content',
-          flex: '',
-          'flex-box': '1'
-        },
+        attrs: { class: 'd2-theme-header-menu__content', flex: '', 'flex-box': '1' },
         ref: 'content'
       }, [
         createElement('div', {
-          attrs: {
-            class: 'd2-theme-header-menu__scroll',
-            'flex-box': '0'
-          },
+          attrs: { class: 'd2-theme-header-menu__scroll', 'flex-box': '0' },
           style: { transform: `translateX(${this.currentTranslateX}px)` },
           ref: 'scroll'
         }, [
           createElement('el-menu', {
-            props: {
-              mode: 'horizontal',
-              defaultActive: this.active
-            },
+            props: { mode: 'horizontal', defaultActive: this.active },
             on: { select: this.handleMenuSelect }
-          }, this.header.map(menu => {
-            if (menu.children === undefined) {
-              return createElement('d2-layout-header-aside-menu-item', { props: { menu } })
-            } else {
-              return createElement('d2-layout-header-aside-menu-sub', { props: { menu } })
-            }
-          }))
+          }, this.header.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu)))
         ])
       ]),
       ...this.isScroll ? [
         createElement('div', {
-          attrs: {
-            class: 'd2-theme-header-menu__prev',
-            flex: 'main:center cross:center',
-            'flex-box': '0'
-          },
+          attrs: { class: 'd2-theme-header-menu__prev', flex: 'main:center cross:center', 'flex-box': '0' },
           on: { click: () => this.scroll('left') }
         }, [
           createElement('i', { attrs: { class: 'el-icon-arrow-left' } })
         ]),
         createElement('div', {
-          attrs: {
-            class: 'd2-theme-header-menu__next',
-            flex: 'main:center cross:center',
-            'flex-box': '0'
-          },
+          attrs: { class: 'd2-theme-header-menu__next', flex: 'main:center cross:center', 'flex-box': '0' },
           on: { click: () => this.scroll('right') }
         }, [
           createElement('i', { attrs: { class: 'el-icon-arrow-right' } })
-        ]),
+        ])
       ] : []
     ])
   },
-  components: {
-    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
-    'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
-  },
   computed: {
     ...mapState('d2admin/menu', [
       'header'
@@ -163,4 +131,3 @@ export default {
     window.removeEventListener('load', this.checkScroll)
   }
 }
-</script>
diff --git a/src/layout/header-aside/components/menu-side/index.vue b/src/layout/header-aside/components/menu-side/index.js
similarity index 58%
rename from src/layout/header-aside/components/menu-side/index.vue
rename to src/layout/header-aside/components/menu-side/index.js
index e4173eed..649a2e50 100644
--- a/src/layout/header-aside/components/menu-side/index.vue
+++ b/src/layout/header-aside/components/menu-side/index.js
@@ -1,37 +1,27 @@
-<template>
-  <div class="d2-layout-header-aside-menu-side">
-    <el-menu
-      :collapse="asideCollapse"
-      :unique-opened="true"
-      :default-active="active"
-      ref="menu"
-      @select="handleMenuSelect">
-      <template v-for="(menu, menuIndex) in aside">
-        <d2-layout-header-aside-menu-item v-if="menu.children === undefined" :menu="menu" :key="menuIndex"/>
-        <d2-layout-header-aside-menu-sub v-else :menu="menu" :key="menuIndex"/>
-      </template>
-    </el-menu>
-    <div v-if="aside.length === 0 && !asideCollapse" class="d2-layout-header-aside-menu-empty" flex="dir:top main:center cross:center">
-      <d2-icon name="inbox"/>
-      <span>{{ $t('layout.header-aside.menu-side.empty') }}</span>
-    </div>
-  </div>
-</template>
-
-<script>
 import { mapState } from 'vuex'
 import menuMixin from '../mixin/menu'
-import d2LayoutMainMenuItem from '../components/menu-item/index.vue'
-import d2LayoutMainMenuSub from '../components/menu-sub/index.vue'
+import { elMenuItem, elSubmenu } from '../libs/util.menu'
 import BScroll from 'better-scroll'
+
 export default {
   name: 'd2-layout-header-aside-menu-side',
   mixins: [
     menuMixin
   ],
-  components: {
-    'd2-layout-header-aside-menu-item': d2LayoutMainMenuItem,
-    'd2-layout-header-aside-menu-sub': d2LayoutMainMenuSub
+  render (createElement) {
+    return createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
+      createElement('el-menu', {
+        props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.active },
+        ref: 'menu',
+        on: { select: this.handleMenuSelect }
+      }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, createElement, menu))),
+      ...this.aside.length === 0 && !this.asideCollapse ? [
+        createElement('div', { attrs: { class: 'd2-layout-header-aside-menu-empty', flex: 'dir:top main:center cross:center' } }, [
+          createElement('d2-icon', { props: { name: 'inbox' } }),
+          createElement('span', {}, this.$t('layout.header-aside.menu-side.empty'))
+        ])
+      ] : []
+    ])
   },
   data () {
     return {
@@ -96,4 +86,3 @@ export default {
     }
   }
 }
-</script>
diff --git a/yarn.lock.REMOVED.git-id b/yarn.lock.REMOVED.git-id
index 56ed964d..1663b7e9 100644
--- a/yarn.lock.REMOVED.git-id
+++ b/yarn.lock.REMOVED.git-id
@@ -1 +1 @@
-f0390fbbbea8e33d903173bd90f63bbfb8069d25
\ No newline at end of file
+53a2534f94e1fbddf5d771247686935e6f70062b
\ No newline at end of file