feat: 新年新气象，更新 npm 包，更改底部年份为2022,引入 env 环境变量,增加一些常用的构建脚本命令,格式化全局代码

.env

@@ -0,0 +1 @@
+# NODE_ENV=production

.env.development

@@ -0,0 +1,2 @@
+NODE_ENV=development
+VITE_TEST=123123

.env.production

@@ -0,0 +1 @@
+NODE_ENV=production

.env.test

@@ -0,0 +1 @@
+NODE_ENV=production

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.8.0(2022-01-21)
+
+### Features
+
+- 新年新气象，更新 npm 包，更改底部年份为 2022
+- 引入 env 环境变量
+- 增加一些常用的构建脚本命令
+- 格式化全局代码
+
 ## 0.7.1(2022-01-20)
 
 ### Features

log.md

@@ -10,7 +10,7 @@
 - [x] 登录态相关处理
 - [x] vite 相关配置抽离
 - [x] 引入 prettier 格式化代码
+- [x] 引入 env 环境变量
+- [x] 增加一些常用的构建脚本命令
 - [ ] 构建编译的代码压缩和优化
-- [ ] 引入 env 环境变量
-- [ ] 增加一些常用的构建脚本命令
 - [ ] 编写 README

package.json

@@ -1,11 +1,13 @@
 {
   "name": "vite-template",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
+    "build:test": "vue-tsc --noEmit && vite build --mode test",
     "preview": "vite preview",
     "lint": "eslint --cache \"src/**/*.{vue,ts,tsx}\" --fix",
+    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
     "prepare": "husky install",
     "commit": "git cz",
     "husky-hook:add": "husky add .husky/pre-commit ./node_modules/.bin/lint-staged"
@@ -27,37 +29,37 @@
   },
   "dependencies": {
     "@ant-design/icons-vue": "^6.0.1",
-    "@vueuse/core": "^7.4.0",
-    "ant-design-vue": "^3.0.0-alpha.16",
+    "@vueuse/core": "^7.5.3",
+    "ant-design-vue": "^3.0.0-beta.7",
     "axios": "^0.24.0",
     "nprogress": "^0.2.0",
-    "pinia": "^2.0.8",
-    "vue": "^3.2.26",
+    "pinia": "^2.0.9",
+    "vue": "^3.2.27",
     "vue-router": "^4.0.12"
   },
   "devDependencies": {
-    "@types/node": "^16.11.15",
+    "@types/node": "^16.11.21",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.8.0",
-    "@typescript-eslint/parser": "^5.8.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
     "@vitejs/plugin-vue": "^2.0.1",
     "@vitejs/plugin-vue-jsx": "^1.3.3",
     "@vue/eslint-config-typescript": "^9.1.0",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.5.0",
+    "eslint": "^8.7.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-define-config": "^1.2.0",
+    "eslint-define-config": "^1.2.3",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.3.0",
     "husky": "^7.0.4",
     "less": "^4.1.2",
-    "lint-staged": "^12.1.3",
+    "lint-staged": "^12.2.2",
     "prettier": "^2.5.1",
-    "typescript": "^4.5.4",
+    "typescript": "^4.5.5",
     "unplugin-auto-import": "^0.5.11",
-    "unplugin-vue-components": "^0.17.9",
-    "vite": "^2.7.5",
+    "unplugin-vue-components": "^0.17.14",
+    "vite": "^2.7.13",
     "vue-tsc": "^0.29.8"
   }
 }

src/App.vue

@@ -10,11 +10,10 @@
   const route = useRoute();
   const store = AppStore();
   const isLogin = computed(() => store.isLogin);
-  const a = 1223;
-  console.log(a);
+
   watch(
     isLogin,
-    (val) => {
+    val => {
       if (![EnumPage.Login as string, EnumPage.Error as string].includes(route.path)) {
         if (!val) {
           router.push(EnumPage.Login);
@@ -29,7 +28,7 @@
             router.removeRoute(AppRoute.name as string);
             router.addRoute({
               ...AppRoute,
-              children: childrenRoutes,
+              children: childrenRoutes
             });
             router.addRoute(NotFoundRoute);
             store.updateLoading(false);
@@ -40,8 +39,8 @@
       }
     },
     {
-      immediate: true,
-    },
+      immediate: true
+    }
   );
 </script>
 

src/env.d.ts

@@ -6,3 +6,12 @@ declare module '*.vue' {
   const component: DefineComponent<{}, {}, any>;
   export default component;
 }
+
+interface ImportMetaEnv {
+  readonly VITE_TEST: string;
+  // 更多环境变量...
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}

src/layouts/app/Footer.vue

@@ -1,6 +1,6 @@
 <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;2022 Created by zhusiqing </p>
   </a-layout-footer>
 </template>
 

src/layouts/app/Header.vue

@@ -42,20 +42,20 @@
   const navs = ref([
     {
       path: '/',
-      title: '首页',
+      title: '首页'
     },
     {
       path: '/login',
-      title: '登录页',
+      title: '登录页'
     },
     {
       path: '/error',
-      title: '错误页',
-    },
+      title: '错误页'
+    }
   ]);
   enum EnumUserDropdown {
     center = 1,
-    logout = 2,
+    logout = 2
   }
   interface menuClickParams {
     key: number;

src/layouts/app/Sider.vue

@@ -41,7 +41,7 @@
   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];
       }

src/pages/Home/index.vue

@@ -15,7 +15,7 @@
     }
     copy();
   };
-  watch(copied, (v) => {
+  watch(copied, v => {
     if (v) {
       alert(`复制成功，内容为：${text.value}`);
     }

src/pages/Login/index.vue

@@ -52,7 +52,7 @@
   }
   const loginState: UnwrapRef<loginState> = reactive({
     username: '',
-    password: '',
+    password: ''
   });
   const rules = {
     username: [
@@ -60,17 +60,17 @@
         required: true,
         message: '请输入用户名',
         whitespace: true,
-        trigger: 'blur',
-      },
+        trigger: 'blur'
+      }
     ],
     password: [
       {
         required: true,
         message: '请输入密码',
         whitespace: true,
-        trigger: 'blur',
-      },
-    ],
+        trigger: 'blur'
+      }
+    ]
   };
 
   const finishHandle: FormProps['onFinish'] = (values: loginState) => {
@@ -81,7 +81,7 @@
       message.error('用户名或密码错误');
     }
   };
-  const finishFailedHandle: FormProps['onFinishFailed'] = (errors) => {
+  const finishFailedHandle: FormProps['onFinishFailed'] = errors => {
     console.log(errors);
   };
 </script>

src/router/auth.ts

@@ -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,10 +29,10 @@ export const authRoutes: RouteRecordRaw[] = [
         component: () => import('@/pages/System/Role/index.vue'),
         meta: {
           auth: 1,
-          title: '角色管理',
-        },
-      },
-    ],
+          title: '角色管理'
+        }
+      }
+    ]
   },
   {
     path: 'common',
@@ -40,8 +40,8 @@ export const authRoutes: RouteRecordRaw[] = [
     component: () => import('@/pages/Common/index.vue'),
     meta: {
       icon: 'AppstoreOutlined',
-      title: '通用页面',
-    },
+      title: '通用页面'
+    }
   },
   {
     path: 'test',
@@ -50,7 +50,7 @@ export const authRoutes: RouteRecordRaw[] = [
     redirect: '/test/1',
     meta: {
       icon: 'ApiOutlined',
-      title: '测试路由权限',
+      title: '测试路由权限'
     },
     children: [
       {
@@ -58,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,12 +5,12 @@ 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 = {
@@ -24,10 +24,10 @@ export const AppRoute: RouteRecordRaw = {
       name: 'Home',
       component: () => import('@/pages/Home/index.vue'),
       meta: {
-        title: '首页',
-      },
-    },
-  ],
+        title: '首页'
+      }
+    }
+  ]
 };
 
 export const LoginRoute: RouteRecordRaw = {
@@ -35,8 +35,8 @@ export const LoginRoute: RouteRecordRaw = {
   name: 'Login',
   component: () => import('@/pages/Login/index.vue'),
   meta: {
-    title: '登录页',
-  },
+    title: '登录页'
+  }
 };
 
 export const ErrorRoute: RouteRecordRaw = {
@@ -44,14 +44,14 @@ export const ErrorRoute: RouteRecordRaw = {
   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];

src/router/index.ts

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

src/router/utils.ts

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

src/service/index.ts

@@ -4,9 +4,9 @@ interface InterfaceUrl {
   [key: string]: string;
 }
 const url: InterfaceUrl = {
-  getUserInfo: '/getUserInfo',
+  getUserInfo: '/getUserInfo'
 };
-Object.keys(url).map((key) => {
+Object.keys(url).map(key => {
   url[key] = `${API_PREFIX}${url[key]}`;
 });
 console.log('api >>>', url);

src/store/modules/app.ts

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

src/utils/request/Axios.ts

@@ -20,22 +20,22 @@ export class AppAxios {
   }
   private interceptorsRequest() {
     this.instance.interceptors.request.use(
-      (config) => {
+      config => {
         return config;
       },
-      (error) => {
+      error => {
         return Promise.reject(error);
-      },
+      }
     );
   }
   private interceptorsResponse() {
     this.instance.interceptors.response.use(
-      (response) => {
+      response => {
         return response;
       },
-      (error) => {
+      error => {
         return Promise.reject(error);
-      },
+      }
     );
   }
   request<T = any>(options: AxiosRequestConfig): Promise<Result<T>> {

src/utils/request/index.ts

@@ -5,5 +5,5 @@ 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,8 +1,8 @@
 // 应用名
-export const APP_TITLE = 'Vite-Vue3-Admin'
-
-export const API_PREFIX = '/api'
-
-export const API_BASE_URL = '/fe'
-
-export const API_TARGET_URL = 'http://test.com'
+export const APP_TITLE = 'Vite-Vue3-Admin';
+// 后端请求前缀
+export const API_PREFIX = '/api';
+// 本地开发请求转发代理前缀
+export const API_BASE_URL = '/fe';
+// 请求地址
+export const API_TARGET_URL = 'http://test.com';

vite/proxy.ts

@@ -1,10 +1,9 @@
-import { API_BASE_URL, API_TARGET_URL } from './config'
-import type { ProxyOptions } from 'vite'
-
+import { API_BASE_URL, API_TARGET_URL } from './config';
+import type { ProxyOptions } from 'vite';
 export const proxy: Record<string, ProxyOptions> = {
   [API_BASE_URL]: {
     target: API_TARGET_URL,
     changeOrigin: true,
     rewrite: path => path.replace(new RegExp(`^${API_BASE_URL}`), '')
   }
-}
+};