update

Author: Neveryu

Diff for: .env

@@ -0,0 +1,7 @@
+VITE_PORT = 3100
+
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /

Diff for: .env.development

@@ -1,6 +1,6 @@
 <p align="center"><a href="https://blog.csdn.net/csdn_yudong/article/details/85250412"><img width="120" src="https://raw.githubusercontent.com/Neveryu/vue-cms/master/static/image/login-logo.png"></a></p>
 
-<p align="center">基于 Vue 和 antd design vue 3.x 构建的企业级后台管理项目</p>
+<p align="center">基于 Vue3.x 和 antd design vue 3.x 构建的企业级后台管理项目</p>
 
 <p align="center">
   <a href="https://github.com/vuejs/vue" rel="nofollow" target="_blank">
@@ -25,8 +25,7 @@
 
 ## 简介
 
-
-// todo
+> 本分支是基于[vue3.x + antd design vue 3.x]为核心构建的企业级后台管理项目.
 
 
 `vue-cms` 是一个企业级管理后台项目，基于 `Vue` 和 `ElementUI` 构建。它使用了最新的前端技术栈，内置了 `i18n` 国际化解决方案，支持多语言，路由嵌套，动态路由，权限验证等很多功能特性。
@@ -61,7 +60,7 @@ npm start
 
 浏览器访问 [http://localhost:8080](http://localhost:8080)
 
-## 构建发布
+## 构建，发布
 
 ```
 # build for production with minification
@@ -94,15 +93,14 @@ npm run build --report
 - 富文本
 ```
 
-## 截图
-![](./resource/screenhot3.png)
-![](./resource/screenhot1.png)
-![](./resource/screenhot2.png)
-![](./resource/screenhot4.png)
+## 快照|snapshot
+
+// todo
+
 
-## Online Demo
+## Online demo
 
-[在线 Demo](https://neveryu.github.io/vue-cms/index.html)
+[在线 Demo 演示](https://neveryu.github.io/vue-cms/index.html)
 
 ## Donate
 
@@ -113,7 +111,7 @@ npm run build --report
 
 ## Browsers support
 
-Modern browsers and Internet Explorer 10+.
+Modern browsers and Internet Explorer 11+.
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
 | --------- | --------- | --------- | --------- |
@@ -123,4 +121,4 @@ Modern browsers and Internet Explorer 10+.
 
 [MIT](https://github.com/Neveryu/vue-cms/blob/master/LICENSE)
 
-Copyright (c) 2017-present NeverYu
+Copyright (c) 2017-present, [NeverYu](https://github.com/Neveryu)

Diff for: README.md

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="keywords" content="vue-cms-后台管理系统" />
-    <meta name="description" content="vue-cms-后台管理系统" />
+    <meta name="keywords" content="vue-cms,后台管理系统,vue,vue3,vuex,vue-router" />
+    <meta name="description" content="基于最新的Vue框架开发的企业级后台管理系统" />
     <meta name="referrer" content="no-referrer"/>
     <title>vue-cms</title>
   </head>

Diff for: index.html

@@ -112,3 +112,29 @@ export default {
 ```
 
 【总结：】如果确实想要使用按需加载的话，借助 `babel-plugin-import` 是一个很好的方案吧，但还是那句话，样式还是全量引入吧。
+
+## 四、useRouter, useRoute？？
+
+因为我们在 setup 里面没有访问 this，所以我们不能再直接访问 this.$router 或 this.$route。作为替代，我们使用 useRouter 函数：
+
+```
+import { useRouter, useRoute } from 'vue-router'
+
+export default {
+  setup() {
+    const router = useRouter()
+    const route = useRoute()
+
+    function pushWithQuery(query) {
+      router.push({
+        name: 'search',
+        query: {
+          ...route.query,
+        },
+      })
+    }
+  },
+}
+```
+
+请注意，在模板中我们仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

Diff for: note.md

@@ -3,6 +3,7 @@
   "private": true,
   "version": "3.0.0",
   "scripts": {
+    "start": "npm run serve",
     "serve": "npm run dev",
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",

Diff for: package.json

@@ -1,29 +1,10 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-
 const count = ref(0)
 </script>
 
 <template>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VS Code</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
   <button type="button" @click="count++">count is: {{ count }}</button>
   <p>
     Edit

Diff for: src/components/HelloWorld.vue

@@ -0,0 +1,7 @@
+export enum RoleEnum {
+  // super admin
+  SUPER = 'super',
+
+  // tester
+  TEST = 'test'
+}

Diff for: src/enums/roleEnum.ts

@@ -0,0 +1,23 @@
+export const REDIRECT_NAME = 'Redirect'
+
+export const PARENT_LAYOUT_NAME = 'ParentLayout'
+
+export const EXCEPTION_COMPONENT = () =>
+  import('../views/sys/exception/Exception.vue')
+
+/**
+ * @description: default layout
+ */
+export const LAYOUT = () => import('/@/layouts/default/index.vue')
+
+/**
+ * @description: parent-layout
+ */
+export const getParentLayout = (_name?: string) => {
+  return () =>
+    new Promise((resolve) => {
+      resolve({
+        name: PARENT_LAYOUT_NAME
+      })
+    })
+}

Diff for: src/router/constant.ts

@@ -2,13 +2,18 @@ import type { RouteRecordRaw } from 'vue-router'
 import type { App } from 'vue'
 
 import { createRouter, createWebHashHistory } from 'vue-router'
-// import { basicRoutes, LoginRoute } from './routes'
-// import { REDIRECT_NAME } from './constant'
+import { basicRoutes, LoginRoute } from './routes'
+import { REDIRECT_NAME } from './constant'
 
-const WHITE_NAME_LIST = [LoginRoute.name, REDIRECT_NAME]
+const WHITE_NAME_LIST = [REDIRECT_NAME]
+// const WHITE_NAME_LIST = [LoginRoute.name, REDIRECT_NAME]
 
 // app router
 const router = createRouter({
+  /**
+   * import.meta.env是vite的加载配置文件变量的方式
+   * 官方说明：https://cn.vitejs.dev/guide/env-and-mode.html
+   */
   history: createWebHashHistory(import.meta.env.VITE_PUBLIC_PATH),
   routes: basicRoutes as unknown as RouteRecordRaw[],
   strict: true,

Diff for: src/router/index.ts

@@ -0,0 +1,67 @@
+import type { AppRouteRecordRaw } from '/@/router/types'
+import { t } from '/@/hooks/web/useI18n'
+import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant'
+
+// 404 on a page
+export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
+  path: '/:path(.*)*',
+  name: 'ErrorPage',
+  component: LAYOUT,
+  meta: {
+    title: 'ErrorPage',
+    hideBreadcrumb: true
+  },
+  children: [
+    {
+      path: '/:path(.*)*',
+      name: 'ErrorPage',
+      component: EXCEPTION_COMPONENT,
+      meta: {
+        title: 'ErrorPage',
+        hideBreadcrumb: true
+      }
+    }
+  ]
+}
+
+export const REDIRECT_ROUTE: AppRouteRecordRaw = {
+  path: '/redirect',
+  name: REDIRECT_NAME,
+  component: LAYOUT,
+  meta: {
+    title: REDIRECT_NAME,
+    hideBreadcrumb: true
+  },
+  children: [
+    {
+      path: '/redirect/:path(.*)',
+      name: REDIRECT_NAME,
+      component: () => import('/@/views/sys/redirect/index.vue'),
+      meta: {
+        title: REDIRECT_NAME,
+        hideBreadcrumb: true
+      }
+    }
+  ]
+}
+
+export const ERROR_LOG_ROUTE: AppRouteRecordRaw = {
+  path: '/error-log',
+  name: 'errorLog',
+  component: LAYOUT,
+  meta: {
+    title: 'ErrorLog',
+    hideBreadcrumb: true
+  },
+  children: [
+    {
+      path: 'list',
+      name: 'errorLogList',
+      component: () => import('/@/views/sys/error-log/index.vue'),
+      meta: {
+        title: t('routes.basic.errorLogList'),
+        hideBreadcrumb: true
+      }
+    }
+  ]
+}

Diff for: src/router/routes/basic.ts

@@ -0,0 +1,45 @@
+import type { AppRouteRecordRaw, AppRouteModule } from '/@/router/types'
+
+import { PAGE_NOT_FOUND_ROUTE, REDIRECT_ROUTE } from '/@/router/routes/basic'
+
+import { mainOutRoutes } from './mainOut'
+import { PageEnum } from '/@/enums/pageEnum'
+import { t } from '/@/hooks/web/useI18n'
+
+const modules = import.meta.globEager('./modules/**/*.ts')
+
+const routeModuleList: AppRouteModule[] = []
+
+Object.keys(modules).forEach((key) => {
+  const mod = modules[key].default || {}
+  const modList = Array.isArray(mod) ? [...mod] : [mod]
+  routeModuleList.push(...modList)
+})
+
+export const asyncRoutes = [PAGE_NOT_FOUND_ROUTE, ...routeModuleList]
+
+export const RootRoute: AppRouteRecordRaw = {
+  path: '/',
+  name: 'Root',
+  redirect: PageEnum.BASE_HOME,
+  meta: {
+    title: 'Root'
+  }
+}
+
+export const LoginRoute: AppRouteRecordRaw = {
+  path: '/login',
+  name: 'Login',
+  component: () => import('/@/views/sys/login/Login.vue'),
+  meta: {
+    title: t('routes.basic.login')
+  }
+}
+
+// Basic routing without permission
+export const basicRoutes = [
+  LoginRoute,
+  RootRoute,
+  ...mainOutRoutes,
+  REDIRECT_ROUTE
+]

Diff for: src/router/routes/index.ts

@@ -51,6 +51,11 @@ export interface RouteMeta {
   isLink?: boolean
 }
 
+
+/**
+ * Omit<K,T>类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型
+ * 怎么剔除多个属性？Omit<K,"T|L|Q">
+ */
 // @ts-ignore
 export interface AppRouteRecordRaw extends Omit<RouteRecordRaw, 'meta'> {
   name: string