diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..ea6e20f
--- /dev/null
+++ b/.editorconfig
@@ -0,0 +1,14 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+insert_final_newline = false
+trim_trailing_whitespace = false
diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..ee9f76f
--- /dev/null
+++ b/.env.development
@@ -0,0 +1,7 @@
+ENV = 'development'
+
+# 上下文
+VUE_APP_CONTEXT_PATH = '/'
+
+# 接口地址
+VUE_APP_BASE_API = 'http://localhost:7330'
diff --git a/.gitignore b/.gitignore
index b9a5fa8..65e6414 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@
 package-lock.json
 /public/
 /.idea/
+/dist/
diff --git a/package.json b/package.json
index efec2a6..f146115 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,9 @@
     "element-ui": "^2.15.6",
     "js-cookie": "^2.2.0",
     "nprogress": "^0.2.0",
+    "sass-loader": "^10.0.5",
+    "node-sass": "^7.0.3",
+    "normalize.css": "7.0.0",
     "vue": "^2.6.11",
     "vue-router": "^3.5.2",
     "vuex": "^3.6.2"
@@ -24,7 +27,8 @@
     "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
-    "vue-template-compiler": "^2.6.11"
+    "vue-template-compiler": "^2.6.11",
+    "path-to-regexp": "^6.2.0"
   },
   "eslintConfig": {
     "root": true,
diff --git a/src/App.vue b/src/App.vue
index 7470183..986874c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-
+    <router-view/>
   </div>
 </template>
 
@@ -13,12 +13,14 @@ export default {
 </script>
 
 <style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
+/*#app {*/
+/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
+/*  -webkit-font-smoothing: antialiased;*/
+/*  -moz-osx-font-smoothing: grayscale;*/
+/*  text-align: center;*/
+/*  color: #2c3e50;*/
+/*  height: 100%;*/
+/*  width: 100%;*/
+/*  !*margin-top: 60px;*!*/
+/*}*/
 </style>
diff --git a/src/layout/components/AppMain.vue b/src/layout/components/AppMain.vue
new file mode 100644
index 0000000..5b91be1
--- /dev/null
+++ b/src/layout/components/AppMain.vue
@@ -0,0 +1,18 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key"/>
+    </transition>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
diff --git a/src/layout/components/background/index.vue b/src/layout/components/background/index.vue
new file mode 100644
index 0000000..20d478d
--- /dev/null
+++ b/src/layout/components/background/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div id="background"></div>
+</template>
+
+<script>
+// todo 背景图组件 没写完
+export default {
+  name: "Background"
+}
+</script>
+
+<style scoped lang="scss">
+#background {
+  height: 100%;
+  width: 100%;
+}
+</style>
diff --git a/src/layout/components/footer.vue b/src/layout/components/footer.vue
new file mode 100644
index 0000000..196c888
--- /dev/null
+++ b/src/layout/components/footer.vue
@@ -0,0 +1,33 @@
+<template>
+  <div id="app-footer">
+    <a class="record-number" href="http://beian.miit.gov.cn/">粤ICP备2020098994号</a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppFooter"
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/style/layout/footer.scss";
+
+#app-footer {
+  position: absolute;
+  bottom: 20px;
+  left: 0;
+  width: 100%;
+}
+
+.record-number {
+  color: #000;
+  border-bottom: none;
+  text-decoration: none;
+}
+
+.record-number:hover {
+  border-bottom: #{$recordNumberHover} 1px solid;
+  color: #{$recordNumberHover};
+}
+</style>
diff --git a/src/layout/components/navbar/index.vue b/src/layout/components/navbar/index.vue
new file mode 100644
index 0000000..23913b5
--- /dev/null
+++ b/src/layout/components/navbar/index.vue
@@ -0,0 +1,131 @@
+<template>
+  <div id="navbar">
+    <el-menu
+        :default-active="activeMenu"
+        :background-color="variables.menuBg"
+        :text-color="variables.menuText"
+        :active-text-color="variables.menuActiveText"
+        :unique-opened="false"
+        :collapse-transition="false"
+        mode="horizontal"
+        :router="true"
+        :style="menuStyle"
+    >
+      <el-col :xs="menuItemSize.xs" :sm="menuItemSize.sm" :md="menuItemSize.md" :lg="menuItemSize.lg"
+              :xl="menuItemSize.xl"
+              v-for="(route, i) in routes" :key="i">
+        <el-menu-item v-if="route.children.length === 1" :index="to(route.children[0])">
+          {{ title(route.children[0]) }}
+        </el-menu-item>
+        <el-submenu v-else-if="route.children.length > 1" :index="route.path">
+          <template slot="title">{{ route.meta.title || title(route.children[0]) }}</template>
+          <el-menu-item v-for="(child) in route.children" :key="child.path" :index="to(child)">
+            {{ child.meta.title }}
+          </el-menu-item>
+        </el-submenu>
+      </el-col>
+    </el-menu>
+  </div>
+</template>
+
+<script>
+import variables from '@/style/layout/variables.scss'
+import {mapGetters} from "vuex";
+
+export default {
+  name: "Navbar",
+  components: {},
+  data() {
+    return {
+      screenWidth: document.body.clientWidth
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'routes'
+    ]),
+    menuItemSize() {
+      return {
+        xs: 6,
+        sm: 5,
+        md: 4,
+        lg: 3,
+        xl: 1
+      }
+    },
+    menuStyle() {
+      if (this.screenWidth >= 600) {
+        return {
+          paddingLeft: '15%',
+          paddingRight: '15%'
+        }
+      } else {
+        return {}
+      }
+    },
+    activeMenu() {
+      const route = this.$route
+      const {meta, path} = route
+      // if set path, the sidebar will highlight the path you set
+      if (meta.activeMenu) {
+        return meta.activeMenu
+      }
+      return path
+    },
+    variables() {
+      return variables
+    },
+  },
+  mounted() {
+    window.onresize = () => {
+      this.screenWidth = document.body.clientWidth
+    }
+    // console.log('routes -> ', this.routes)
+  },
+  watch: {
+    screenWidth(newValue) {
+      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
+      if (!this.timer) {
+        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
+        this.screenWidth = newValue;
+        this.timer = true;
+        setTimeout(() => {
+          //console.log(this.screenWidth);
+          this.timer = false;
+        }, 400);
+      }
+    }
+  },
+  methods: {
+    title(route) {
+      return route.meta.title
+    },
+    to(route) {
+      return route.path
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+@import "~@/style/layout/variables.scss";
+
+#navbar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 9;
+}
+
+.is-active {
+  border-bottom: #{$subMenuActiveText} 3px solid;
+}
+
+.el-menu-item {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+</style>
diff --git a/src/layout/index.vue b/src/layout/index.vue
new file mode 100644
index 0000000..424c925
--- /dev/null
+++ b/src/layout/index.vue
@@ -0,0 +1,41 @@
+<template>
+  <div id="layout">
+    <el-container>
+      <el-header>
+        <navbar/>
+      </el-header>
+      <el-main>
+        <el-scrollbar>
+          <app-main/>
+        </el-scrollbar>
+      </el-main>
+      <el-footer>
+        <app-footer/>
+      </el-footer>
+    </el-container>
+  </div>
+</template>
+
+<script>
+import AppMain from "@/layout/components/AppMain";
+import Navbar from "@/layout/components/navbar";
+import AppFooter from "@/layout/components/footer";
+
+export default {
+  name: "Layout",
+  components: {Navbar, AppMain, AppFooter}
+}
+</script>
+
+<style scoped lang="scss">
+#layout {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+el-container {
+  height: 100%;
+  padding-top: 0;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index a64b5ac..25d81ea 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,12 +1,17 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from "@/store";
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
+import router from './router'
+import '@/style/index.scss' // 全局样式
+import '@/router/beforce'
 
-Vue.config.productionTip = false
-
+Vue.use(ElementUI)
 
 new Vue({
-    el: '#app',
-    render: h => h(App),
-    store
-}).$mount('#app')
+  el: '#app',
+  render: h => h(App),
+  router,
+  store
+})
diff --git a/src/router/beforce.js b/src/router/beforce.js
new file mode 100644
index 0000000..a26526e
--- /dev/null
+++ b/src/router/beforce.js
@@ -0,0 +1,19 @@
+import router from './index'
+import NProgress from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
+import getPageTitle from '@/utils/get-page-title'
+
+
+router.beforeEach(async (to, from, next) => {
+  // start progress bar
+  NProgress.start()
+
+  // set page title
+  document.title = getPageTitle(to.meta.title)
+  next()
+})
+
+router.afterEach(() => {
+  // finish progress bar
+  NProgress.done()
+})
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..7e6f6cd
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,73 @@
+import Vue from "vue";
+import VueRouter from "vue-router";
+import Layout from "@/layout";
+
+Vue.use(VueRouter)
+
+export const routes = [
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: '/',
+      name: 'Home',
+      component: () => import('@/views/home/index'),
+      meta: {title: '首页', icon: 'dashboard'}
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: '/soui',
+      name: 'SoUI',
+      component: () => import('@/views/soui/index'),
+      meta: {title: 'SoUI', icon: 'dashboard'}
+    }]
+  },
+  {
+    path: '',
+    component: Layout,
+    children: [{
+      path: '/demo',
+      name: 'SoDemo',
+      component: () => import('@/views/sodemo/index'),
+      meta: {title: '灵魂演示', icon: 'dashboard'}
+    }]
+  },
+  // {
+  //   path: '',
+  //   component: Layout,
+  //   meta: {title: '多菜单测试', icon: 'dashboard'},
+  //   children: [{
+  //     path: '/a',
+  //     name: 'a',
+  //     component: () => import('@/views/sodemo/index'),
+  //     meta: {title: '菜单1', icon: 'dashboard'}
+  //   },{
+  //     path: '/b',
+  //     name: 'b',
+  //     component: () => import('@/views/sodemo/index'),
+  //     meta: {title: '菜单2', icon: 'dashboard'}
+  //   }]
+  // },
+]
+
+const createRouter = () => new VueRouter({
+  base: process.env.VUE_APP_CONTEXT_PATH || '/',
+  mode: 'history', // require service support
+  scrollBehavior: () => ({y: 0}),
+  routes: routes
+})
+
+const router = createRouter()
+
+// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
+export function resetRouter() {
+  const newRouter = createRouter()
+  router.matcher = newRouter.matcher // reset router
+}
+
+export default router
+
+
diff --git a/src/settings.js b/src/settings.js
new file mode 100644
index 0000000..a4cb981
--- /dev/null
+++ b/src/settings.js
@@ -0,0 +1,8 @@
+module.exports = {
+
+  title: 'soul2',
+
+  // 启动时自动打开url
+  autoOpenBrowser: false
+
+}
diff --git a/src/store/getters.js b/src/store/getters.js
index 1bde25e..01c12b8 100644
--- a/src/store/getters.js
+++ b/src/store/getters.js
@@ -1,5 +1,5 @@
 const getters = {
-    routes: state => state.routes
+  routes: state => state.menu.routes
 }
 
 export default getters
diff --git a/src/store/index.js b/src/store/index.js
index aaabb2f..10a1375 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,12 +1,15 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import getters from "@/store/getters";
+import menu from "@/store/modules/menu"
 
 Vue.use(Vuex)
 
 const store = new Vuex.Store({
-    modules: {},
-    getters
+  modules: {
+    menu
+  },
+  getters
 })
 
 export default store
diff --git a/src/store/modules/menu.js b/src/store/modules/menu.js
new file mode 100644
index 0000000..44cdc49
--- /dev/null
+++ b/src/store/modules/menu.js
@@ -0,0 +1,16 @@
+import {routes} from '@/router'
+
+const state = {
+  routes
+}
+
+const mutations = {}
+
+const actions = {}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+}
diff --git a/src/style/index.scss b/src/style/index.scss
new file mode 100644
index 0000000..8a51b70
--- /dev/null
+++ b/src/style/index.scss
@@ -0,0 +1,80 @@
+@import "./transition.scss";
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+  Microsoft YaHei, Arial, sans-serif;
+  box-sizing: border-box;
+  margin: 0;
+}
+
+html {
+  height: 100%;
+  box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+// main-container global css
+.app-container {
+  position: relative;
+  padding: 20px;
+}
+
+// table-operate-container global css
+.table-operate-container {
+  margin-top: 20px;
+}
+
+// table-container global css
+.table-container {
+  margin-top: 20px;
+}
+
+// webkit内核滚动条优化（Chrome 和 Safari 浏览器）
+*:hover::-webkit-scrollbar {
+  display: block;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  /*滚动条整体样式*/
+  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
+  height: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  /*滚动条里面小方块*/
+  border-radius: 8px;
+  background-color: rgba(144, 147, 153, 0.5);
+  -webkit-transition: 0.3s background-color;
+  transition: 0.3s background-color;
+}
+
+::-webkit-scrollbar-track {
+  /*滚动条里面轨道*/
+  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
+  border-radius: 6px;
+  background-color: rgba(144,147,153,.3); */
+}
+
+/* 火狐美化滚动条 */
+* {
+
+  scrollbar-color: #c8d2e0 #f3f4f9;
+  /* 滑块颜色  滚动条背景颜色 */
+  scrollbar-width: thin;
+  /* 滚动条宽度有三种：thin、auto、none */
+}
diff --git a/src/style/layout/footer.scss b/src/style/layout/footer.scss
new file mode 100644
index 0000000..ee36940
--- /dev/null
+++ b/src/style/layout/footer.scss
@@ -0,0 +1,3 @@
+//color
+//备案号
+$recordNumberHover: #b79500
diff --git a/src/style/layout/variables.scss b/src/style/layout/variables.scss
new file mode 100644
index 0000000..9c495e2
--- /dev/null
+++ b/src/style/layout/variables.scss
@@ -0,0 +1,23 @@
+// navbar
+$menuText: #fff;
+$menuActiveText: #ffd04b;
+$subMenuActiveText: #ffd04b;
+
+$menuBg: #545c64;
+$menuHover: #ffd04b;
+
+$subMenuBg: #545c64;
+$subMenuHover: #ffd04b;
+
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  menuText: $menuText;
+  menuActiveText: $menuActiveText;
+  subMenuActiveText: $subMenuActiveText;
+  menuBg: $menuBg;
+  menuHover: $menuHover;
+  subMenuBg: $subMenuBg;
+  subMenuHover: $subMenuHover;
+}
diff --git a/src/style/transition.scss b/src/style/transition.scss
new file mode 100644
index 0000000..4cb27cc
--- /dev/null
+++ b/src/style/transition.scss
@@ -0,0 +1,48 @@
+// global transition css
+
+/* fade */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.28s;
+}
+
+.fade-enter,
+.fade-leave-active {
+  opacity: 0;
+}
+
+/* fade-transform */
+.fade-transform-leave-active,
+.fade-transform-enter-active {
+  transition: all .5s;
+}
+
+.fade-transform-enter {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.fade-transform-leave-to {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+/* breadcrumb transition */
+.breadcrumb-enter-active,
+.breadcrumb-leave-active {
+  transition: all .5s;
+}
+
+.breadcrumb-enter,
+.breadcrumb-leave-active {
+  opacity: 0;
+  transform: translateX(20px);
+}
+
+.breadcrumb-move {
+  transition: all .5s;
+}
+
+.breadcrumb-leave-active {
+  position: absolute;
+}
diff --git a/src/utils/get-page-title.js b/src/utils/get-page-title.js
new file mode 100644
index 0000000..a6de99d
--- /dev/null
+++ b/src/utils/get-page-title.js
@@ -0,0 +1,10 @@
+import defaultSettings from '@/settings'
+
+const title = defaultSettings.title || 'Vue Admin Template'
+
+export default function getPageTitle(pageTitle) {
+  if (pageTitle) {
+    return `${pageTitle} - ${title}`
+  }
+  return `${title}`
+}
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000..e905615
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,17 @@
+<template>
+  <div>
+    这是一个首页 <br>
+    如你所见，它现在还什么都没有，但马上就会有了。 <br>
+    By Soul2
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Home"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/sodemo/index.vue b/src/views/sodemo/index.vue
new file mode 100644
index 0000000..8b043ec
--- /dev/null
+++ b/src/views/sodemo/index.vue
@@ -0,0 +1,19 @@
+<template>
+  <div id="so-demo">
+    灵魂演示 <br>
+    这是一套你不能错过的魔兽地图编辑器入门教程。 <br>
+    灵魂演示是灵魂所制作的一套强大的魔兽地图编辑器系统演示地图，涵盖了许多新手入门所关注和需要的内容。 <br>
+    你可以选择点击这里一次性下载所有演示地图，也可以通过点击下方各个按钮以你希望的方式下载你所需要的特定演示地图。 <br>
+    提醒：灵魂演示地图基于 YDWE 1.27.5 制作，请使用 YDWE 1.27.5 或以上的版本打开灵魂演示地图，否则可能会导致 WE兼容性错误 。 <br>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SoDemo"
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/soui/index.vue b/src/views/soui/index.vue
new file mode 100644
index 0000000..c1bb98c
--- /dev/null
+++ b/src/views/soui/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div id="soui">
+    So UI <br>
+    这是一个魔兽争霸3地图编辑器的功能扩展包. <br>
+    <div class="readme">
+      <div class="title">
+        关于SoUI
+      </div>
+      <ul>
+        <li>这是一个基于YDWEv1.31.8(+网易DzAPI 1.2.9a)打包的魔兽争霸3地图编辑器扩展包.</li>
+        <li>该扩展包添加了一些减少重复劳动的编辑器额外动作UI.</li>
+        <li>扩展包部分内容仍处于测试阶段,其功能可能存有未知BUG.</li>
+        <li>已提供部分额外功能的演示地图,安装后可以在安装目录\example(演示地图)\SoUI文件夹内找到.</li>
+        <li>未经本人许可擅自将SoUI在网上散播者将承担盗版乱传的相关法律责任,并且传播者将承担所有使用者使用本UI带来的所有负面后果,本人不承担任何责任.</li>
+        <li>发现任何BUG可以<a href="" id="ret">点击这里</a>进行反馈</li>
+        <li>
+          SoUI仅对编辑器功能进行扩展,不涉及编辑器原有功能的修改.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SoUi"
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/vue.config.js b/vue.config.js
new file mode 100644
index 0000000..15d6b03
--- /dev/null
+++ b/vue.config.js
@@ -0,0 +1,46 @@
+'use strict'
+const path = require('path')
+const defaultSettings = require('./src/settings.js')
+
+function resolve(dir) {
+  return path.join(__dirname, dir)
+}
+
+const name = defaultSettings.title || '未命名标题'
+const autoOpenBrowser = defaultSettings.autoOpenBrowser || false
+const port = process.env.port || process.env.npm_config_port || 6810 // dev port
+
+module.exports = {
+  /**
+   * You will need to set publicPath if you plan to deploy your site under a sub path,
+   * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
+   * then publicPath should be set to "/bar/".
+   * In most cases please use '/' !!!
+   * Detail: https://cli.vuejs.org/config/#publicpath
+   */
+  publicPath: process.env.VUE_APP_CONTEXT_PATH || '/',
+  outputDir: 'dist',
+  assetsDir: 'static',
+  lintOnSave: process.env.NODE_ENV === 'development',
+  productionSourceMap: false,
+  devServer: {
+    // disableHostCheck: true,
+    port: port,
+    open: autoOpenBrowser,
+    overlay: {
+      warnings: false,
+      errors: true
+    }
+    // before: require('./mock/mock-server.js')
+  },
+  configureWebpack: {
+    // provide the app's title in webpack's name field, so that
+    // it can be accessed in index.html to inject the correct title.
+    name: name,
+    resolve: {
+      alias: {
+        '@': resolve('src')
+      }
+    }
+  },
+}