diff --git a/package.json b/package.json
index 2c0dae3cce175edb8d4b7dd47afc7a28fa2820fe..ec8892fe262df4f346766f33224f3fddda2ea567 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,8 @@
   },
   "dependencies": {
     "element-plus": "^v1.0.1-beta.14",
-    "vue": "^3.0.4"
+    "vue": "^3.0.4",
+    "vue-router": "^4.0.1"
   },
   "devDependencies": {
     "@vue/compiler-sfc": "^3.0.4",
diff --git a/src/App.vue b/src/App.vue
index eec35c60de6f9193d9d389df8893ce6512d66290..98240aef8109abb6b658cd4d7c5cd21106cb354e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,48 +1,3 @@
 <template>
-  <el-row>
-    <el-button>默认按钮</el-button>
-    <el-button type="primary">主要按钮</el-button>
-    <el-button type="success">成功按钮</el-button>
-    <el-button type="info">信息按钮</el-button>
-    <el-button type="warning">警告按钮</el-button>
-    <el-button type="danger">危险按钮</el-button>
-  </el-row>
-  <div class="aa">
-    22
-    <div class="bb">33</div>
-    <div class="red">44</div>
-  </div>
-  <el-color-picker v-model="color" @change="colorChange"></el-color-picker>
+  <router-view />
 </template>
-
-<script lang="ts">
-import { reactive, toRefs } from "vue";
-export default {
-  name: "App",
-  setup() {
-    const state = reactive({
-      color: "",
-    });
-    function colorChange() {
-      console.log(state.color);
-      document
-        .getElementsByTagName("body")[0]
-        .style.setProperty("--primary", state.color);
-    }
-    return {
-      colorChange,
-      ...toRefs(state),
-    };
-  },
-};
-</script>
-
-<style scoped lang="scss">
-.aa {
-  border: 1px solid red;
-  .bb {
-    color: blue;
-    display: flex;
-  }
-}
-</style>
\ No newline at end of file
diff --git a/src/main.ts b/src/main.ts
index cc61cc0f84b9e2b9b0f95b6099b613f9a4ab2c20..631b4e07f453141dd1fd7a87b4244b11589f3e83 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 
-import ElementPlus from 'element-plus';
-import 'element-plus/lib/theme-chalk/index.css';
-import '/@/theme/index.scss';
+import ElementPlus from 'element-plus'
+import 'element-plus/lib/theme-chalk/index.css'
+import '/@/theme/index.scss'
+import { locale } from 'element-plus'
 
-createApp(App).use(ElementPlus, { size: 'small' }).mount('#app')
+createApp(App).use(router).use(ElementPlus, { locale }).mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a6792ceb020206e5c1a25b18ee77b07c16746d37
--- /dev/null
+++ b/src/router/index.ts
@@ -0,0 +1,40 @@
+import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router"
+
+const staticRoutes: Array<RouteRecordRaw> = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('/@/views/layout/index.vue'),
+        redirect: '/home',
+        meta: {
+            title: '首页'
+        },
+        children: [{
+            path: '/home',
+            name: 'home',
+            component: () => import('/@/views/home/index.vue'),
+            meta: {
+                title: '首页'
+            }
+        }]
+    },
+    {
+        path: '/login',
+        name: 'login',
+        component: () => import('/@/views/login/index.vue'),
+        meta: {
+            title: '登录'
+        }
+    },
+    {
+        path: '/:pathMatch(.*)',
+        redirect: '/'
+    }
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes: staticRoutes
+})
+
+export default router
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..8c7788f56ad0409aa4d28f83ed5302a24ca266ae
--- /dev/null
+++ b/src/views/home/index.vue
@@ -0,0 +1,10 @@
+<template>
+    home
+    </template>
+    
+    <script lang="ts">
+    export default {
+      name: "home",
+    };
+    </script>
+    
\ No newline at end of file
diff --git a/src/views/layout/index.vue b/src/views/layout/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..434632dceb005513e1a89a3b4426e1341a34bd23
--- /dev/null
+++ b/src/views/layout/index.vue
@@ -0,0 +1,10 @@
+<template>
+    layout
+    <router-view></router-view>
+</template>
+  
+<script lang="ts">
+export default {
+    name: "layout",
+};
+</script>
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
new file mode 100644
index 0000000000000000000000000000000000000000..b38af0cf7ac5c9d37e3038ffd162f3c6d6727582
--- /dev/null
+++ b/src/views/login/index.vue
@@ -0,0 +1,3 @@
+<template>
+    login
+</template>