Vue3+TypeScript+Vite企业级前端框架搭建指南

1. 项目概述

在现代化前端开发中，Vue3 + TypeScript + Vite 的组合已经成为企业级应用开发的首选技术栈。结合 Element Plus UI 组件库和 Pinia 状态管理，可以构建出高性能、易维护的前端项目框架。本文将详细介绍如何从零开始搭建这样一个框架，并实现常见的布局结构。

2. 环境准备与项目初始化

2.1 创建Vite项目

首先确保你已经安装了Node.js（建议版本16+），然后通过以下命令创建Vite项目：

bash复制npm create vite@latest vue3-ts-element-template --template vue-ts

创建完成后，进入项目目录并安装基础依赖：

bash复制cd vue3-ts-element-template
npm install

2.2 安装必要依赖

我们需要安装Element Plus和Pinia：

bash复制npm install element-plus @element-plus/icons-vue pinia

同时安装Sass预处理器，以便使用SCSS语法：

bash复制npm install sass -D

3. 项目结构设计

3.1 目录结构规划

一个良好的项目结构应该遵循以下原则：

• 按功能模块划分
• 组件化思维
• 类型安全
• 易于维护

建议的项目结构如下：

code复制src/
├── assets/          # 静态资源
├── components/      # 公共组件
├── layout/          # 布局组件
├── router/          # 路由配置
├── store/           # Pinia状态管理
├── styles/          # 全局样式
├── utils/           # 工具函数
├── views/           # 页面视图
├── App.vue          # 根组件
└── main.ts          # 入口文件

4. 布局组件实现

4.1 基础布局结构

在src/layout目录下创建以下文件：

• index.vue - 布局容器
• Header.vue - 顶部导航
• Aside.vue - 侧边菜单
• Main.vue - 内容区域

4.1.1 布局容器 (index.vue)

vue复制<template>
  <el-container class="layout-container">
    <Header />
    <el-container class="content-container">
      <Aside />
      <Main />
    </el-container>
  </el-container>
</template>

<script setup lang="ts">
import Header from './Header.vue'
import Main from './Main.vue'
import Aside from './Aside.vue'
</script>

<style scoped lang="scss">
.layout-container {
  width: 100%;
  height: calc(100vh - 16px); // 16px 是 body的margin样式
  overflow: hidden;
  display: flex;
  flex-direction: column;

  :deep(.el-header) {
    padding: 0;
    flex-shrink: 0;
  }

  :deep(.el-aside) {
    overflow-y: auto;  // 侧边栏也可滚动
  }

  :deep(.el-main) {
    padding: 0;
    overflow-y: auto;  // 内容区域滚动
  }
}

.content-container {
  height: calc(100vh - 60px); // 减去 header 高度
  overflow: hidden;  // 容器本身不滚动
}
</style>

4.1.2 顶部导航 (Header.vue)

vue复制<template>
  <el-header class="header-layout">
    <div class="header-layout-content">
      <div class="header-left">
        <el-image src="/images/logo.png" alt=""></el-image>
        <h3>VUE3-ELEMENT-CESIUM</h3>
      </div>
      <div class="header-right">
        <el-popover
          trigger="click"
          :width="'auto'"
          popper-class="user-popover"
          popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
        >
          <template #reference>
            <el-avatar
              :size="40"
              src="/images/user-icon.jpeg"
              style="