当前位置：首页 > VUE

vue实现首页

2026-01-08 03:15:57VUE

Vue 实现首页的基本步骤

安装 Vue.js 和相关依赖，可以通过 Vue CLI 或 Vite 快速初始化项目。Vue CLI 适合传统项目，Vite 更适合现代前端开发。

npm install -g @vue/cli
vue create my-project

或使用 Vite：

npm create vite@latest my-project --template vue

创建首页组件

在 src/views 或 src/pages 目录下创建 Home.vue 文件，作为首页的入口组件。组件包含模板、脚本和样式三部分。

<template>
  <div class="home">
    <h1>Welcome to My Homepage</h1>
    <p>This is the main content of the homepage.</p>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

<style scoped>
.home {
  text-align: center;
  padding: 20px;
}
</style>

配置路由

使用 Vue Router 管理页面导航。在 src/router/index.js 中配置路由，将首页组件映射到根路径。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

挂载路由到应用

在 src/main.js 或 src/main.ts 中引入路由并挂载到 Vue 实例。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router)
app.mount('#app')

添加导航菜单

在 App.vue 中添加导航菜单，方便用户跳转到首页或其他页面。

<template>
  <nav>
    <router-link to="/">Home</router-link>
  </nav>
  <router-view/>
</template>

<style>
nav {
  padding: 10px;
  background: #f0f0f0;
}
nav a {
  margin-right: 10px;
}
</style>

优化首页加载速度

使用懒加载技术拆分代码，减少首页初始加载时间。修改路由配置，动态导入首页组件。

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]

添加动画效果

通过 Vue 的过渡组件为首页添加进入和离开的动画效果，提升用户体验。

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

集成状态管理

对于复杂应用，使用 Pinia 或 Vuex 管理首页所需的状态数据。

npm install pinia

在 main.js 中设置 Pinia：

import { createPinia } from 'pinia'

const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

创建 store 文件 stores/home.js：

import { defineStore } from 'pinia'

export const useHomeStore = defineStore('home', {
  state: () => ({
    featuredItems: []
  }),
  actions: {
    async fetchFeaturedItems() {
      this.featuredItems = await fetch('/api/featured').then(res => res.json())
    }
  }
})

在首页组件中使用 store：

vue实现首页

<script>
import { useHomeStore } from '../stores/home'

export default {
  setup() {
    const store = useHomeStore()
    store.fetchFeaturedItems()

    return {
      featuredItems: store.featuredItems
    }
  }
}
</script>