使用VUE3+ts+element-plus+vite实现一个代码框架并且支持换肤GWT登陆，全局loading控制

好的，我来给你讲一下具体的步骤。

1. 初始化项目

首先，我们需要使用 Vue CLI 4+ 创建一个新的项目，选择 TypeScript 作为语言：

vue create my-project

然后，在项目根目录下执行以下命令安装 Element Plus、Vite、GWT 等依赖：

npm install element-plus vite vue-router vuex axios qs

2. 配置 Vite

我们需要对 Vite 进行一些配置以实现换肤和全局 loading 控制。在项目根目录下创建一个 `vite.config.ts` 文件，添加以下内容：

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "~element-plus/packages/theme-chalk/src/index";
          @import "@/styles/variables.scss";
        `
      }
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // GWT 后端地址
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

其中，我们使用了 Element Plus 自带的 SCSS 变量来实现换肤，需要在 `variables.scss` 中定义相应的变量。`server.proxy` 则是用于配置 GWT 后端地址的代理。

3. 配置 Element Plus

在 `main.ts` 中，我们需要引入 Element Plus 并使用它的样式和组件：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import App from './App.vue';
import router from './router';
import store from './store';

import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);

app.use(ElementPlus);
app.use(router);
app.use(store);

app.mount('#app');

4. 配置路由和状态管理

我们使用 Vue Router 来实现路由，Vuex 来实现全局状态管理。在 `store` 目录下创建 `index.ts` 文件，添加以下内容：

import { createStore } from 'vuex';

export default createStore({
  state: {
    loading: false
  },
  mutations: {
    setLoading(state, payload) {
      state.loading = payload;
    }
  },
  actions: {
    setLoading({ commit }, payload) {
      commit('setLoading', payload);
    }
  },
  modules: {
  }
})

在 `router` 目录下创建 `index.ts` 文件，添加以下内容：

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
import Home from '../views/Home.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});

export default router;

5. 实现换肤功能

在 `styles` 目录下创建 `variables.scss` 文件，添加以下内容：

/* 主题色 */
$--color-primary: #409EFF;

/* 辅助色 */
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;
$--color-info: #909399;

/* 背景色 */
$--color-background: #f5f7fa;
$--color-card: #fff;

/* 字体 */
$--font-family: 'Helvetica Neue', Arial, 'PingFang SC', 'Microsoft YaHei', sans-serif;

我们可以在 `App.vue` 中通过修改 `document.documentElement.style` 中的 CSS 变量来实现换肤。具体代码如下：

<template>
  <div id="app">
    <!-- ... -->
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    const store = useStore();

    function switchTheme(theme: string) {
      const app = document.documentElement;
      app.style.setProperty('--color-primary', theme);
    }

    return {
      switchTheme
    };
  }
});
</script>

6. 实现全局 loading 控制

在 `App.vue` 中，我们可以使用 Vuex 中的 `loading` 状态来控制全局 loading。具体代码如下：

<template>
  <div id="app">
    <div v-if="loading" class="loading-mask">
      <div class="loading-spinner"></div>
    </div>
    <!-- ... -->
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { useStore } from 'vuex';

export default defineComponent({
  setup() {
    const store = useStore();

    return {
      loading: store.state.loading
    };
  }
});
</script>

<style scoped>
.loading-mask {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.5);
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 3px solid #ccc;
  border-top-color: #409EFF;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  animation: spin 0.6s infinite linear;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

然后，在需要控制 loading 的地方，我们可以使用以下代码来控制全局 loading：

import { useStore } from 'vuex';

const store = useStore();

// 显示 loading
store.dispatch('setLoading', true);

// 隐藏 loading
store.dispatch('setLoading', false);

到这里，我们就完成了一个基于 Vue 3、TypeScript、Element Plus、Vite 的代码框架，并且支持换肤和全局 loading 控制。