好的，我来给你讲一下具体的步骤。
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` 文件，添加以下内容：
```typescript
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 并
使用它的样式和组件：
```typescript
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` 文件，添加以下内容：
```typescript
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` 文件，添加以下内容：
```typescript
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` 文件，添加以下内容：
```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 变量来实现换肤。具体代码如下：
```html
<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。具体代码如下：
```html
<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：
```typescript
import { useStore } from 'vuex';
const store = useStore();
// 显示 loading
store.dispatch('setLoading', true);
// 隐藏 loading
store.dispatch('setLoading', false);
```
到这里，我们就完成了一个基于 Vue 3、TypeScript、Element Plus、Vite 的代码框架，并且支持换肤和全局 loading 控制。
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
