Vue3+Vite+TypeScript+Element Plus开发-03.主页设计与router配置

系列文档目录

Vue3+Vite+TypeScript安装

Element Plus安装与配置

主页设计与router配置

静态菜单设计

Pinia引入

---

文章目录

目录

系列文档目录

文章目录

前言

一、主页设计

二、配置@代替别名

三、配置router

四、运行效果

五、参考文献

---

---

前言

        本文将重点介绍如何使用 Element Plus 的 Container 布局容器 来搭建页面的基本结构，以及 Vue Router 的安装配置。

通过本文的介绍，将能够掌握以下内容：

1. 如何使用 Element Plus 的 Container 布局容器搭建页面结构。

2.@别名定义：介绍如何在 Vite 和 TypeScript 环境中配置路径别名，简化项目路径管理，提高开发效率

3. Vue Router 安装与配置。

---

一、主页设计

1.开发Main.vue

1.1 建立文件夹src\views

1.2 新建src\views\main.vue

<template><div class="common-layout"><el-container><el-aside width="200px">Aside</el-aside><el-container><el-header>Header</el-header><el-main>Main</el-main></el-container></el-container></div></template>

代码主要是element plus官方代码，参考网址：http://element-plus.org/zh-CN/component/container.html

二、配置@代替别名

1.调整vite.config.ts

重点代码

resolve: {alias: {'@': '/src', // 配置 @ 别名指向 src 目录}}

完整配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vite.dev/config/
export default defineConfig({plugins: [vue()],resolve: {alias: {'@': '/src', // 配置 @ 别名指向 src 目录}}})

2.调整tsconfig.json

{"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}},"include": ["src/**/*.ts", "src/**/*.vue"]

三、配置router

1.安装router

npm install vue-router@4

2.增加文件夹src\router

3.增加文件src\router\index.ts

代码如下：

import { createRouter, createWebHistory } from 'vue-router';
import Main from '@/views/Main.vue';const routes = [{path: '/',name: 'main',component: Main,},];const router = createRouter({history: createWebHistory(),routes,
});export default router;

4.调整Main.ts增加router 引入

重点：

import router from './router';app.use(router);

完整配置：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import router from './router';
import App from './App.vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}app.use(ElementPlus, {locale: zhCn,})app.use(router);
app.mount('#app')

5.调整App.vue文件通过路由显示

重点：

 <RouterView /> 

<script setup lang="ts"></script><template><RouterView />   </template><style scoped>
/* 样式可根据需求添加 */
</style>

四、运行效果

---

五、参考文献

1. Vue Router 官方文档：https://router.vuejs.org/

2. element plus container设计文档http://element-plus.org/zh-CN/component/container.html