当前位置：首页 > VUE

基于vue实现新闻前台

2026-02-09 14:54:56VUE

Vue 新闻前台实现方案

项目初始化与配置

使用 Vue CLI 快速搭建项目框架，安装必要依赖：

vue create news-frontend
cd news-frontend
npm install axios vue-router vuex --save

路由配置

在 src/router/index.js 中配置新闻相关路由：

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    children: [
      {
        path: '',
        name: 'NewsList',
        component: () => import('@/views/NewsList.vue')
      },
      {
        path: '/detail/:id',
        name: 'NewsDetail',
        component: () => import('@/views/NewsDetail.vue')
      }
    ]
  }
]

新闻列表组件实现

创建 src/views/NewsList.vue 组件：

<template>
  <div class="news-container">
    <div v-for="item in newsList" :key="item.id" class="news-item">
      <router-link :to="'/detail/' + item.id">
        <h3>{{ item.title }}</h3>
        <p>{{ item.summary }}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  async created() {
    const res = await this.$http.get('/api/news')
    this.newsList = res.data
  }
}
</script>

新闻详情页实现

创建 src/views/NewsDetail.vue 组件：

<template>
  <div v-if="news" class="detail-container">
    <h1>{{ news.title }}</h1>
    <div class="meta">
      <span>{{ news.author }}</span>
      <span>{{ news.publishTime }}</span>
    </div>
    <div class="content" v-html="news.content"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      news: null
    }
  },
  async created() {
    const id = this.$route.params.id
    const res = await this.$http.get(`/api/news/${id}`)
    this.news = res.data
  }
}
</script>

API 请求封装

在 src/utils/http.js 中封装 axios：

import axios from 'axios'
const instance = axios.create({
  baseURL: 'https://your-api-domain.com',
  timeout: 5000
})
export default instance

状态管理（可选）

对于复杂场景可使用 Vuex 管理新闻状态：

// src/store/modules/news.js
export default {
  state: {
    cachedNews: {}
  },
  mutations: {
    cacheNews(state, payload) {
      state.cachedNews[payload.id] = payload.data
    }
  }
}

样式优化

建议使用 CSS 预处理器如 SCSS：

基于vue实现新闻前台

.news-container {
  max-width: 800px;
  margin: 0 auto;
  .news-item {
    padding: 15px;
    border-bottom: 1px solid #eee;
    &:hover {
      background-color: #f9f9f9;
    }
  }
}