【从0到1】Vue.js 示例项目实战：30分钟搭建企业级留言板应用

2026-01-29 12:15:37作者：余洋婵Anita

Vue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 Vue.js 开发 SPA。Webpack / ES6 + Babel / Vue Router / (Vue Resource?) / (Vue Validator?) / (Vuex?) —— An Excellent Vue Starter with Best Practice / 最佳实践

项目地址：https://gitcode.com/gh_mirrors/vue/vue-demo

引言：为什么选择这个Vue.js示例项目？

你是否还在为寻找合适的Vue.js入门项目而烦恼？面对众多教程却不知如何将理论转化为实际应用？本文将带你深入体验一个功能完备的Vue.js示例项目——简易留言板应用，通过实战操作帮助你快速掌握Vue.js开发单页应用（SPA）的核心技能。

读完本文后，你将能够：

理解Vue.js项目的基本架构与最佳实践
掌握Vue Router实现前端路由管理
学会使用Vue生态系统开发实际应用
熟练运用ES6+、Webpack等现代前端工具
从零开始搭建并运行一个完整的Vue.js应用

项目概述：Vue.js示例项目简介

项目基本信息

项目名称：GitHub 加速计划 / vue / vue-demo
项目描述：Vue.js 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释，让您快速上手 Vue.js 开发 SPA。
核心技术栈：Webpack / ES6 + Babel / Vue Router

项目特点与优势

该项目作为Vue.js的入门示例，具有以下特点：

特点	说明
结构清晰	采用模块化组织方式，便于理解和扩展
文档完善	提供详尽的使用说明和开发指南
最佳实践	融入Vue.js开发的最佳实践和设计模式
功能完备	实现了一个完整的留言板应用所需的全部功能
易于上手	适合Vue.js初学者快速入门和实践

项目架构

快速开始：从零搭建Vue.js示例项目

环境准备

在开始前，确保你的开发环境满足以下要求：

Node.js ≥ 6.x
npm ≥ 3.x 或 cnpm（推荐）

建议使用cnpm代替npm以提高国内访问速度：

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org

项目获取与安装

# 克隆项目仓库
git clone https://gitcode.com/gh_mirrors/vue/vue-demo

# 进入项目目录
cd vue-demo

# 安装项目依赖
cnpm i

项目启动与运行

开发模式

# 启动开发服务器
npm start

编译完成后，默认浏览器会自动打开 localhost:8080。若浏览器没有自动弹出，请手动访问该地址。

生产模式

# 构建生产版本
npm run build

编译完成后，将在项目根目录生成 dist/ 目录，包含所有编译优化后的文件。

项目结构解析

目录结构概览

vue-demo/
├── LICENSE
├── README.md
├── docs/                 # 项目文档
├── mock/                 # 模拟数据
├── package.json
├── screenshot.png
├── src/                  # 源代码目录
│   ├── app.js            # 应用入口
│   ├── assets/           # 静态资源
│   ├── components/       # Vue组件
│   ├── filters/          # 过滤器
│   ├── index.html        # HTML入口
│   ├── mixins/           # 混入
│   ├── routes/           # 路由配置
│   ├── services/         # 服务层
│   ├── utils/            # 工具函数
│   └── views/            # 视图组件
└── static/               # 静态文件

核心目录详解

src/目录

src目录是项目的核心代码目录，包含了应用的所有源代码：

app.js: 应用入口文件，初始化Vue实例
components/: 通用Vue组件
views/: 页面级组件
routes/: 路由配置
services/: API服务和数据交互
utils/: 工具函数

组件结构

项目采用了组件化的设计思想，将UI拆分为可重用的组件：

components/
├── App.vue              # 根组件
├── Breadcrumb.vue       # 面包屑组件
├── Navbar.vue           # 导航栏组件
├── Pagination.vue       # 分页组件
├── Select/              # 选择器组件
└── Sidebar/             # 侧边栏组件

核心功能实现

路由管理

项目使用Vue Router进行路由管理，配置文件位于src/routes/index.js：

// 路由配置示例
import Vue from 'vue'
import Router from 'vue-router'
import hooks from './hooks'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: require('../views/index')
    },
    {
      path: '/msg',
      name: 'msg',
      component: require('../views/msg/index')
    },
    // 更多路由配置...
  ]
})

// 应用路由钩子
hooks(router)

export default router

数据交互

项目通过services层进行数据交互，以留言板功能为例：

// msgService.js示例
import xhr from './xhr'

export default {
  /**
   * 获取留言列表
   * @param {Object} params - 查询参数
   * @return {Promise}
   */
  getMsgList(params) {
    return xhr({
      url: '/msg',
      params
    })
  },
  
  /**
   * 创建新留言
   * @param {Object} data - 留言数据
   * @return {Promise}
   */
  createMsg(data) {
    return xhr({
      url: '/msg',
      method: 'post',
      data
    })
  },
  
  // 更多方法...
}

开发实战：实现留言功能

功能概述

留言板应用的核心功能包括：

查看留言列表
添加新留言
编辑留言
删除留言
分页和搜索

组件实现

以留言列表组件为例，展示如何实现一个Vue组件：

<template>
  <div class="msg-list">
    <div class="msg-item" v-for="msg in msgList" :key="msg.id">
      <h3>{{ msg.title }}</h3>
      <p>{{ msg.content }}</p>
      <div class="msg-meta">
        <span>{{ msg.author }}</span>
        <span>{{ msg.createTime | dateTimeFormatter }}</span>
      </div>
      <div class="msg-actions">
        <button @click="editMsg(msg)">编辑</button>
        <button @click="deleteMsg(msg.id)">删除</button>
      </div>
    </div>
    
    <pagination 
      :current="currentPage" 
      :total="totalCount" 
      :page-size="pageSize"
      @change="handlePageChange">
    </pagination>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import pagination from '../../components/Pagination.vue'

export default {
  components: {
    pagination
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    ...mapState({
      msgList: state => state.msg.msgList,
      totalCount: state => state.msg.totalCount
    })
  },
  methods: {
    ...mapActions([
      'fetchMsgList',
      'deleteMsg'
    ]),
    handlePageChange(page) {
      this.currentPage = page
      this.fetchMsgList({
        page: this.currentPage,
        pageSize: this.pageSize
      })
    },
    editMsg(msg) {
      this.$router.push({
        name: 'msgEdit',
        params: { id: msg.id }
      })
    }
  },
  mounted() {
    this.fetchMsgList({
      page: this.currentPage,
      pageSize: this.pageSize
    })
  }
}
</script>

<style scoped>
/* 样式代码 */
.msg-list {
  padding: 20px;
}

.msg-item {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

/* 更多样式... */
</style>

路由配置

使用Vue Router实现SPA的路由管理：

// routes/index.js
import Vue from 'vue'
import Router from 'vue-router'
import hooks from './hooks'

// 导入路由映射
import map from './map'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: require('../views/index.vue')
    },
    ...map.auth,
    ...map.msg
  ]
})

// 应用路由钩子
hooks(router)

export default router

// routes/map/msg.js
export default [
  {
    path: '/msg',
    name: 'msg',
    component: require('../../views/msg/index.vue'),
    children: [
      {
        path: '',
        name: 'msgList',
        component: require('../../views/msg/list.vue')
      },
      {
        path: 'add',
        name: 'msgAdd',
        component: require('../../views/msg/add.vue')
      },
      {
        path: ':id',
        name: 'msgDetail',
        component: require('../../views/msg/detail.vue')
      },
      {
        path: ':id/edit',
        name: 'msgEdit',
        component: require('../../views/msg/update.vue')
      }
    ]
  }
]