添加了header添加了默认中文设置

src/App.vue

@@ -1,27 +1,27 @@
-<script setup>
+<script>
-import HelloWorld from './components/HelloWorld.vue'
+import { defineComponent } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+
+export default defineComponent({
+  components: {
+    ElConfigProvider,
+  },
+  setup() {
+    return {
+      locale: zhCn,
+    }
+  },
+})
 </script>
 
 <template>
-  <div class="common-layout">
+  <el-config-provider :locale="locale">
-    <el-container>
+    <router-view></router-view>
-      <el-aside width="200px">
+  </el-config-provider>
-        Aside
-      </el-aside>
-      <el-main>
-        <HelloWorld/>
-      </el-main>
-    </el-container>
-  </div>
 </template>
 
 <style>
-#app,
+
-html,
-body,
-.el-container {
-  padding: 0;
-  margin: 0;
-  height: 100%;
-}
 </style>

src/layout/components/PageAside.vue

@@ -0,0 +1,32 @@
+<script setup>
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+</script>
+
+<template>
+  <el-row class="tac">
+    <el-col :span="15">
+      <h5 class="mb-2">鼎新工具集</h5>
+      <el-menu
+          default-active="1"
+          class="el-menu-vertical-demo"
+      >
+        <el-menu-item index="1">
+          <el-icon>
+            <icon-menu/>
+          </el-icon>
+          <span>影院列表</span>
+        </el-menu-item>
+      </el-menu>
+    </el-col>
+  </el-row>
+
+</template>
+
+<style scoped>
+
+</style>

src/layout/components/PageHeader.vue

@@ -0,0 +1,17 @@
+<script setup>
+const goBack = () => {
+  console.log('go back')
+}
+</script>
+
+<template>
+  <el-page-header @back="goBack">
+    <template #content>
+      <span class="text-large font-600 mr-3">影院列表</span>
+    </template>
+  </el-page-header>
+</template>
+
+<style scoped>
+
+</style>

src/layout/index.vue

@@ -0,0 +1,34 @@
+<script setup>
+import HelloWorld from "@/components/HelloWorld.vue";
+import PageHeader from "@/layout/components/PageHeader.vue";
+import PageAside from "@/layout/components/PageAside.vue";
+</script>
+
+<template>
+  <div class="common-layout">
+    <el-container>
+      <el-aside width="200px">
+        <PageAside/>
+      </el-aside>
+      <el-container>
+        <el-header>
+          <PageHeader/>
+        </el-header>
+        <el-main>
+          <HelloWorld/>
+        </el-main>
+      </el-container>
+    </el-container>
+  </div>
+</template>
+
+<style>
+#app,
+html,
+body,
+.el-container {
+  padding: 0;
+  margin: 0;
+  height: 100%;
+}
+</style>

src/main.js

@@ -3,6 +3,8 @@ import './style.css'
 import App from './App.vue'
 import ElementPlus from 'element-plus'
 import * as ELIcons from '@element-plus/icons-vue'
+import router from './router/index.js'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
 const app = createApp(App)
 
@@ -10,4 +12,4 @@ for (const name in ELIcons){
     app.component(name, ELIcons[name]);
 }
 
-app.use(ElementPlus).mount('#app')
+app.use(router).use(ElementPlus, {locale: zhCn,}).mount('#app')

src/router/index.js

@@ -1,3 +1,14 @@
 import {createRouter, createWebHashHistory} from 'vue-router';
+import Layout from '@/layout/index.vue'
 
-const routes = []
+const routes = [
+    {
+        path: '/',
+        name: 'Home',
+        component: Layout,
+    }
+]
+
+const router = createRouter({history: createWebHashHistory(), routes})
+
+export default router

src/views/update/index.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+
+</template>
+
+<style scoped>
+
+</style>