diff --git a/.inscode b/.inscode
index 70c7853df0c162981ebd7cf119d909c807920531..9fec9576d482baaf90d2f47230ce9133cfce99d4 100644
--- a/.inscode
+++ b/.inscode
@@ -1,4 +1,5 @@
 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"
diff --git a/index.html b/index.html
index 030a6ff51bfc6f6adcc472f6d8c02db92ce947a8..5607f4eb2e3ead0ff38fd881eb2237069b76bd09 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Web开发常用工具</title>
   </head>
   <body>
     <div id="app"></div>
diff --git a/package.json b/package.json
index aa1c7deb0adb6e6aea5a1380426189ac24eee7a7..054e1ddbcbdf807a2088282abbc05c289b34a6b8 100644
--- a/package.json
+++ b/package.json
@@ -7,8 +7,10 @@
     "preview": "vite preview --port 4173"
   },
   "dependencies": {
+    "element-plus": "^2.3.12",
     "guess": "^1.0.2",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-router": "^4.2.4"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.0.1",
diff --git a/src/App.vue b/src/App.vue
index 633a5dfe4e547c48bfa93740a290ba5ba370930a..309da727542f78f8a2be82b026c3b57aa539489c 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,31 +1,38 @@
 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
+import { ref } from 'vue'
+
+const activeIndex = ref('/');
+
+const handleSelect = (key,keyPath) => {
+  console.log(key, keyPath)
+}
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div id="container">
+    <!-- 导航 -->
+    <div id="nav_box">
+      <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" :router='true'>
+        <el-menu-item index="/">UUID生成</el-menu-item>
+        <el-sub-menu index="2">
+          <template #title>加密工具</template>
+          <el-menu-item index="/about">MD5</el-menu-item>
+          <el-menu-item index="2-2">SHA256</el-menu-item>
+        </el-sub-menu>
+        <el-menu-item index="3">二维码生成</el-menu-item>
+        <el-menu-item index="4">IP查询</el-menu-item>
+        <el-menu-item index="5">DNS解析</el-menu-item>
+        <el-menu-item index="6">摩斯密码生成</el-menu-item>
+      </el-menu>
     </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+    <!-- 路由出口-功能区 -->
+    <div>
+      <router-view></router-view>
+    </div>
+  </div>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
 
 @media (min-width: 1024px) {
   header {
diff --git a/src/main.js b/src/main.js
index 90e6400b4d8ad8aba0c1caa53874eb4b81380648..bbd67a1b8a7c83684d4dc1100bb21e2f920e93c6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,25 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import { createRouter, createWebHistory } from 'vue-router'
+// 导入路由识图
+import MD5 from "./views/MD5.vue"
+import QRCode from "./views/QRCode.vue"
 
-import './assets/main.css'
+// 路由配置
+const routes = [
+  { path: '/', component: MD5 },
+  { path: '/about', component: QRCode },
+]
 
-createApp(App).mount('#app')
+// 创建路由实例
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+createApp(App)
+.use(ElementPlus)
+.use(router)
+.mount('#app')
diff --git a/src/views/MD5.vue b/src/views/MD5.vue
new file mode 100644
index 0000000000000000000000000000000000000000..091f25bc2ab4f9a1b50d5197950a849d5e0dd752
--- /dev/null
+++ b/src/views/MD5.vue
@@ -0,0 +1,5 @@
+<template>
+
+    MD5
+
+</template>
\ No newline at end of file
diff --git a/src/views/QRCode.vue b/src/views/QRCode.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9a46a5b1bd48700a40354fa1dc7c0574be7f8e2a
--- /dev/null
+++ b/src/views/QRCode.vue
@@ -0,0 +1,5 @@
+<template>
+
+    QRCode
+
+</template>
\ No newline at end of file
