广告网站建设与制作学电脑在哪里报名
系列文档目录
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>四、运行效果
五、参考文献
- Vue Router 官方文档：https://router.vuejs.org/
-
element plus container设计文档http://element-plus.org/zh-CN/component/container.html