架子初始化

components.d.ts

@@ -7,8 +7,18 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ComNav: typeof import('./src/components/comNav/index.vue')['default']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElMenu: typeof import('element-plus/es')['ElMenu']
+    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
+    ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
+    MenuItem: typeof import('./src/components/comNav/sideBar/menuItem.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SubMenu: typeof import('./src/components/comNav/sideBar/subMenu.vue')['default']
   }
 }

package.json

@@ -13,6 +13,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
     "@vueuse/core": "^10.6.1",
     "axios": "^1.6.2",
     "element-plus": "^2.4.3",
@@ -21,6 +22,7 @@
     "nprogress": "^0.2.0",
     "pinia": "^2.1.7",
     "pinia-plugin-persist": "^1.0.0",
+    "unplugin-icons": "^0.18.0",
     "vite-plugin-html": "^3.2.0",
     "vite-plugin-zip-file": "^2.2.0",
     "vue": "^3.3.4",

src/App.vue

@@ -1,5 +1,4 @@
 <template>
-  <el-button type="primary">424242 </el-button>
   <RouterView />
 </template>
 <script setup lang="ts">

src/assets/base.css

@@ -1,86 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition:
-    color 0.5s,
-    background-color 0.5s;
-  line-height: 1.6;
-  font-family:
-    Inter,
-    -apple-system,
-    BlinkMacSystemFont,
-    'Segoe UI',
-    Roboto,
-    Oxygen,
-    Ubuntu,
-    Cantarell,
-    'Fira Sans',
-    'Droid Sans',
-    'Helvetica Neue',
-    sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}

src/assets/main.css

@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}

src/components/comNav/index.vue

@@ -0,0 +1,12 @@
+<template>
+    <h1>66</h1>
+    <subMenu></subMenu>
+ 
+    <RouterView />
+  </template>
+  <script setup lang="ts">
+  import subMenu from './sideBar/subMenu.vue';
+  </script>
+  
+  <style scoped></style>
+  

src/components/comNav/sideBar/menuItem.vue

@@ -0,0 +1,39 @@
+<template>
+  <template v-for="item in props.menuList" :key="item.path">
+
+    <el-sub-menu :index="item.path" v-if="item.children && item.children.length > 0">
+      <template #title v-if="item.meta.icon">
+        <el-icon>
+          <Edit />
+        </el-icon>
+        <span>{{ item.meta.title }}</span>
+      </template>
+      <template #title v-else>{{ item.meta.title }}</template>
+      <menuItem :menuList="(item.children as any)" />
+    </el-sub-menu>
+    <el-menu-item :index="item.path" v-else>
+      <template v-if="item.meta.icon">
+        <el-icon >
+          <Search/> </el-icon>
+        <span>{{ item.meta.title }}</span>
+      </template>
+      <template  #title >
+        {{ item.meta.title }}
+      </template>
+    </el-menu-item>
+  </template>
+</template>
+ 
+   
+<script lang="ts" setup>
+const menuInfo: any = reactive({
+  list: []
+})
+// 获取父组件传进来的子菜单列表
+const props = defineProps({
+  menuList: {
+    type: Array,
+    default: []
+  }
+})
+</script>

src/components/comNav/sideBar/subMenu.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-menu active-text-color="#fff" :background-color="props.backgroundColor" :default-active="'0'" text-color="#999" :unique-opened="true" :default-openeds="['/test1']"
+    router>
+    <menuItem :menuList="props.menuList">
+    </menuItem>
+  </el-menu>
+</template>
+
+<script lang="ts" setup>
+import menuItem from "./menuItem.vue"
+import { ref } from 'vue'
+import {
+  Document,
+  Menu as IconMenu,
+  Location,
+  Setting,
+} from '@element-plus/icons-vue'
+
+const props: any = defineProps({
+  collapse: {
+    type: Boolean,
+    default: false,
+  },
+  backgroundColor: {
+    type: String,
+    default: "#d3e6f3"
+  },
+  textColor: {
+    type: String,
+    default: "#303133"
+  },
+  activeTextColor: {
+    type: String,
+    default: "#409EFF"
+  },
+  defaultActive: {
+    type: String,
+    default: "0"
+  },
+  defaultOpeneds: {
+    type: Array,
+    default: ["/test1/test11"]
+  },
+  uniqueOpened: {
+    type: Boolean,
+    default: false,
+  },
+  menuTrigger: {
+    type: String,
+    default: "hover"//hover / click
+  },
+  router: {
+    type: Boolean,
+    default: false,
+  },
+  collapseTransition: {
+    type: Boolean,
+    default: false,
+  },
+  popperEffect: {
+    type: String,
+    default: "dark"//dark / light
+  },
+  menuList: {
+    type: Array,
+    default: [{
+      meta: {
+        title: "666",
+        icon: "Search"
+      },
+      path: '/test1',
+      children: [{
+        meta: {
+          title: "666",
+          icon: "Search"
+        },
+        path: '/test1/test11',
+      }
+      ]
+    }]
+  }
+})
+const isCollapse = ref(false)
+const handleOpen = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+const handleClose = (key: string, keyPath: string[]) => {
+  console.log(key, keyPath)
+}
+</script>
+
+<style>
+.el-menu-vertical-demo:not(.el-menu--collapse) {
+  width: 200px;
+  min-height: 400px;
+}
+</style>

src/main.ts

@@ -5,9 +5,14 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
+ 
 const app = createApp(App)
 
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
 app.use(createPinia())
 app.use(router)
 

src/router/index.ts

@@ -1,38 +1,14 @@
 import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
-import test from './module/test'
-import myInfo from './module/myInfo'
 const routes: Array<RouteRecordRaw> = [
     {
         path: '/index',
         name: 'index',
-        component: () => import('views/Index.vue'),
+        component: () => import('views/AppMain.vue'),
         meta: {
-            title: '目录页',
+            title: '主页面',
             keepAlive: true,
-            AuthFlag: false
+            AuthFlag: true
         }
-    },
-    {
-        path: '/test', // 主路由地址
-        name: 'testIndex',
-        component: () => import('views/test/Index.vue'), // 组件加载
-        meta: {
-            title: '测试',
-            keepAlive: true,
-            AuthFlag: false
-        },
-        children: [...test]
-    },
-    {
-        path: '/myInfo', // 主路由地址
-        name: 'myInfo',
-        component: () => import('views/myInfo/Index.vue'), // 组件加载
-        meta: {
-            title: '我的',
-            keepAlive: true,
-            AuthFlag: false
-        },
-        children: [...myInfo]
     }
 ]
 

src/router/module/myInfo.ts

@@ -1,12 +0,0 @@
-export default [
-    {
-        path: 'userInfo', // 主路由地址
-        name: 'userInfo',
-        component: () => import('views/myInfo/userInfo/UserIndex.vue'), // 组件加载
-        meta: {
-            title: '个人信息',
-            keepAlive: true,
-            AuthFlag: false
-        }
-    }
-]

src/router/module/test.ts

@@ -1,43 +0,0 @@
-export default [
-    {
-        path: 'piniaTest', //
-        name: 'piniaTest',
-        component: () => import('views/test/PiniaTest.vue'), // 组件加载
-        meta: {
-            title: 'pinia测试',
-            keepAlive: true,
-            AuthFlag: false
-        }
-    },
-    {
-        path: 'routerTest', //
-        name: 'routerTest',
-        component: () => import('views/test/RouterTest.vue'), // 组件加载
-        meta: {
-            title: '路由测试',
-            keepAlive: true,
-            AuthFlag: false
-        }
-    },
-    {
-        path: 'timeTest', //
-        name: 'timeTest',
-        component: () => import('views/test/TimeTest.vue'), // 组件加载
-        meta: {
-            title: '时间测试',
-            keepAlive: true,
-            AuthFlag: false
-        }
-    },
-    {
-        path: 'mittTest', //
-        name: 'mittTest',
-        component: () => import('views/test/MittTest.vue'), // 组件加载
-        meta: {
-            title: '全局事件测试',
-            keepAlive: true,
-            AuthFlag: false
-        }
-    }
-]
-// 

src/style/css/reset.css

@@ -1,9 +1,51 @@
-* {
-    margin: 0;
-    padding: 0;
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+body {
+	line-height: 1;
+ 
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
 }
 
 #app {
     width: 100vw;
     height: 100vh;
+ 
+    	
 }

src/style/scss/common.scss

@@ -0,0 +1,5 @@
+.overflow {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }

src/style/scss/index.scss

@@ -0,0 +1,5 @@
+@import './variable.scss';
+@import './mixin.scss';
+@import './common.module.scss';
+@import './nprogress.scss';
+@import './common.scss';

src/style/scss/nprogress.scss

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: $main-color;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px $main-color, 0 0 5px $main-color;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: $main-color;
+  border-left-color: $main-color;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+  }
+}
+
+@keyframes nprogress-spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/style/scss/vantReset.scss

@@ -1,4 +0,0 @@
-.van-button--primary {
-    background-color: $main-color;
-    border: $main-color;
-}

src/style/scss/variable.scss

@@ -1,2 +1,2 @@
-$main-color: #f00;
+$main-color: #22b2ff;
 $second-color: #666;

src/views/AppMain.vue

@@ -0,0 +1,10 @@
+<template>
+    <comNav></comNav>
+    <RouterView />
+  </template>
+  <script setup lang="ts">
+  import comNav from 'components/comNav/index.vue';
+  </script>
+  
+  <style scoped></style>
+  

vite.config.ts

@@ -7,14 +7,13 @@ import vueJsx from '@vitejs/plugin-vue-jsx'
 import Components from 'unplugin-vue-components/vite'
 import { ElementPlusResolver  } from 'unplugin-vue-components/resolvers'
 import { createHtmlPlugin } from 'vite-plugin-html'
-import moment from 'moment'
-import { env } from 'node:process'
-
+import Icons from 'unplugin-icons/vite'
+import IconsResolver from 'unplugin-icons/resolver'
 
 // @ts-ignore
 import pjson from './package.json'
 
-const now = new Date()
+ 
 
 export default ({ mode }: any) => {
   const envInfo = loadEnv(mode, process.cwd() + '/env')
@@ -39,6 +38,18 @@ export default ({ mode }: any) => {
       vueJsx(),
       AutoImport({
         imports: ['vue', 'vue-router', 'pinia'],
+        resolvers: [
+          ElementPlusResolver(),
+  
+          // Auto import icon components
+          // 自动导入图标组件
+          IconsResolver({
+            prefix: 'Icon',
+          }),
+        ],
+      }),
+      Icons({
+        autoInstall: true,
       }),
       Components({
         resolvers: [ElementPlusResolver()],
@@ -71,7 +82,7 @@ export default ({ mode }: any) => {
         scss: {
           // 两种方式都可以
           additionalData:
-            "@import '@/style/scss/variable.scss';@import '@/style/scss/mixin.scss';@import '@/style/scss/vantReset.scss';"
+            "@import '@/style/scss/index.scss';"
 
         }
       }
@@ -82,7 +93,7 @@ export default ({ mode }: any) => {
       // open: envInfo.VITE_OPEN,
       proxy: {
         '/proxyApi': {
-          target: 'https://test.com',
+          target: envInfo.VITE_proxyTarget,
           secure: false,
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/proxyApi/, ''),
@@ -128,7 +139,7 @@ export default ({ mode }: any) => {
     },
     envDir: 'env',
     build: {
-      outDir: 'dist/' + pjson.name,
+      outDir: 'dist/' + pjson.name +'-'+envInfo.VITE_BUILD_MODE,
       emptyOutDir: true,
       terserOptions: {
         compress: {