feat:简单Layout布局

README.md

@@ -8,6 +8,8 @@
 
 - vue-router4 : https://next.router.vuejs.org/zh/introduction.html
 
+- element-plus: https://element-plus.gitee.io/zh-CN/
+
 
 
 ## Vite项目构建
@@ -210,80 +212,27 @@ TS配置别名路径，否则使用别名路径会报错，下面关键配置 `b
 
 ```
 
-## HelloWorld.vue
 
-```typescript
-<template>
-  <el-input v-model="num"/>
-  <el-button @click="handleClick">点击+1</el-button>
-</template>
-
-<script  lang="ts">
-import {defineComponent, computed} from 'vue'
-import {userStore} from '@/store';
-
-
-export default defineComponent({
-  setup() {
-    const store = userStore()
-    const num = computed(()=>{
-      return store.state.count
-    })
-    const handleClick = () => {
-      store.commit('increment')
-    }
-    return {
-      num,
-      handleClick
-    }
-  },
-})
-</script>
-```
-
-## App.vue
-
-```typescript
-
-<template>
-  <img alt="Vue logo" src="./assets/logo.png" />
-  <router-view/>
-</template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
-
-```
 
 ## Vite 环境变量配置
 
 **官方环境变量配置文档：** https://cn.vitejs.dev/guide/env-and-mode.html
 
-#### 多环境配置
+#### 配置文件
 
-开发环境变量文件：`.env.development`
+在项目根目录分别添加 `开发环境配置` 、 `生产环境配置`和`模拟环境配置`文件
+
+开发环境配置：`.env.development`
 
 ```properties
-# 开发环境变量
+# 开发环境变量 注意：变量必须以 VITE_ 为前缀才能暴露给外部读取
-
-# 变量必须以 VITE_ 为前缀才能暴露给外部读取
-
 VITE_APP_TITLE = '管理系统'
 VITE_APP_PORT = 3000
 VITE_APP_BASE_API = '/dev-api'
-
 ```
 
 
-生产环境变量文件：`.env.production`
+生产环境配置：`.env.production`
 
 ```properties
 # 生产环境变量
@@ -293,7 +242,7 @@ VITE_APP_BASE_API = '/prod-api'
 ```
 
 
-模拟环境变量文件：`.env.staging`
+模拟环境配置：`.env.staging`
 
 ```properties
 # 模拟环境变量
@@ -474,5 +423,58 @@ export default service
 
 
 
+## HelloWorld.vue
+
+```typescript
+<template>
+  <el-input v-model="num"/>
+  <el-button @click="handleClick">点击+1</el-button>
+</template>
+
+<script  lang="ts">
+import {defineComponent, computed} from 'vue'
+import {userStore} from '@/store';
+
+
+export default defineComponent({
+  setup() {
+    const store = userStore()
+    const num = computed(()=>{
+      return store.state.count
+    })
+    const handleClick = () => {
+      store.commit('increment')
+    }
+    return {
+      num,
+      handleClick
+    }
+  },
+})
+</script>
+```
+
+## App.vue
+
+```typescript
+
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <router-view/>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>
+
+```
+
 
 

src/App.vue

@@ -1,6 +1,5 @@
 
 <template>
-  <img alt="Vue logo" src="./assets/logo.png" />
   <router-view/>
 </template>
 
@@ -11,6 +10,5 @@
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
-  margin-top: 60px;
 }
 </style>

src/layout/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <el-container>
+    <el-header>Header</el-header>
+    <el-container>
+      <el-aside width="200px">Aside</el-aside>
+      <el-container>
+        <el-main>
+          <router-view/>
+        </el-main>
+        <el-footer>Footer</el-footer>
+      </el-container>
+    </el-container>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+.el-header,
+.el-footer {
+  background-color: #b3c0d1;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-aside {
+  background-color: #d3dce6;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  line-height: 200px;
+}
+
+.el-main {
+  background-color: #e9eef3;
+  color: var(--el-text-color-primary);
+  text-align: center;
+  line-height: 160px;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
+</style>

src/router/index.ts

@@ -1,17 +1,19 @@
 import {createRouter, createWebHashHistory, RouteRecordRaw} from 'vue-router'
-import HelloWord from '../components/HelloWorld.vue'
+import Layout from '@/layout/index.vue'
 
 const routes: Array<RouteRecordRaw> = [
     {
-        path: '',
+        path: '/',
-        redirect: (_) => {
+        component: Layout,
-            return {path: '/home'}
+        redirect: '/dashboard',
-        }
+        children: [
-    },
             {
-        path: '/home',
+                path: 'dashboard',
-        name: 'HelloWord',
+                component: () => import('@views/dashboard/index.vue'),
-        component: HelloWord
+                name: 'Dashboard',
+                meta: {title: '首页', icon: 'dashboard', affix: true}
+            }
+        ]
     }
 ]
 

src/views/dashboard/index.vue

@@ -0,0 +1,13 @@
+<template>
+  这里是控制台
+</template>
+
+<script>
+export default {
+  name: "index"
+}
+</script>
+
+<style scoped>
+
+</style>

vite.config.ts

@@ -41,6 +41,10 @@ export default defineConfig({
             {
                 find:"@utils",
                 replacement: path.resolve("./src/utils")
+            },
+            {
+                find:"@views",
+                replacement: path.resolve("./src/views")
             }
         ]
     }