vue实现新闻类网站
使用 Vue 实现新闻类网站
项目初始化
使用 Vue CLI 或 Vite 快速初始化项目，安装必要的依赖（如 Vue Router、Axios）。Vue 3 推荐使用 Composition API 开发。
npm create vue@latest news-website
cd news-website
npm install vue-router axios路由配置
通过 Vue Router 实现页面导航，配置新闻列表、详情页等路由。
// router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import NewsList from '../views/NewsList.vue'
import NewsDetail from '../views/NewsDetail.vue'
const routes = [
{ path: '/', component: NewsList },
{ path: '/news/:id', component: NewsDetail }
]
const router = createRouter({
history: createWebHistory(),
routes
})新闻列表页
使用 Axios 获取新闻数据并渲染为列表，支持分页或无限滚动。
<!-- views/NewsList.vue -->
<template>
<div v-for="news in newsList" :key="news.id">
<router-link :to="`/news/${news.id}`">{{ news.title }}</router-link>
</div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
const newsList = ref([])
onMounted(async () => {
const response = await axios.get('https://api.example.com/news')
newsList.value = response.data
})
</script>新闻详情页
通过路由参数获取新闻 ID，动态加载对应内容。
<!-- views/NewsDetail.vue -->
<template>
<h1>{{ news.title }}</h1>
<div v-html="news.content"></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const news = ref({})
onMounted(async () => {
const response = await axios.get(`https://api.example.com/news/${route.params.id}`)
news.value = response.data
})
</script>状态管理
复杂场景可使用 Pinia 管理全局状态，如用户收藏、新闻分类等。
// stores/news.js
import { defineStore } from 'pinia'
export const useNewsStore = defineStore('news', {
state: () => ({
categories: []
}),
actions: {
async fetchCategories() {
const res = await axios.get('/api/categories')
this.categories = res.data
}
}
})响应式设计
通过 CSS Flex/Grid 或 UI 库（如 Element Plus）实现多端适配。
<template>
<el-row :gutter="20">
<el-col :md="8" v-for="news in newsList" :key="news.id">
<news-card :news="news" />
</el-col>
</el-row>
</template>性能优化
- 使用
v-lazy实现图片懒加载 - 路由级代码分割
- 数据缓存策略
// 路由懒加载
const NewsDetail = () => import('../views/NewsDetail.vue')部署上线
构建生产环境代码并部署到静态托管服务（如 Vercel、Netlify）。
npm run build
