当前位置：首页 > VUE

用vue实现系统首页

2026-02-24 12:56:13VUE

使用Vue实现系统首页

项目初始化

使用Vue CLI创建新项目：

vue create system-homepage
cd system-homepage

安装常用依赖：

npm install axios vue-router element-ui

目录结构

典型目录结构如下：

src/
├── assets/          # 静态资源
├── components/      # 公共组件
│   ├── Header.vue
│   ├── Sidebar.vue
│   └── Footer.vue
├── views/           # 页面视图
│   ├── Home.vue
│   ├── Dashboard.vue
│   └── About.vue
├── router/          # 路由配置
│   └── index.js
├── App.vue          # 根组件
└── main.js          # 入口文件

基础布局实现

在App.vue中设置基础布局框架：

用vue实现系统首页

<template>
  <div id="app">
    <Header />
    <div class="main-container">
      <Sidebar />
      <router-view class="content"/>
    </div>
    <Footer />
  </div>
</template>

<script>
import Header from './components/Header'
import Sidebar from './components/Sidebar'
import Footer from './components/Footer'

export default {
  components: { Header, Sidebar, Footer }
}
</script>

<style>
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-container {
  display: flex;
  flex: 1;
}
.content {
  flex: 1;
  padding: 20px;
}
</style>

路由配置

在router/index.js中配置基本路由：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import Dashboard from '../views/Dashboard.vue'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/', name: 'home', component: Home },
    { path: '/dashboard', name: 'dashboard', component: Dashboard }
  ]
})

首页组件实现

views/Home.vue示例：

用vue实现系统首页

<template>
  <div class="home">
    <h1>欢迎来到系统首页</h1>
    <el-card class="box-card">
      <div slot="header">
        <span>系统公告</span>
      </div>
      <div v-for="(item,index) in notices" :key="index">
        {{ item.title }} - {{ item.date }}
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      notices: [
        { title: '系统维护通知', date: '2023-05-01' },
        { title: '新功能上线', date: '2023-04-15' }
      ]
    }
  }
}
</script>

<style scoped>
.home {
  padding: 20px;
}
.box-card {
  margin-top: 20px;
  width: 80%;
}
</style>

数据请求封装

创建utils/request.js封装axios：

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5000
})

service.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

export default service

响应式设计

使用媒体查询实现响应式：

@media screen and (max-width: 768px) {
  .main-container {
    flex-direction: column;
  }
  .box-card {
    width: 100%;
  }
}

部署准备

配置vue.config.js：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/system-homepage/'
    : '/',
  outputDir: 'dist',
  assetsDir: 'static'
}

这个实现方案包含了系统首页的基本框架，可根据实际需求扩展功能模块，如添加用户登录状态管理、权限控制等功能。Element UI组件库提供了丰富的UI组件可以快速构建界面，axios处理数据请求，vue-router管理页面路由。