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