什么是前端？
前端，简单来说，就是用户直接能看到和操作的部分，比如网页、App、小程序里的界面。前端负责做的事情：1、搭建网页或App的页面（比如按钮、表单、图片、商品列表）；2、处理用户的交互操作（比如点击、滑动、提交表单）；3跟后端沟通接口（比如拿商品数据，显示到页面上）；4、美化和优化界面体验（比如动画效果、加载速度）。
举例说明：你打开淘宝，看到首页有商品推荐，能点进商品详情页，这整个“能看到、能操作的部分”就是前端做出来的。而你在点击“购买”之后，背后查库存、生成订单，就是后端在处理。
前端项目结构及介绍
在 Vue 项目中，代码大致分成三大部分（也叫三层），主要目的是便于开发和维护，主要分为页面布局部分、页面数据部分、页面数据交互处理部分：
【其它模块等下会讲明，先讲解最为重要的页面开发部分】
1. 视图层（View）
- 主要内容：就是页面上能看到的内容，比如按钮、输入框、列表、图片等等。
- 写在哪里？：HTML 模板里（Vue的 <template> 部分）
- 作用是什么？：
- 把数据展示出来
- 负责和用户进行交互（比如点击、输入）
- 简单理解：就像前台窗口小姐姐，负责“面对用户”，把后台准备好的数据，漂漂亮亮地展示出来。
例子：
<template><div><h1>{{ title }}</h1><button @click="changeTitle">点我换标题</button></div></template>
2. 数据层（Model）
- 主要内容：就是页面上展示的数据本体，比如用户名字、商品价格、新闻列表等。
- 写在哪里？：data() 函数中
- 作用是什么？：
- 保存数据
- 数据变化了，页面会自动同步更新（Vue的核心特性：响应式）
- 简单理解：就像“后台仓库”，负责存放所有重要数据，用户操作改变数据后，前台马上刷新。
例子：
<script>export default {data() {return {title: '欢迎来到我的网站'}}}</script>
3. 逻辑层（ViewModel）
- 主要内容
：是处理页面上各种动作和逻辑，比如： -
点击按钮以后要做什么？ -
提交表单要发请求？ -
切换主题、跳转页面？ - 写在哪里？
methods 方法里，一部分是处理逻辑操作，一部分是和后台接口数据交互的逻辑，有时也用到 computed、watch等钩子，预先加载一些数据。或者动态监听数据变化。 - 作用是什么？
-
负责“指挥”数据怎么变化 -
负责“响应”用户的操作 - 简单理解
像中间协调员（ViewModel），连接用户操作（View）和数据变化（Model）。
例子：
<script>export default {data() {return {title: '欢迎来到我的网站'}},methods: {changeTitle() {this.title = '谢谢你的点击！'}}}</script>
整体图理解一下
用户操作（点击按钮）↓View 视图层（模板）↓ViewModel 逻辑层（methods 处理）↓Model 数据层（data 改变）↓View 视图层（页面自动刷新）
标准项目脚手架说明
首先，Vue 脚手架（比如用 vite 或 vue-cli 创建的项目），其实就是帮我们搭建好了一个完整的开发环境+项目结构，让你不用从零配置，开箱即用。前端项目基本上都是脚手架搭建好基础框架，然后在这个基础上进行开发：
vue2-project/├── build/├── config/├── node_modules/├── static/├── src/│ ├── api/│ ├── assets/│ ├── components/│ ├── router/│ ├── store/│ ├── utils/│ ├── views/│ ├── App.vue│ └── main.js├── .babelrc├── .eslintrc.js├── package.json├── README.md└── index.html
各个模块作用大致如下：
项目结构模块详细说明
这个截图是我开发的一个前端Vue2 项目目录结构，基本上 前端Vue2 项目都包含如下相关模块，我会对每个模块都进行详细的说明：
1.接口类（src/api/）干啥的？
这里专门放和后端服务器交互的代码。比如：想要获取用户列表、提交注册信息、获取文章内容等，都需要发请求，这些请求接口集中放这里。简单理解：接口类就是前端和后端沟通的桥梁，统一管理所有“拿数据、发数据”的地方。
2. 静态资源模块（src/assets/ 或 static/）
小例子：
- assets/logo.png → 项目Logo
- assets/global.css → 通用样式表
页面里引用时直接用，比如：
<img src="@/assets/logo.png" />
|
3. 组件模块（src/components/）
把项目里能重复用的小模块单独封装成组件。比如：按钮、分页器、弹窗、表格，这些地方多次使用的话，不用每次都重新写。简单理解：组件模块就是把常用功能打包成乐高积木，要用时直接拿过来拼装。
小例子：
- Button.vue 👉通用按钮
- Modal.vue 👉弹窗组件
- Pagination.vue 👉翻页器组件
在页面中直接引用，比如：
<Button text="点击我" />
|
4. 路由跳转（src/router/）
管理不同页面之间怎么跳转，用户点不同的菜单/链接，对应打开不同的页面。简单理解：路由就是给项目画好地图，告诉浏览器："点击这里，跳到哪里。"
小例子：
// src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue' Vue.use(Router) export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/about', component: () => import('@/views/About.vue') }
]
})
|
👉访问/about，就打开 About 页面！
5. 页面部分（src/views/）
小例子：
- Home.vue 👉首页内容
- Login.vue 👉登录界面
- UserProfile.vue 👉用户个人中心
前端（Vue2）项目，就像搭积木盖房子
数字 1、表示获取后端开发学习资料
数字 2、表示获取前端开发学习资料
数字 3、表示获取 软考中级设计师资料
数字 4、表示获取后端常用在线免费学习资料
数字 5、计算机毕业设计优秀论文模板
数字 6、前后端分离项目案例源码
数字 7、SSM项目案例源码
数字 8、视频轮播图全部案例源码
数字 9、商城系统项目 前后端分离源码
数字10：商城系统源码 前后端分离项目【毕业设计系统】
数字11：毕业论文答辩PPT模板案例
数字12：系统部署+论文指导+开题指导+开发指导
数字13：万字答辩问题汇总文档
数字14：前后端项目结构模块详细讲解说明（小白可懂）
数字15：协同过滤算法+敏感词过滤+SpringBoot+Vue 商城源码
数字16：微信小程序考勤打卡 系统源码
更多。。。