vue实现首页
Vue 实现首页的步骤
创建 Vue 项目
使用 Vue CLI 或 Vite 创建一个新的 Vue 项目。Vue CLI 是官方提供的脚手架工具，适合快速初始化项目结构。
npm install -g @vue/cli
vue create my-project或者使用 Vite：
npm create vite@latest my-project --template vue配置路由
Vue Router 是 Vue 官方推荐的路由管理工具，适合实现单页面应用（SPA）的页面跳转。
安装 Vue Router：
npm install 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/views/Home.vue 中编写首页组件，可以包含导航栏、轮播图、内容区域等。
<template>
<div class="home">
<h1>欢迎来到首页</h1>
<p>这里是首页内容</p>
</div>
</template>
<script>
export default {
name: 'Home'
}
</script>
<style scoped>
.home {
text-align: center;
padding: 20px;
}
</style>添加全局样式
在 src/assets 目录下创建全局 CSS 文件，并在 main.js 中引入。
/* src/assets/styles.css */
body {
margin: 0;
font-family: Arial, sans-serif;
}在 main.js 中引入：
import './assets/styles.css'引入 UI 组件库
如果需要快速搭建界面，可以引入 Element Plus 或 Vant 等 UI 组件库。
安装 Element Plus：
npm install element-plus在 main.js 中引入：
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(ElementPlus).mount('#app')部署首页
完成开发后，使用以下命令构建生产环境代码：
npm run build生成的 dist 文件夹可以部署到服务器或静态托管服务（如 Netlify、Vercel）。
