feat: support vite2

.env

@@ -6,6 +6,3 @@ VITE_GLOB_APP_TITLE = Vben Admin
 
 # spa shortname
 VITE_GLOB_APP_SHORT_NAME = vue_vben_admin_2x
-
-# Whether to dynamically load all files in `src/views`
-VITE_DYNAMIC_IMPORT = true

CHANGELOG.zh_CN.md

@@ -2,7 +2,11 @@
 
 ### ✨ Refactor
 
-独立组件配置到 `/@/settings/componentsSetting`
+- 独立组件配置到 `/@/settings/componentsSetting`
+- `colorSetting`和`designSetting`现在合并为`designSetting`
+- `ant-design-vue`组件注册移动到`components/registerComponent`
+- 移除 `setup` 文件夹
+- 升级到`vite2`
 
 ### ✨ Features
 
@@ -11,6 +15,7 @@
 - modal 组件新增`height`和`min-height`属性
 - 新增`PageWrapper`组件。并应用于示例页面
 - 新增标签页折叠功能
+- 兼容旧版浏览器
 
 ### 🐛 Bug Fixes
 

src/App.vue

@@ -10,7 +10,7 @@
   import { defineComponent } from 'vue';
   import { ConfigProvider } from 'ant-design-vue';
 
-  import { initAppConfigStore } from '/@/setup/App';
+  import { initAppConfigStore } from '/@/logics/initAppConfig';
 
   import { useLockPage } from '/@/hooks/web/useLockPage';
   import { useLocale } from '/@/locales/useLocale';

src/components/registerGlobComp.ts

@@ -34,7 +34,14 @@ import {
   Avatar,
   Menu,
   Breadcrumb,
+  Form,
+  Input,
+  Row,
+  Col,
+  Spin,
 } from 'ant-design-vue';
+import 'ant-design-vue/dist/antd.css';
+
 import { App } from 'vue';
 
 const compList = [Icon, Button, AntButton.Group];
@@ -46,7 +53,6 @@ export function registerGlobComp(app: App) {
   });
 
   // Optional
-  // Why register here： The main reason for registering here is not to increase the size of the first screen code
   // If you need to customize global components, you can write here
   // If you don’t need it, you can delete it
   app
@@ -78,5 +84,10 @@ export function registerGlobComp(app: App) {
     .use(Empty)
     .use(Avatar)
     .use(Menu)
-    .use(Tabs);
+    .use(Tabs)
+    .use(Form)
+    .use(Input)
+    .use(Row)
+    .use(Col)
+    .use(Spin);
 }

src/layouts/default/setting/SettingDrawer.tsx

@@ -31,7 +31,7 @@ import {
   mixSidebarTriggerOptions,
 } from './enum';
 
-import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/colorSetting';
+import { HEADER_PRESET_BG_COLOR_LIST, SIDE_BAR_BG_COLOR_LIST } from '/@/settings/designSetting';
 
 const { t } = useI18n();
 

src/setup/App.ts → src/logics/initAppConfig.ts

@@ -3,9 +3,7 @@
  */
 
 import type { ProjectConfig } from '/@/types/config';
-import { computed, ref } from 'vue';
 
-import { ThemeModeEnum } from '/@/enums/appEnum';
 import { PROJ_CFG_KEY } from '/@/enums/cacheEnum';
 
 import projectSetting from '/@/settings/projectSetting';
@@ -20,21 +18,6 @@ import {
 import { appStore } from '/@/store/modules/app';
 import { deepMerge } from '/@/utils';
 
-// TODO Theme switching
-export function useThemeMode(mode: ThemeModeEnum) {
-  const modeRef = ref(mode);
-  const html = document.documentElement;
-  const clsList = html.classList;
-
-  const change = () => {
-    clsList.contains(mode) ? clsList.remove(mode) : clsList.add(mode);
-  };
-  return {
-    runChangeThemeMode: change,
-    mode: computed(() => modeRef.value),
-  };
-}
-
 // Initial project configuration
 export function initAppConfigStore() {
   let projCfg: ProjectConfig = getLocal(PROJ_CFG_KEY) as ProjectConfig;

src/main.ts

@@ -3,8 +3,7 @@ import App from './App.vue';
 
 import router, { setupRouter } from '/@/router';
 import { setupStore } from '/@/store';
-import { setupAntd } from '/@/setup/ant-design-vue';
-import { setupErrorHandle } from '/@/setup/error-handle';
+import { setupErrorHandle } from '/@/logics/error-handle';
 import { setupGlobDirectives } from '/@/directives';
 import { setupI18n } from '/@/locales/setupI18n';
 import { setupProdMockServer } from '../mock/_createProductionServer';
@@ -19,9 +18,6 @@ const app = createApp(App);
 
 registerGlobComp(app);
 
-// Configure component library
-setupAntd(app);
-
 // Multilingual configuration
 setupI18n(app);
 

src/settings/colorSetting.ts

@@ -1,29 +0,0 @@
-// header preset color
-export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
-  '#ffffff',
-  '#009688',
-  '#5172DC',
-  '#1E9FFF',
-  '#018ffb',
-  '#409eff',
-  '#4e73df',
-  '#e74c3c',
-  '#24292e',
-  '#394664',
-  '#001529',
-  '#383f45',
-];
-
-// sider preset color
-export const SIDE_BAR_BG_COLOR_LIST: string[] = [
-  '#001529',
-  '#273352',
-  '#ffffff',
-  '#191b24',
-  '#191a23',
-  '#304156',
-  '#001628',
-  '#28333E',
-  '#344058',
-  '#383f45',
-];

src/settings/designSetting.ts

@@ -1,3 +1,33 @@
 export default {
   prefixCls: 'vben',
 };
+
+// header preset color
+export const HEADER_PRESET_BG_COLOR_LIST: string[] = [
+  '#ffffff',
+  '#009688',
+  '#5172DC',
+  '#1E9FFF',
+  '#018ffb',
+  '#409eff',
+  '#4e73df',
+  '#e74c3c',
+  '#24292e',
+  '#394664',
+  '#001529',
+  '#383f45',
+];
+
+// sider preset color
+export const SIDE_BAR_BG_COLOR_LIST: string[] = [
+  '#001529',
+  '#273352',
+  '#ffffff',
+  '#191b24',
+  '#191a23',
+  '#304156',
+  '#001628',
+  '#28333E',
+  '#344058',
+  '#383f45',
+];

src/setup/ant-design-vue/index.ts

@@ -1,19 +0,0 @@
-// Load on demand
-// This module only introduces components globally before login
-import type { App } from 'vue';
-
-import {
-  // need
-  Form,
-  Input,
-  Row,
-  Col,
-  Spin,
-} from 'ant-design-vue';
-import 'ant-design-vue/dist/antd.css';
-
-export function setupAntd(app: App<Element>) {
-  // need
-  // Here are the components required before registering and logging in
-  app.use(Form).use(Input).use(Row).use(Col).use(Spin);
-}