基础element-plus模板项目

src/App.vue

@@ -0,0 +1,9 @@
+<script setup>
+</script>
+
+<template>
+  <router-view />
+</template>
+
+<style scoped>
+</style>

src/assets/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>

src/components/LeftMenu.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-scrollbar>
+    <el-menu :default-openeds="['1']">
+      <el-sub-menu index="1">
+        <template #title>
+          <el-icon><setting /></el-icon>系统管理
+        </template>
+          <el-menu-item index="1-1">
+            <el-icon><user/></el-icon>用户管理
+          </el-menu-item>
+          <el-menu-item index="1-2">
+            <el-icon><Menu/></el-icon>角色管理
+          </el-menu-item>
+          <el-menu-item index="1-3">
+            <el-icon><lock/></el-icon>权限管理
+          </el-menu-item>
+          <el-menu-item index="1-4">
+            <el-icon><Menu/></el-icon>菜单管理
+          </el-menu-item>
+      </el-sub-menu>
+      <el-sub-menu index="2">
+        <template #title>
+          <el-icon><WarningFilled /></el-icon>错误页面
+        </template>
+          <el-menu-item index="1-1"><el-icon><Warning /></el-icon>客户端错误</el-menu-item>
+          <el-menu-item index="1-2"><el-icon><Warning /></el-icon>没有权限页面</el-menu-item>
+          <el-menu-item index="1-3"><el-icon><Warning /></el-icon>服务器错误</el-menu-item>
+      </el-sub-menu>
+    </el-menu>
+  </el-scrollbar>
+</template>
+
+<script>
+export default {
+  name: "LeftMenu"
+}
+</script>
+
+<style scoped>
+
+</style>

src/components/TopNav.vue

@@ -0,0 +1,37 @@
+<template>
+  <el-menu
+      mode="horizontal"
+      :ellipsis="false">
+    <el-menu-item index="0">SIMPLE EP</el-menu-item>
+    <div class="flex-grow" />
+    <el-sub-menu index="1">
+      <template #title>语言</template>
+      <el-menu-item index="2-1">中文</el-menu-item>
+      <el-menu-item index="2-2">英文</el-menu-item>
+    </el-sub-menu>
+    <el-sub-menu index="2">
+      <template #title>主题</template>
+      <el-menu-item index="2-1">默认</el-menu-item>
+      <el-menu-item index="2-2">黑色</el-menu-item>
+      <el-menu-item index="2-3">紫色</el-menu-item>
+    </el-sub-menu>
+    <el-sub-menu index="3">
+      <template #title>个人中心</template>
+      <el-menu-item index="2-4-1">个人资料</el-menu-item>
+      <el-menu-item index="2-4-2">关于</el-menu-item>
+      <el-menu-item index="2-4-3">退出</el-menu-item>
+    </el-sub-menu>
+  </el-menu>
+</template>
+
+<script>
+export default {
+  name: "TopNav"
+}
+</script>
+
+<style scoped>
+.flex-grow {
+  flex-grow: 1;
+}
+</style>

src/main.js

@@ -0,0 +1,22 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+
+import App from './App.vue'
+import router from './router'
+
+import './assets/main.css'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+app.use(ElementPlus)
+
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component)
+}
+
+app.mount('#app')

src/router/index.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (About.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      component: () => import('../views/AboutView.vue')
+    }
+  ]
+})
+
+export default router

src/stores/counter.js

@@ -0,0 +1,12 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
+  const doubleCount = computed(() => count.value * 2)
+  function increment() {
+    count.value++
+  }
+
+  return { count, doubleCount, increment }
+})

src/views/AboutView.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
+
+<style>
+@media (min-width: 1024px) {
+  .about {
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+  }
+}
+</style>

src/views/HomeView.vue

@@ -0,0 +1,20 @@
+<script setup>
+import LeftMenu from "@/components/LeftMenu.vue";
+import TopNav from "@/components/TopNav.vue";
+</script>
+
+<template>
+  <el-container class="index-container">
+    <el-header>
+      <top-nav/>
+    </el-header>
+    <el-container>
+      <el-aside>
+        <left-menu/>
+      </el-aside>
+      <el-main>
+        <router-view/>
+      </el-main>
+    </el-container>
+  </el-container>
+</template>