diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..7f5ec42
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,12 @@
+<script setup name="App">
+// import store from '@/store'
+// console.log(store.menuStore.menuArr)
+</script>
+
+<template>
+  <router-view v-slot="{ Component }">
+    <component :is="Component" />
+  </router-view>
+</template>
+
+<style scoped></style>
diff --git a/src/directive/index.js b/src/directive/index.js
new file mode 100644
index 0000000..8a87693
--- /dev/null
+++ b/src/directive/index.js
@@ -0,0 +1,15 @@
+import waterMarker from './waterMarker'
+const directivesList = {
+  // 这里放指令
+  waterMarker // 水印指令
+}
+const directives = {
+  install: function (app) {
+    Object.keys(directivesList).forEach(key => {
+      // 注册自定义指令
+      app.directive(key, directivesList[key])
+    })
+  }
+}
+
+export default directives
diff --git a/src/directive/waterMarker.js b/src/directive/waterMarker.js
new file mode 100644
index 0000000..1906866
--- /dev/null
+++ b/src/directive/waterMarker.js
@@ -0,0 +1,30 @@
+/**
+ * v-waterMarker可接收参数，均为非必填
+ * { text: 'vue-admin-box', font: '16px Microsoft JhengHei', textColor: '#000' }
+ */
+const directive = {
+// el: HTMLElement,绑定的父级DOM//     binding: DirectiveBinding//指令传来的参数对象
+  mounted (el, binding) {
+    binding.value ? binding.value : binding.value = {}
+    addWaterMarker(binding.value.text, el, binding.value.font, binding.value.textColor)
+  }
+}
+
+function addWaterMarker (str, parentNode, font, textColor) {
+  // 水印文字，父元素，字体，文字颜色
+  var can = document.createElement('canvas')
+  parentNode.appendChild(can)
+  can.width = 200
+  can.height = 150
+  can.style.display = 'none'
+  var cans = can.getContext('2d')
+  cans.rotate((-20 * Math.PI) / 180)
+  cans.font = font || '14px Microsoft JhengHei'
+  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)'
+  cans.textAlign = 'left'
+  cans.textBaseline = 'middle'
+  cans.fillText(str || 'vue-admin-box', can.width / 10, can.height / 2)
+  parentNode.style.backgroundImage = 'url(' + can.toDataURL('image/png') + ')'
+}
+
+export default directive
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..45e33dc
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,45 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import directives from './directive' // 指令
+import router from '@/router' // router引入
+// import 'default-passive-events'// 添加事件管理者'passive'，来阻止'touchstart'事件，让页面更加流畅。 解决chrome下的warning问题
+// 状态管理引入
+import { createPinia } from 'pinia'
+// import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+import piniaPluginPersist from 'pinia-plugin-persist'
+import { registerStore } from '@/store'
+
+import 'tailwindcss/tailwind.css'
+import ElementPlus from 'element-plus'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import 'element-plus/dist/index.css'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import '@/assets/style/common.less'
+
+import 'virtual:svg-icons-register' // 注册svg
+import svgIcon from '@/components/svgIcon/index.vue'
+import tableList from '@/components/tableList/index.vue'
+
+const instance = createApp(App)
+const pinia = createPinia() // 状态管理
+pinia.use(piniaPluginPersist)
+instance.use(pinia) // 挂载
+registerStore() // 注册store
+instance.use(directives)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  instance.component(key, component)
+} // 批量注册element icon
+
+instance.component('SvgIcon', svgIcon)
+instance.component('TableList', tableList)
+
+instance
+  .use(router)
+  .use(ElementPlus, {
+    locale: zhCn,
+    button: {
+      autoInsertSpace: true
+    }
+  })
+  .mount('#app')