feat: 引入 prettier 并格式化代码

.eslintrc.js

@@ -1,4 +1,6 @@
-const { defineConfig } = require('eslint-define-config')
+const {
+  defineConfig
+} = require('eslint-define-config')
 module.exports = defineConfig({
   root: true,
   env: {
@@ -7,7 +9,8 @@ module.exports = defineConfig({
     node: true
   },
   plugins: [
-    'vue'
+    'vue',
+    'prettier'
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
@@ -21,10 +24,14 @@ module.exports = defineConfig({
   },
   extends: [
     'plugin:vue/vue3-recommended',
-    'plugin:@typescript-eslint/recommended'
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'plugin:prettier/recommended'
   ],
   rules: {
+    "prettier/prettier": "error",
     'vue/multi-word-component-names': 'off',
-    '@typescript-eslint/no-explicit-any': 'off'
+    '@typescript-eslint/no-explicit-any': 'off',
+    'vue/v-on-event-hyphenation': "off"
   },
 })

.prettierignore

@@ -0,0 +1,18 @@
+*.svg
+*.ico
+package.json
+/dist
+.DS_Store
+.eslintignore
+*.png
+*.toml
+.editorconfig
+.gitignore
+.prettierignore
+LICENSE
+.eslintcache
+*.lock
+yarn-error.log
+/public
+**/node_modules/**
+.npmrc

.prettierrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  semi: true,
+  singleQuote: true,
+  vueIndentScriptAndStyle: true,
+  trailingComma: 'none',
+  bracketSpacing: true,
+  proseWrap: 'never',
+  htmlWhitespaceSensitivity: 'strict',
+  endOfLine: 'auto',
+  arrowParens: 'avoid'
+};

.vscode/settings.json

@@ -1,6 +1,7 @@
 {
   "typescript.tsdk": "./node_modules/typescript/lib",
   "eslint.validate": [
+    "vue",
     "javascript",
     "typescript",
     "javascriptreact"
@@ -9,6 +10,8 @@
   "volar.tsPluginStatus": false,
   "editor.tabSize": 2,
   "eslint.format.enable": true,
+  "eslint.run": "onSave",
+  "editor.formatOnSave": true,
   "files.eol": "\n",
   "path-intellisense.mappings": {
     "@/": "${workspaceRoot}/src"
@@ -19,6 +22,31 @@
   "[vue]": {
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": false
-    }
+    },
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
 }

CHANGELOG.md

@@ -1,17 +1,25 @@
+## 0.7.1(2022-01-20)
+
+### Features
+
+- 引入 prettier 格式化代码
+- 格式化全局代码
+
 ## 0.7.0(2022-01-17)
 
 ### Features
 
-- 引入unplugin-auto-import，实现自动导入vue,vue-router,@vueuse/core(部分使用)
-- 优化unplugin-vue-components的使用
-- 引入@vitejs/plugin-vue-jsx支持jsx写法
-- 优化vite.config.ts，抽离配置，修复ant-design-vue主题色未变更问题，增加代理服务器用于开发跨域请求
+- 引入 unplugin-auto-import，实现自动导入 vue,vue-router,@vueuse/core(部分使用)
+- 优化 unplugin-vue-components 的使用
+- 引入@vitejs/plugin-vue-jsx 支持 jsx 写法
+- 优化 vite.config.ts，抽离配置，修复 ant-design-vue 主题色未变更问题，增加代理服务器用于开发跨域请求
 - 优化并删减多余的代码
 
 ## 0.6.0(2021-12-22)
+
 ### Features
 
-- 更新npm包
+- 更新 npm 包
 - 登录页完成
 - 登录态相关逻辑的简化版完成
 
@@ -27,39 +35,39 @@
 
 ### Features
 
-- ant-design-vue改为按需加载
-- 动态导入ant-design-vue和@ant-design/icons-vue相关组件
+- ant-design-vue 改为按需加载
+- 动态导入 ant-design-vue 和@ant-design/icons-vue 相关组件
 - 顶部导航栏布局大体完成
 - 实现动态权限路由加载
 - 边侧栏的一级权限路由完成
 - 增加项目初始化等待页面
-- 增加404页面的重定向
+- 增加 404 页面的重定向
 - 增加测试权限相关的页面
 
 ## 0.3.0(2021-12-17)
 
 ### Features
 
-- 添加ant-design-vue并配置相关按需加载
-- 添加@ant-design/icons-vue实现icon组件
+- 添加 ant-design-vue 并配置相关按需加载
+- 添加@ant-design/icons-vue 实现 icon 组件
 - 初步完成布局组件
 
 ## 0.2.0(2021-12-16)
 
 ### Features
 
-- 添加eslint及相关插件并配置
-- 添加commitizen，cz-conventional-changelog，husky，lint-staged 优化git提交格式
-- 全局安装pnpm，用其安装依赖
-- 增加@vueuse/core简化部分操作
+- 添加 eslint 及相关插件并配置
+- 添加 commitizen，cz-conventional-changelog，husky，lint-staged 优化 git 提交格式
+- 全局安装 pnpm，用其安装依赖
+- 增加@vueuse/core 简化部分操作
 - 增加全局接口定义文件
 
 ## 0.1.0(2021-12-15)
 
 ### Features
 
-- 基于vite + vue3 + ts初始化项目
+- 基于 vite + vue3 + ts 初始化项目
 - 项目结构添加并优化
-- 增加@的alias别名
-- 添加并封装vue-router，axios，pinia
-- 添加nprogress实现进度条
+- 增加@的 alias 别名
+- 添加并封装 vue-router，axios，pinia
+- 添加 nprogress 实现进度条

log.md

@@ -1,15 +1,16 @@
 # 待办事项
+
 - [x] `vue` `vue-router` `pinia` `axios` 库引入并封装
-- [x] UI框架选取并引入
+- [x] UI 框架选取并引入
 - [x] 头部布局组件
 - [x] 底部布局组件
 - [x] 边侧栏布局组件
 - [x] 权限路由设计
 - [x] 登录页
 - [x] 登录态相关处理
-- [x] vite相关配置抽离
+- [x] vite 相关配置抽离
+- [x] 引入 prettier 格式化代码
 - [ ] 构建编译的代码压缩和优化
-- [ ] 引入env环境变量
-- [ ] 引入prettier格式化代码
+- [ ] 引入 env 环境变量
 - [ ] 增加一些常用的构建脚本命令
-- [ ] 编写README
+- [ ] 编写 README

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-template",
-  "version": "0.7.0",
+  "version": "0.7.1",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
@@ -46,11 +46,14 @@
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^8.5.0",
+    "eslint-config-prettier": "^8.3.0",
     "eslint-define-config": "^1.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
     "lint-staged": "^12.1.3",
+    "prettier": "^2.5.1",
     "typescript": "^4.5.4",
     "unplugin-auto-import": "^0.5.11",
     "unplugin-vue-components": "^0.17.9",

pnpm-lock.yaml

@@ -15,13 +15,16 @@ specifiers:
   commitizen: ^4.2.4
   cz-conventional-changelog: ^3.3.0
   eslint: ^8.5.0
+  eslint-config-prettier: ^8.3.0
   eslint-define-config: ^1.2.0
+  eslint-plugin-prettier: ^4.0.0
   eslint-plugin-vue: ^8.2.0
   husky: ^7.0.4
   less: ^4.1.2
   lint-staged: ^12.1.3
   nprogress: ^0.2.0
   pinia: ^2.0.8
+  prettier: ^2.5.1
   typescript: ^4.5.4
   unplugin-auto-import: ^0.5.11
   unplugin-vue-components: ^0.17.9
@@ -51,11 +54,14 @@ devDependencies:
   commitizen: 4.2.4
   cz-conventional-changelog: 3.3.0
   eslint: 8.5.0
+  eslint-config-prettier: 8.3.0_eslint@8.5.0
   eslint-define-config: 1.2.0
+  eslint-plugin-prettier: 4.0.0_94e1b6d3ce6ea916847122712570e9ae
   eslint-plugin-vue: 8.2.0_eslint@8.5.0
   husky: 7.0.4
   less: 4.1.2
   lint-staged: 12.1.3
+  prettier: 2.5.1
   typescript: 4.5.4
   unplugin-auto-import: 0.5.11_@vueuse+core@7.4.0+vite@2.7.5
   unplugin-vue-components: 0.17.9_vite@2.7.5+vue@3.2.26
@@ -1753,11 +1759,37 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /eslint-config-prettier/8.3.0_eslint@8.5.0:
+    resolution: {integrity: sha1-90cbILb+ipqSVMxoRFQgKIai3Xo=, tarball: eslint-config-prettier/download/eslint-config-prettier-8.3.0.tgz}
+    hasBin: true
+    peerDependencies:
+      eslint: '>=7.0.0'
+    dependencies:
+      eslint: 8.5.0
+    dev: true
+
   /eslint-define-config/1.2.0:
     resolution: {integrity: sha512-EQ8d9F9LmJVRfkZW9WgSa5VBAVZialrLZKy0k1062zlhM8KFUyFoAC8xRI+mdp5m81FNMPnpKZfyq0AfJDyNTg==, tarball: eslint-define-config/download/eslint-define-config-1.2.0.tgz}
     engines: {node: '>= 16.9.0', npm: '>= 7.0.0', pnpm: '>= 6.17.0'}
     dev: true
 
+  /eslint-plugin-prettier/4.0.0_94e1b6d3ce6ea916847122712570e9ae:
+    resolution: {integrity: sha1-i5nR5LiySnYkcrRWeZICNhnLmOA=, tarball: eslint-plugin-prettier/download/eslint-plugin-prettier-4.0.0.tgz}
+    engines: {node: '>=6.0.0'}
+    peerDependencies:
+      eslint: '>=7.28.0'
+      eslint-config-prettier: '*'
+      prettier: '>=2.0.0'
+    peerDependenciesMeta:
+      eslint-config-prettier:
+        optional: true
+    dependencies:
+      eslint: 8.5.0
+      eslint-config-prettier: 8.3.0_eslint@8.5.0
+      prettier: 2.5.1
+      prettier-linter-helpers: 1.0.0
+    dev: true
+
   /eslint-plugin-vue/8.2.0_eslint@8.5.0:
     resolution: {integrity: sha512-cLIdTuOAMXyHeQ4drYKcZfoyzdwdBpH279X8/N0DgmotEI9yFKb5O/cAgoie/CkQZCH/MOmh0xw/KEfS90zY2A==, tarball: eslint-plugin-vue/download/eslint-plugin-vue-8.2.0.tgz}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1940,6 +1972,10 @@ packages:
     resolution: {integrity: sha1-On1WtVnWy8PrUSMlJE5hmmXGxSU=, tarball: fast-deep-equal/download/fast-deep-equal-3.1.3.tgz}
     dev: true
 
+  /fast-diff/1.2.0:
+    resolution: {integrity: sha1-c+4RmC2Gyq95WYKNUZz+kn+sXwM=, tarball: fast-diff/download/fast-diff-1.2.0.tgz}
+    dev: true
+
   /fast-glob/3.2.7:
     resolution: {integrity: sha1-/Wy3otfpqnp4RhEehaGW1rL3ZqE=, tarball: fast-glob/download/fast-glob-3.2.7.tgz}
     engines: {node: '>=8'}
@@ -2890,6 +2926,19 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
+  /prettier-linter-helpers/1.0.0:
+    resolution: {integrity: sha1-0j1B/hN1ZG3i0BBNNFSjAIgCz3s=, tarball: prettier-linter-helpers/download/prettier-linter-helpers-1.0.0.tgz}
+    engines: {node: '>=6.0.0'}
+    dependencies:
+      fast-diff: 1.2.0
+    dev: true
+
+  /prettier/2.5.1:
+    resolution: {integrity: sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==, tarball: prettier/download/prettier-2.5.1.tgz}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    dev: true
+
   /progress/2.0.3:
     resolution: {integrity: sha1-foz42PW48jnBvGi+tOt4Vn1XLvg=, tarball: progress/download/progress-2.0.3.tgz}
     engines: {node: '>=0.4.0'}

src/App.vue

@@ -1,42 +1,48 @@
 <script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
+  // This starter template is using Vue 3 <script setup> SFCs
+  // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
   import { AppRoute, NotFoundRoute, EnumPage } from '@/router/base';
   import { authRoutes } from '@/router/auth';
-  import { filterAuthHandle } from '@/router/utils'
+  import { filterAuthHandle } from '@/router/utils';
   import { AppStore } from '@/store/modules/app';
   import 'ant-design-vue/es/message/style';
-  const router = useRouter()
-  const route = useRoute()
-  const store = AppStore()
-  const isLogin = computed(() => store.isLogin)
-  watch(isLogin, (val) => {
-    if (![EnumPage.Login as string, EnumPage.Error as string].includes(route.path)) {
-      if (!val) {
-        router.push(EnumPage.Login)
-        store.updateLoading(false)
-      } else {
-        // 此处模拟接口请求获取权限列表
-        store.updateLoading(true)
-        setTimeout(() => {
-          const authFilterRoutes = filterAuthHandle([1], authRoutes)
-          console.log(authFilterRoutes);
-          const childrenRoutes = [...authFilterRoutes, ...AppRoute.children as []]
-          router.removeRoute(AppRoute.name as string)
-          router.addRoute({
-            ...AppRoute,
-            children: childrenRoutes
-          })
-          router.addRoute(NotFoundRoute)
-          store.updateLoading(false)
-          store.updateAuthRoutes(authFilterRoutes)
-          router.replace(route.fullPath)
-        }, 2e3);
+  const router = useRouter();
+  const route = useRoute();
+  const store = AppStore();
+  const isLogin = computed(() => store.isLogin);
+  const a = 1223;
+  console.log(a);
+  watch(
+    isLogin,
+    (val) => {
+      if (![EnumPage.Login as string, EnumPage.Error as string].includes(route.path)) {
+        if (!val) {
+          router.push(EnumPage.Login);
+          store.updateLoading(false);
+        } else {
+          // 此处模拟接口请求获取权限列表
+          store.updateLoading(true);
+          setTimeout(() => {
+            const authFilterRoutes = filterAuthHandle([1], authRoutes);
+            console.log(authFilterRoutes);
+            const childrenRoutes = [...authFilterRoutes, ...(AppRoute.children as [])];
+            router.removeRoute(AppRoute.name as string);
+            router.addRoute({
+              ...AppRoute,
+              children: childrenRoutes,
+            });
+            router.addRoute(NotFoundRoute);
+            store.updateLoading(false);
+            store.updateAuthRoutes(authFilterRoutes);
+            router.replace(route.fullPath);
+          }, 2e3);
+        }
       }
-    }
-  }, {
-    immediate: true
-  })
+    },
+    {
+      immediate: true,
+    },
+  );
 </script>
 
 <template>
@@ -46,6 +52,6 @@
 </template>
 
 <style>
-@import './style/index.css';
-@import './style/global.css';
+  @import './style/index.css';
+  @import './style/global.css';
 </style>

src/auto-imports.d.ts

@@ -1,56 +1,56 @@
 // Generated by 'unplugin-auto-import'
 // We suggest you to commit this file into source control
 declare global {
-  const computed: typeof import('vue')['computed']
-  const createApp: typeof import('vue')['createApp']
-  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: typeof import('vue')['effectScope']
-  const EffectScope: typeof import('vue')['EffectScope']
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: typeof import('vue')['h']
-  const inject: typeof import('vue')['inject']
-  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: typeof import('vue')['isRef']
-  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: typeof import('vue')['onUpdated']
-  const provide: typeof import('vue')['provide']
-  const reactive: typeof import('vue')['reactive']
-  const readonly: typeof import('vue')['readonly']
-  const ref: typeof import('vue')['ref']
-  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: typeof import('vue')['toRaw']
-  const toRef: typeof import('vue')['toRef']
-  const toRefs: typeof import('vue')['toRefs']
-  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: typeof import('vue')['unref']
-  const useAttrs: typeof import('vue')['useAttrs']
-  const useClipboard: typeof import('@vueuse/core')['useClipboard']
-  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: typeof import('vue')['useCssVars']
-  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
-  const useRoute: typeof import('vue-router')['useRoute']
-  const useRouter: typeof import('vue-router')['useRouter']
-  const useSlots: typeof import('vue')['useSlots']
-  const watch: typeof import('vue')['watch']
-  const watchEffect: typeof import('vue')['watchEffect']
+  const computed: typeof import('vue')['computed'];
+  const createApp: typeof import('vue')['createApp'];
+  const customRef: typeof import('vue')['customRef'];
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent'];
+  const defineComponent: typeof import('vue')['defineComponent'];
+  const effectScope: typeof import('vue')['effectScope'];
+  const EffectScope: typeof import('vue')['EffectScope'];
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance'];
+  const getCurrentScope: typeof import('vue')['getCurrentScope'];
+  const h: typeof import('vue')['h'];
+  const inject: typeof import('vue')['inject'];
+  const isReadonly: typeof import('vue')['isReadonly'];
+  const isRef: typeof import('vue')['isRef'];
+  const markRaw: typeof import('vue')['markRaw'];
+  const nextTick: typeof import('vue')['nextTick'];
+  const onActivated: typeof import('vue')['onActivated'];
+  const onBeforeMount: typeof import('vue')['onBeforeMount'];
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount'];
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate'];
+  const onDeactivated: typeof import('vue')['onDeactivated'];
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured'];
+  const onMounted: typeof import('vue')['onMounted'];
+  const onRenderTracked: typeof import('vue')['onRenderTracked'];
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered'];
+  const onScopeDispose: typeof import('vue')['onScopeDispose'];
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch'];
+  const onUnmounted: typeof import('vue')['onUnmounted'];
+  const onUpdated: typeof import('vue')['onUpdated'];
+  const provide: typeof import('vue')['provide'];
+  const reactive: typeof import('vue')['reactive'];
+  const readonly: typeof import('vue')['readonly'];
+  const ref: typeof import('vue')['ref'];
+  const resolveComponent: typeof import('vue')['resolveComponent'];
+  const shallowReactive: typeof import('vue')['shallowReactive'];
+  const shallowReadonly: typeof import('vue')['shallowReadonly'];
+  const shallowRef: typeof import('vue')['shallowRef'];
+  const toRaw: typeof import('vue')['toRaw'];
+  const toRef: typeof import('vue')['toRef'];
+  const toRefs: typeof import('vue')['toRefs'];
+  const triggerRef: typeof import('vue')['triggerRef'];
+  const unref: typeof import('vue')['unref'];
+  const useAttrs: typeof import('vue')['useAttrs'];
+  const useClipboard: typeof import('@vueuse/core')['useClipboard'];
+  const useCssModule: typeof import('vue')['useCssModule'];
+  const useCssVars: typeof import('vue')['useCssVars'];
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage'];
+  const useRoute: typeof import('vue-router')['useRoute'];
+  const useRouter: typeof import('vue-router')['useRouter'];
+  const useSlots: typeof import('vue')['useSlots'];
+  const watch: typeof import('vue')['watch'];
+  const watchEffect: typeof import('vue')['watchEffect'];
 }
-export {}
+export {};

src/components.d.ts

@@ -4,9 +4,22 @@
 
 declare module 'vue' {
   export interface GlobalComponents {
-    HelloWorld: typeof import('./components/HelloWorld.vue')['default']
-    InitLoading: typeof import('./components/InitLoading/index.vue')['default']
+    AAvatar: typeof import('ant-design-vue/es')['Avatar'];
+    AButton: typeof import('ant-design-vue/es')['Button'];
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown'];
+    ALayout: typeof import('ant-design-vue/es')['Layout'];
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent'];
+    ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter'];
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader'];
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider'];
+    AMenu: typeof import('ant-design-vue/es')['Menu'];
+    AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider'];
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem'];
+    ASpin: typeof import('ant-design-vue/es')['Spin'];
+    HelloWorld: typeof import('./components/HelloWorld.vue')['default'];
+    InitLoading: typeof import('./components/InitLoading/index.vue')['default'];
+    UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined'];
   }
 }
 
-export { }
+export {};

src/components/HelloWorld.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
+  defineProps<{ msg: string }>();
 
-defineProps<{ msg: string }>()
-
-const count = ref(0)
+  const count = ref(0);
 </script>
 
 <template>
@@ -10,39 +9,20 @@ const count = ref(0)
 
   <p>
     Recommended IDE setup:
-    <a
-      href="https://code.visualstudio.com/"
-      target="_blank"
-    >VSCode</a>
+    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
     +
-    <a
-      href="https://github.com/johnsoncodehk/volar"
-      target="_blank"
-    >Volar</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://vitejs.dev/guide/features.html" target="_blank"> Vite Docs </a>
     |
-    <a
-      href="https://v3.vuejs.org/"
-      target="_blank"
-    >Vue 3 Docs</a>
+    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
   </p>
 
-  <button
-    type="button"
-    @click="count++"
-  >
-    count is: {{ count }}
-  </button>
+  <button type="button" @click="count++"> count is: {{ count }} </button>
   <p>
     Edit
     <code>components/HelloWorld.vue</code> to test hot module replacement.
@@ -50,19 +30,19 @@ const count = ref(0)
 </template>
 
 <style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
+  a {
+    color: #42b983;
+  }
+
+  label {
+    margin: 0 0.5em;
+    font-weight: bold;
+  }
+
+  code {
+    background-color: #eee;
+    padding: 2px 4px;
+    border-radius: 4px;
+    color: #304455;
+  }
 </style>

src/components/InitLoading/index.vue

@@ -1,10 +1,7 @@
 <template>
   <template v-if="isLoading">
     <div class="init-loading">
-      <a-spin
-        tip="请稍等，加载中..."
-        size="large"
-      />
+      <a-spin tip="请稍等，加载中..." size="large" />
     </div>
   </template>
   <template v-else>
@@ -13,16 +10,16 @@
 </template>
 <script lang="ts" setup>
   import { AppStore } from '@/store/modules/app';
-  const store = AppStore()
+  const store = AppStore();
   const isLoading = computed(() => {
-    return store.isLoading
-  })
+    return store.isLoading;
+  });
 </script>
 <style lang="less" scoped>
-.init-loading {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
+  .init-loading {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 </style>

src/env.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import { DefineComponent } from 'vue'
+  import { DefineComponent } from 'vue';
   // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 }

src/layouts/app/Footer.vue

@@ -1,14 +1,12 @@
 <template>
   <a-layout-footer>
-    <p class="foot-text">
-      Vite+Vue3+Typescript Template &copy;2021 Created by zhusiqing
-    </p>
+    <p class="foot-text"> Vite+Vue3+Typescript Template &copy;2021 Created by zhusiqing </p>
   </a-layout-footer>
 </template>
 
 <style scoped>
-.foot-text {
-  margin: 0;
-  text-align: center;
-}
+  .foot-text {
+    margin: 0;
+    text-align: center;
+  }
 </style>

src/layouts/app/Header.vue

@@ -2,10 +2,7 @@
   <a-layout-header class="header">
     <div class="left">
       <ul class="navs">
-        <li
-          v-for="nav in navs"
-          :key="nav.path"
-        >
+        <li v-for="nav in navs" :key="nav.path">
           <RouterLink :to="nav.path">
             {{ nav.title }}
           </RouterLink>
@@ -36,81 +33,80 @@
   </a-layout-header>
 </template>
 <script lang="ts" setup>
-import { message } from 'ant-design-vue';
-import { AppStore } from '@/store/modules/app'
-import { EnumPage } from '@/router/base';
+  import { message } from 'ant-design-vue';
+  import { AppStore } from '@/store/modules/app';
+  import { EnumPage } from '@/router/base';
 
-const store = AppStore()
-const router = useRouter()
-const navs = ref([
-  {
-    path: '/',
-    title: '首页',
-  },
-  {
-    path: '/login',
-    title: '登录页'
-  },
-  {
-    path: '/error',
-    title: '错误页'
+  const store = AppStore();
+  const router = useRouter();
+  const navs = ref([
+    {
+      path: '/',
+      title: '首页',
+    },
+    {
+      path: '/login',
+      title: '登录页',
+    },
+    {
+      path: '/error',
+      title: '错误页',
+    },
+  ]);
+  enum EnumUserDropdown {
+    center = 1,
+    logout = 2,
   }
-])
-enum EnumUserDropdown {
-  center = 1,
-  logout = 2
-}
-interface menuClickParams {
-  key: number
-}
-
-const menuClickHandle = ({ key }: menuClickParams) => {
-  switch (key) {
-    case EnumUserDropdown.center:
-      message.info('个人中心')
-      break
-    case EnumUserDropdown.logout:
-      message.success('退出登录')
-      router.push(EnumPage.Login).then(() => store.updateIsLogin(false))
-      break
-    default:
-      break;
+  interface menuClickParams {
+    key: number;
   }
-}
+
+  const menuClickHandle = ({ key }: menuClickParams) => {
+    switch (key) {
+      case EnumUserDropdown.center:
+        message.info('个人中心');
+        break;
+      case EnumUserDropdown.logout:
+        message.success('退出登录');
+        router.push(EnumPage.Login).then(() => store.updateIsLogin(false));
+        break;
+      default:
+        break;
+    }
+  };
 </script>
 <style lang="less" scoped>
-@color: rgba(255, 255, 255, 0.65);
-@color-hover: var(--color-primary);
-.header {
-  display: flex;
-  justify-content: space-between;
-  .right {
-    a {
-      padding: 5px 0;
-      color: @color;
-      &:hover {
-        color: @color-hover;
+  @color: rgba(255, 255, 255, 0.65);
+  @color-hover: var(--color-primary);
+  .header {
+    display: flex;
+    justify-content: space-between;
+    .right {
+      a {
+        padding: 5px 0;
+        color: @color;
+        &:hover {
+          color: @color-hover;
+        }
+      }
+      .username {
+        margin-left: 10px;
       }
-    }
-    .username {
-      margin-left: 10px;
     }
   }
-}
 
-.navs {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  a {
-    padding: 0 10px;
-    text-decoration: none;
-    color: var(--color-primary);
-  }
-  a:hover {
-    text-decoration: underline;
-    color: var(--color-a-active);
+  .navs {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    a {
+      padding: 0 10px;
+      text-decoration: none;
+      color: var(--color-primary);
+    }
+    a:hover {
+      text-decoration: underline;
+      color: var(--color-a-active);
+    }
   }
-}
-
 </style>

src/layouts/app/Sider.vue

@@ -1,26 +1,14 @@
 <template>
   <!-- LayoutSider -->
-  <a-layout-sider
-    breakpoint="lg"
-    collapsed-width="80"
-  >
-    <div
-      class="logo"
-      @click="toHomeHandle"
-    >
-      LOGO
-    </div>
-    <a-menu
-      v-model:selectedKeys="selectedKeys"
-      theme="dark"
-      mode="inline"
-    >
+  <a-layout-sider breakpoint="lg" collapsed-width="80">
+    <div class="logo" @click="toHomeHandle"> LOGO </div>
+    <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
       <component
-        :is="menu.children?.length ? SubMenu: MenuItem"
+        :is="menu.children?.length ? SubMenu : MenuItem"
         v-for="menu in menus"
         :key="menu.name"
         :title="menu.meta?.title || menu.name"
-        @click="menu.children?.length ? null :toPageHandle(menu.name)"
+        @click="menu.children?.length ? null : toPageHandle(menu.name)"
       >
         <template #icon>
           <component :is="getIcon(menu.meta?.icon)" />
@@ -43,43 +31,43 @@
 </template>
 <script lang="ts" setup>
   import { AppStore } from '@/store/modules/app';
-  import type { RouteRecordName, RouteLocationNormalized, RouteMeta } from 'vue-router'
+  import type { RouteRecordName, RouteLocationNormalized } from 'vue-router';
   import { MenuItem, SubMenu } from 'ant-design-vue';
   import * as Icon from '@ant-design/icons-vue';
 
-  const router = useRouter()
-  const route = useRoute()
-  const store = AppStore()
-  const selectedKeys = ref<string[]>([])
-  const menus = computed(() => store.authRoutes)
+  const router = useRouter();
+  const route = useRoute();
+  const store = AppStore();
+  const selectedKeys = ref<string[]>([]);
+  const menus = computed(() => store.authRoutes);
   const matchRouteHandle = (to: RouteLocationNormalized) => {
-    menus.value.forEach(el => {
+    menus.value.forEach((el) => {
       if (el.name === to.name) {
-        selectedKeys.value = [to.name as string]
+        selectedKeys.value = [to.name as string];
       }
-    })
-  }
-  matchRouteHandle(route)
+    });
+  };
+  matchRouteHandle(route);
   const toHomeHandle = () => {
-    router.push('/')
-  }
+    router.push('/');
+  };
   const toPageHandle = (name: RouteRecordName | undefined) => {
-    router.push({ name })
-  }
+    router.push({ name });
+  };
   const getIcon = (name: unknown) => {
     // 这里将字符串假定为UserOutlined来通过Icon的类型校验
-    return Icon[name as 'UserOutlined'] || 'AppstoreOutlined'
-  }
+    return Icon[name as 'UserOutlined'] || 'AppstoreOutlined';
+  };
 </script>
 
 <style lang="less" scoped>
-.logo {
-  margin: 16px;
-  height: 32px;
-  line-height: 32px;
-  text-align: center;
-  background-color: #fff;
-  font-weight: 600;
-  cursor: pointer;
-}
+  .logo {
+    margin: 16px;
+    height: 32px;
+    line-height: 32px;
+    text-align: center;
+    background-color: #fff;
+    font-weight: 600;
+    cursor: pointer;
+  }
 </style>

src/layouts/app/index.vue

@@ -13,26 +13,26 @@
   </a-layout>
 </template>
 <script lang="ts" setup>
-import AppHeader from './Header.vue';
-import AppSider from './Sider.vue'
-import AppFooter from './Footer.vue';
+  import AppHeader from './Header.vue';
+  import AppSider from './Sider.vue';
+  import AppFooter from './Footer.vue';
 </script>
 
 <style lang="less">
-.layout {
-  height: 100%;
-  background-color: #f0f2f5;
-  .layout-main {
+  .layout {
+    height: 100%;
     background-color: #f0f2f5;
+    .layout-main {
+      background-color: #f0f2f5;
+    }
+    .layout-content {
+      overflow: auto;
+      padding: 24px;
+      padding-bottom: 0;
+    }
+    .content {
+      min-height: 100%;
+      background-color: #fff;
+    }
   }
-  .layout-content {
-    overflow: auto;
-    padding: 24px;
-    padding-bottom: 0;
-  }
-  .content {
-    min-height: 100%;
-    background-color: #fff;
-  }
-}
 </style>

src/layouts/default/index.vue

@@ -1,6 +1,4 @@
 <template>
   <RouterView />
 </template>
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>

src/main.ts

@@ -1,13 +1,13 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import { setupRouter } from './router'
-import { setupStore } from './store'
+import { createApp } from 'vue';
+import App from './App.vue';
+import { setupRouter } from './router';
+import { setupStore } from './store';
 
 function initApp() {
-  const app = createApp(App)
-  setupStore(app)
-  setupRouter(app)
-  app.mount('#app')
+  const app = createApp(App);
+  setupStore(app);
+  setupRouter(app);
+  app.mount('#app');
 }
 
-initApp()
+initApp();

src/pages/Common/index.vue

@@ -1,11 +1,8 @@
 <template>
-  <div class="common">
-    通用页面
-  </div>
+  <div class="common"> 通用页面 </div>
 </template>
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 <style scoped>
-.common{}
+  .common {
+  }
 </style>

src/pages/Error/index.vue

@@ -2,32 +2,25 @@
   <div class="error">
     error page
     <div>
-      <a-button
-        type="primary"
-        @click="toBackHandle"
-      >
-        返回
-      </a-button>
+      <a-button type="primary" @click="toBackHandle"> 返回 </a-button>
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-const route = useRoute()
-const router = useRouter()
-const text = ref('error page')
-const { redirectedFrom } = route
-if (redirectedFrom?.name === 'NotFound') {
-  text.value = '404 page'
-}
-const toBackHandle = () => {
-  // 这里判断大于2是因为window.open跳转的是长度是1，新开标签页再输入地址是长度是2
-  if (history.length > 2) {
-    router.back()
-  } else {
-    window.location.href = '/'
+  const route = useRoute();
+  const router = useRouter();
+  const text = ref('error page');
+  const { redirectedFrom } = route;
+  if (redirectedFrom?.name === 'NotFound') {
+    text.value = '404 page';
   }
-}
+  const toBackHandle = () => {
+    // 这里判断大于2是因为window.open跳转的是长度是1，新开标签页再输入地址是长度是2
+    if (history.length > 2) {
+      router.back();
+    } else {
+      window.location.href = '/';
+    }
+  };
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>

src/pages/Home/index.vue

@@ -2,33 +2,27 @@
   <div class="home">
     home page
     <p>{{ str }}</p>
-    <a-button
-      type="primary"
-      @click="copyHandle"
-    >
-      复制
-    </a-button>
+    <a-button type="primary" @click="copyHandle"> 复制 </a-button>
   </div>
 </template>
 <script lang="ts" setup>
-const str = ref('这是一段可以点击按钮复制的文字')
-const { text, copy, copied, isSupported } = useClipboard({ source: str })
-const copyHandle = () => {
-  if (!isSupported) {
-    alert('不支持复制')
-    return
-  }
-  copy()
-}
-watch(copied, (v) => {
-  if (v) {
-    alert(`复制成功，内容为：${text.value}`)
-  }
-})
-
+  const str = ref('这是一段可以点击按钮复制的文字');
+  const { text, copy, copied, isSupported } = useClipboard({ source: str });
+  const copyHandle = () => {
+    if (!isSupported) {
+      alert('不支持复制');
+      return;
+    }
+    copy();
+  };
+  watch(copied, (v) => {
+    if (v) {
+      alert(`复制成功，内容为：${text.value}`);
+    }
+  });
 </script>
 <style scoped>
-.home {
-  font-size: 46px;
-}
+  .home {
+    font-size: 46px;
+  }
 </style>

src/pages/Login/index.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="login">
     <div class="form-box">
-      <div class="title">
-        后台管理系统
-      </div>
+      <div class="title"> 后台管理系统 </div>
       <a-form
         class="form"
         :model="loginState"
@@ -11,24 +9,14 @@
         @finish="finishHandle"
         @finishFailed="finishFailedHandle"
       >
-        <a-form-item
-          name="username"
-          class="form-item"
-        >
-          <a-input
-            v-model:value="loginState.username"
-            placeholder="用户名"
-            size="large"
-          >
+        <a-form-item name="username" class="form-item">
+          <a-input v-model:value="loginState.username" placeholder="用户名" size="large">
             <template #prefix>
               <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
             </template>
           </a-input>
         </a-form-item>
-        <a-form-item
-          name="password"
-          class="form-item"
-        >
+        <a-form-item name="password" class="form-item">
           <a-input
             v-model:value="loginState.password"
             type="password"
@@ -41,12 +29,7 @@
           </a-input>
         </a-form-item>
         <a-form-item>
-          <a-button
-            class="form-submit"
-            type="primary"
-            html-type="submit"
-            size="large"
-          >
+          <a-button class="form-submit" type="primary" html-type="submit" size="large">
             登录
           </a-button>
         </a-form-item>
@@ -55,88 +38,88 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { EnumPage } from '@/router/base';
-import { message } from 'ant-design-vue'
-import type { UnwrapRef } from 'vue';
-import type { FormProps } from 'ant-design-vue';
-import { AppStore } from '@/store/modules/app'
-
-const router = useRouter()
-const store = AppStore()
-interface loginState {
-  username: string
-  password: string
-}
-const loginState: UnwrapRef<loginState> = reactive({
-  username: '',
-  password: ''
-})
-const rules = {
-  username: [
-    {
-      required: true,
-      message: '请输入用户名',
-      whitespace: true,
-      trigger: 'blur'
-    }
-  ],
-  password: [
-    {
-      required: true,
-      message: '请输入密码',
-      whitespace: true,
-      trigger: 'blur'
-    }
-  ]
-}
+  import { EnumPage } from '@/router/base';
+  import { message } from 'ant-design-vue';
+  import type { UnwrapRef } from 'vue';
+  import type { FormProps } from 'ant-design-vue';
+  import { AppStore } from '@/store/modules/app';
 
-const finishHandle: FormProps['onFinish'] = (values: loginState) => {
-  const { username, password } = values
-  if (username === 'admin' && password === '123') {
-    router.push(EnumPage.App).then(() => store.updateIsLogin(true))
-  } else {
-    message.error('用户名或密码错误')
+  const router = useRouter();
+  const store = AppStore();
+  interface loginState {
+    username: string;
+    password: string;
   }
-}
-const finishFailedHandle: FormProps['onFinishFailed'] = (errors) => {
-  console.log(errors);
-}
+  const loginState: UnwrapRef<loginState> = reactive({
+    username: '',
+    password: '',
+  });
+  const rules = {
+    username: [
+      {
+        required: true,
+        message: '请输入用户名',
+        whitespace: true,
+        trigger: 'blur',
+      },
+    ],
+    password: [
+      {
+        required: true,
+        message: '请输入密码',
+        whitespace: true,
+        trigger: 'blur',
+      },
+    ],
+  };
+
+  const finishHandle: FormProps['onFinish'] = (values: loginState) => {
+    const { username, password } = values;
+    if (username === 'admin' && password === '123') {
+      router.push(EnumPage.App).then(() => store.updateIsLogin(true));
+    } else {
+      message.error('用户名或密码错误');
+    }
+  };
+  const finishFailedHandle: FormProps['onFinishFailed'] = (errors) => {
+    console.log(errors);
+  };
 </script>
 <style lang="less" scoped>
-.login {
-  height: 100%;
-  background: url("/images/login_bg.jpeg") center/cover no-repeat;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  .form-box {
-    background-color: rgba(255, 255, 255, 0.8);
-    height: 460px;
-    width: 400px;
-    border-radius: 12px;
-    padding: 60px 40px;
-    .title {
-      text-align: center;
-      font-size: 26px;
-      font-weight: 500;
-    }
-    .form {
-      margin-top: 40px;
-      .form-item {
-        margin-bottom: 40px;
-      }
-      .form-submit {
-        width: 180px;
-      }
-      // 修复表单错误提示出现时的显示异常
-      :deep(.ant-form-item-with-help) {
-        margin-bottom: 16px;
-      }
-      // 登录按钮居中
-      :deep(.ant-form-item-control-input-content) {
+  .login {
+    height: 100%;
+    background: url('/images/login_bg.jpeg') center/cover no-repeat;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .form-box {
+      background-color: rgba(255, 255, 255, 0.8);
+      height: 460px;
+      width: 400px;
+      border-radius: 12px;
+      padding: 60px 40px;
+      .title {
         text-align: center;
+        font-size: 26px;
+        font-weight: 500;
+      }
+      .form {
+        margin-top: 40px;
+        .form-item {
+          margin-bottom: 40px;
+        }
+        .form-submit {
+          width: 180px;
+        }
+        // 修复表单错误提示出现时的显示异常
+        :deep(.ant-form-item-with-help) {
+          margin-bottom: 16px;
+        }
+        // 登录按钮居中
+        :deep(.ant-form-item-control-input-content) {
+          text-align: center;
+        }
       }
     }
   }
-}
 </style>

src/pages/System/Role/index.vue

@@ -1,10 +1,8 @@
 <template>
-  <div class="system-role">
-    系统-角色页面
-  </div>
+  <div class="system-role"> 系统-角色页面 </div>
 </template>
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>
 <style scoped>
-.system-role{}
+  .system-role {
+  }
 </style>

src/pages/System/User/index.vue

@@ -1,11 +1,8 @@
 <template>
-  <div class="system-user">
-    系统-用户页面
-  </div>
+  <div class="system-user"> 系统-用户页面 </div>
 </template>
-<script lang="ts" setup>
-
-</script>
+<script lang="ts" setup></script>
 <style scoped>
-.system-user{}
+  .system-user {
+  }
 </style>

src/pages/System/index.vue

@@ -1,6 +1,4 @@
 <template>
   <RouterView />
 </template>
-<script lang="ts" setup>
-</script>
-
+<script lang="ts" setup></script>

src/pages/Test/Test.vue

@@ -2,12 +2,10 @@
   <div>{{ text }}</div>
 </template>
 <script lang="ts" setup>
-  const route = useRoute()
-  const text = ref(route.name)
+  const route = useRoute();
+  const text = ref(route.name);
   onUpdated(() => {
-    text.value = route.name
-  })
+    text.value = route.name;
+  });
 </script>
-<style scoped>
-
-</style>
+<style scoped></style>

src/pages/Test/index.vue

@@ -1,5 +1,4 @@
 <template>
   <RouterView />
 </template>
-<script lang="ts" setup>
-</script>
+<script lang="ts" setup></script>

src/router/auth.ts

@@ -1,6 +1,6 @@
 import type { RouteRecordRaw } from 'vue-router';
-import TestPage from '@/pages/Test/index.vue'
-import Test from '@/pages/Test/Test.vue'
+import TestPage from '@/pages/Test/index.vue';
+import Test from '@/pages/Test/Test.vue';
 import SystemPage from '@/pages/System/index.vue';
 
 export const authRoutes: RouteRecordRaw[] = [
@@ -11,7 +11,7 @@ export const authRoutes: RouteRecordRaw[] = [
     redirect: '/app/system/user',
     meta: {
       icon: 'SettingOutlined',
-      title: '系统设置'
+      title: '系统设置',
     },
     children: [
       {
@@ -20,8 +20,8 @@ export const authRoutes: RouteRecordRaw[] = [
         component: () => import('@/pages/System/User/index.vue'),
         meta: {
           auth: 1,
-          title: '用户管理'
-        }
+          title: '用户管理',
+        },
       },
       {
         path: 'role',
@@ -29,11 +29,10 @@ export const authRoutes: RouteRecordRaw[] = [
         component: () => import('@/pages/System/Role/index.vue'),
         meta: {
           auth: 1,
-          title: '角色管理'
-        }
-      }
-    ]
-
+          title: '角色管理',
+        },
+      },
+    ],
   },
   {
     path: 'common',
@@ -41,8 +40,8 @@ export const authRoutes: RouteRecordRaw[] = [
     component: () => import('@/pages/Common/index.vue'),
     meta: {
       icon: 'AppstoreOutlined',
-      title: '通用页面'
-    }
+      title: '通用页面',
+    },
   },
   {
     path: 'test',
@@ -51,7 +50,7 @@ export const authRoutes: RouteRecordRaw[] = [
     redirect: '/test/1',
     meta: {
       icon: 'ApiOutlined',
-      title: '测试路由权限'
+      title: '测试路由权限',
     },
     children: [
       {
@@ -59,33 +58,33 @@ export const authRoutes: RouteRecordRaw[] = [
         name: 'Test1',
         component: Test,
         meta: {
-          auth: 1
-        }
+          auth: 1,
+        },
       },
       {
         path: '2',
         name: 'Test2',
         component: () => import('@/pages/Test/Test.vue'),
         meta: {
-          auth: 1
-        }
+          auth: 1,
+        },
       },
       {
         path: '3',
         name: 'Test3',
         component: Test,
         meta: {
-          auth: 2
-        }
+          auth: 2,
+        },
       },
       {
         path: '4',
         name: 'Test4',
         component: () => import('@/pages/Test/Test.vue'),
         meta: {
-          auth: 2
-        }
-      }
-    ]
-  }
-]
+          auth: 2,
+        },
+      },
+    ],
+  },
+];

src/router/base.ts

@@ -5,13 +5,13 @@ import AppLayout from '@/layouts/app/index.vue';
 export enum EnumPage {
   App = '/app',
   Login = '/login',
-  Error = '/error'
+  Error = '/error',
 }
 export const RootRoute: RouteRecordRaw = {
   path: '/',
   name: 'Root',
-  redirect: EnumPage.App
-}
+  redirect: EnumPage.App,
+};
 
 export const AppRoute: RouteRecordRaw = {
   path: EnumPage.App,
@@ -24,39 +24,34 @@ export const AppRoute: RouteRecordRaw = {
       name: 'Home',
       component: () => import('@/pages/Home/index.vue'),
       meta: {
-        title: '首页'
-      }
-    }
-  ]
-}
+        title: '首页',
+      },
+    },
+  ],
+};
 
 export const LoginRoute: RouteRecordRaw = {
   path: EnumPage.Login,
   name: 'Login',
   component: () => import('@/pages/Login/index.vue'),
   meta: {
-    title: '登录页'
-  }
-}
+    title: '登录页',
+  },
+};
 
 export const ErrorRoute: RouteRecordRaw = {
   path: EnumPage.Error,
   name: 'Error',
   component: ErrorPage,
   meta: {
-    title: '异常页'
-  }
-}
+    title: '异常页',
+  },
+};
 
 export const NotFoundRoute: RouteRecordRaw = {
   path: '/:notFound(.*)*',
   name: 'NotFound',
-  redirect: '/error'
-}
+  redirect: '/error',
+};
 
-export const baseRoutes: RouteRecordRaw[] = [
-  RootRoute,
-  AppRoute,
-  LoginRoute,
-  ErrorRoute
-]
+export const baseRoutes: RouteRecordRaw[] = [RootRoute, AppRoute, LoginRoute, ErrorRoute];

src/router/index.ts

@@ -10,17 +10,17 @@ export const router = createRouter({
   strict: true,
   scrollBehavior: () => ({
     left: 0,
-    top: 0
-  })
-})
+    top: 0,
+  }),
+});
 
 export const setupRouter = (app: App) => {
-  app.use(router)
+  app.use(router);
   router.beforeEach((to, from, next) => {
-    nProgress.start()
-    next()
-  })
+    nProgress.start();
+    next();
+  });
   router.afterEach(() => {
-    nProgress.done()
-  })
-}
+    nProgress.done();
+  });
+};

src/router/utils.ts

@@ -1,18 +1,18 @@
 import type { RouteRecordRaw } from 'vue-router';
 
 // 根据权限列表返回过滤后的路由
-export const filterAuthHandle = (authList: (string|number)[], routes: RouteRecordRaw[]) => {
-  return routes.filter(el => {
+export const filterAuthHandle = (authList: (string | number)[], routes: RouteRecordRaw[]) => {
+  return routes.filter((el) => {
     if (el.children?.length) {
-      el.children = filterAuthHandle(authList, el.children)
-      return true
+      el.children = filterAuthHandle(authList, el.children);
+      return true;
     } else {
       if (authList.includes(el.meta?.auth as string)) {
-        return true
+        return true;
       } else if (!el.meta?.hasOwnProperty('auth')) {
-        return true
+        return true;
       }
-      return false
+      return false;
     }
-  })
-}
+  });
+};

src/service/index.ts

@@ -1,14 +1,14 @@
 import { http } from '@/utils/request';
-import { API_PREFIX } from '../../vite/config'
+import { API_PREFIX } from '../../vite/config';
 interface InterfaceUrl {
-  [key: string]: string
+  [key: string]: string;
 }
 const url: InterfaceUrl = {
-  getUserInfo: '/getUserInfo'
-}
-Object.keys(url).map(key => {
-  url[key] = `${API_PREFIX}${url[key]}`
-})
+  getUserInfo: '/getUserInfo',
+};
+Object.keys(url).map((key) => {
+  url[key] = `${API_PREFIX}${url[key]}`;
+});
 console.log('api >>>', url);
 
-export const getUserInfo = () => http.get<InterFaceUserInfo>(url.getUserInfo)
+export const getUserInfo = () => http.get<InterFaceUserInfo>(url.getUserInfo);

src/store/index.ts

@@ -1,8 +1,8 @@
-import type { App } from 'vue'
+import type { App } from 'vue';
 import { createPinia } from 'pinia';
 
-export const store = createPinia()
+export const store = createPinia();
 
 export const setupStore = (app: App) => {
-  app.use(store)
-}
+  app.use(store);
+};

src/store/modules/app.ts

@@ -5,17 +5,17 @@ export const AppStore = defineStore('app', {
   state: () => ({
     isLoading: true,
     authRoutes: [] as RouteRecordRaw[],
-    isLogin: useLocalStorage('login', false)
+    isLogin: useLocalStorage('login', false),
   }),
   actions: {
     updateLoading(isLoading = false) {
-      this.isLoading = isLoading
+      this.isLoading = isLoading;
     },
     updateAuthRoutes(routes: RouteRecordRaw[]) {
-      this.authRoutes = routes
+      this.authRoutes = routes;
     },
     updateIsLogin(isLogin = false) {
-      this.isLogin = isLogin
-    }
-  }
-})
+      this.isLogin = isLogin;
+    },
+  },
+});

src/types/index.d.ts

@@ -1,6 +1,6 @@
 declare interface InterFaceUserInfo {
-  name: string
-  age: number
-  job: string
-  auth: string[]
+  name: string;
+  age: number;
+  job: string;
+  auth: string[];
 }

src/utils/request/Axios.ts

@@ -1,68 +1,67 @@
-import
-  axios,
-  {
-    AxiosInstance,
-    AxiosRequestConfig,
-    AxiosError,
-    AxiosResponse
-  }
-from 'axios';
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
 
 interface Result<T = any> {
   code: number;
-  success: boolean
+  success: boolean;
   message: string;
   result: T;
 }
 export class AppAxios {
-  private instance: AxiosInstance
-  private readonly options: AxiosRequestConfig
+  private instance: AxiosInstance;
+  private readonly options: AxiosRequestConfig;
   constructor(options: AxiosRequestConfig) {
-    this.instance = axios.create(options)
-    this.options = options
-    this.setupInterceptors()
+    this.instance = axios.create(options);
+    this.options = options;
+    this.setupInterceptors();
   }
   private setupInterceptors() {
-    this.interceptorsRequest()
-    this.interceptorsResponse()
+    this.interceptorsRequest();
+    this.interceptorsResponse();
   }
   private interceptorsRequest() {
-    this.instance.interceptors.request.use(config => {
-      return config
-    }, error => {
-      return Promise.reject(error)
-    })
+    this.instance.interceptors.request.use(
+      (config) => {
+        return config;
+      },
+      (error) => {
+        return Promise.reject(error);
+      },
+    );
   }
   private interceptorsResponse() {
-    this.instance.interceptors.response.use(response => {
-      return response
-    }, error => {
-      return Promise.reject(error)
-    })
+    this.instance.interceptors.response.use(
+      (response) => {
+        return response;
+      },
+      (error) => {
+        return Promise.reject(error);
+      },
+    );
   }
   request<T = any>(options: AxiosRequestConfig): Promise<Result<T>> {
     return new Promise((resolve, reject) => {
-      this.instance.request<any, AxiosResponse<Result>>(options)
+      this.instance
+        .request<any, AxiosResponse<Result>>(options)
         .then((res: AxiosResponse<Result>) => {
-          res.data.success = res.data.code === 200
-          resolve(res.data)
+          res.data.success = res.data.code === 200;
+          resolve(res.data);
         })
         .catch((err: Error | AxiosError) => {
           console.error(err);
-          reject(err)
-        })
-    })
+          reject(err);
+        });
+    });
   }
   get<T = any>(url: string, data?: any, options?: AxiosRequestConfig): Promise<Result<T>> {
-    return this.request({ ...options, method: 'GET', url, params: data })
+    return this.request({ ...options, method: 'GET', url, params: data });
   }
   delete<T = any>(url: string, data?: any, options?: AxiosRequestConfig): Promise<Result<T>> {
-    return this.request({ ...options, method: 'DELETE', url, params: data })
+    return this.request({ ...options, method: 'DELETE', url, params: data });
   }
   post<T = any>(url: string, data?: any, options?: AxiosRequestConfig): Promise<Result<T>> {
-    return this.request({ ...options, method: 'POST', url, data })
+    return this.request({ ...options, method: 'POST', url, data });
   }
   put<T = any>(url: string, data?: any, options?: AxiosRequestConfig): Promise<Result<T>> {
-    return this.request({ ...options, method: 'PUT', url, data })
+    return this.request({ ...options, method: 'PUT', url, data });
   }
 }

src/utils/request/index.ts

@@ -1,9 +1,9 @@
 import { AppAxios } from './Axios';
-import { API_BASE_URL } from '../../../vite/config'
+import { API_BASE_URL } from '../../../vite/config';
 
-const isBuild = process.env.NODE_ENV === 'production'
+const isBuild = process.env.NODE_ENV === 'production';
 
 export const http = new AppAxios({
   baseURL: isBuild ? '' : API_BASE_URL,
-  timeout: 60e3
-})
+  timeout: 60e3,
+});

vite.config.ts

@@ -1,14 +1,14 @@
-import { UserConfig, ConfigEnv, defineConfig } from 'vite'
+import { UserConfig, ConfigEnv, defineConfig } from 'vite';
 import { resolve } from 'path';
 import { createVitePlugins } from './vite/plugin';
 import { generateModifyVars } from './vite/themeConfig';
 import { proxy } from './vite/proxy';
-const root = process.cwd()
+const root = process.cwd();
 // https://vitejs.dev/config/
 
 export default ({ command, mode }: ConfigEnv): UserConfig => {
   console.log('vite >>>', command, mode);
-  const isBuild = command === 'build'
+  const isBuild = command === 'build';
   return {
     root,
     resolve: {
@@ -40,7 +40,7 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       // TODO:
       brotliSize: false,
       // TODO:
-      chunkSizeWarningLimit: 2000,
+      chunkSizeWarningLimit: 2000
     },
     plugins: createVitePlugins(isBuild),
     server: {
@@ -51,5 +51,5 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       open: true,
       proxy
     }
-  }
-}
+  };
+};