基于vue实现新闻前台
Vue 实现新闻前台的关键步骤
项目初始化与依赖安装
使用 Vue CLI 或 Vite 创建项目：
npm init vue@latest news-frontend
cd news-frontend
npm install axios vue-router pinia路由配置
在 src/router/index.js 中定义路由：
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import NewsDetail from '../views/NewsDetail.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/news/:id', component: NewsDetail }
];
const router = createRouter({
history: createWebHistory(),
routes
});
export default router;状态管理（Pinia）
创建新闻存储模块 src/stores/news.js：
import { defineStore } from 'pinia';
import axios from 'axios';
export const useNewsStore = defineStore('news', {
state: () => ({
newsList: [],
currentNews: null
}),
actions: {
async fetchNews() {
const res = await axios.get('https://api.example.com/news');
this.newsList = res.data;
},
async fetchNewsDetail(id) {
const res = await axios.get(`https://api.example.com/news/${id}`);
this.currentNews = res.data;
}
}
});新闻列表组件src/views/Home.vue 示例：
<template>
<div class="news-list">
<div v-for="item in newsList" :key="item.id" @click="goToDetail(item.id)">
<h3>{{ item.title }}</h3>
<p>{{ item.summary }}</p>
</div>
</div>
</template>
<script setup>
import { useNewsStore } from '../stores/news';
import { storeToRefs } from 'pinia';
const store = useNewsStore();
const { newsList } = storeToRefs(store);
store.fetchNews();
const router = useRouter();
const goToDetail = (id) => router.push(`/news/${id}`);
</script>新闻详情组件src/views/NewsDetail.vue 示例：
<template>
<div v-if="currentNews">
<h1>{{ currentNews.title }}</h1>
<div v-html="currentNews.content"></div>
</div>
</template>
<script setup>
import { useRoute } from 'vue-router';
import { useNewsStore } from '../stores/news';
const route = useRoute();
const store = useNewsStore();
store.fetchNewsDetail(route.params.id);
</script>关键功能实现
API 数据交互
通过 Axios 封装请求：
// src/api/news.js
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com'
});
export const getNewsList = () => instance.get('/news');
export const getNewsDetail = (id) => instance.get(`/news/${id}`);样式与布局
推荐使用 CSS 框架如 Tailwind 或独立样式文件：
/* src/assets/styles.css */
.news-list {
display: grid;
gap: 1rem;
}
.news-item {
border: 1px solid #eee;
padding: 1rem;
cursor: pointer;
}优化与扩展
懒加载与分页
在新闻列表中添加分页逻辑：
// 在 Pinia store 中
state: () => ({
page: 1,
pageSize: 10
}),
actions: {
loadMore() {
this.page++;
this.fetchNews();
}
}SEO 优化
使用 Vue Meta 或 SSR 方案（如 Nuxt.js）：
npm install vue-meta部署准备
构建生产环境代码：
npm run build部署到静态托管服务（如 Vercel、Netlify）或 Nginx 服务器。
