Web开发-前端框架

如果你发现自己需要写注释，就再想想看是否有办法翻盘，用代码来表达。每次用代码来表达，你都该夸奖一下自己。每次写注释，你都该做个鬼脸，感受自己在表达能力上的失败。

Vue

官网：Vue.js - 渐进式 JavaScript 框架 | Vue.js

基本定义：

• 框架类型 ：前端 JavaScript 框架
• 目标 ：免去直接操作 DOM，简化代码书写
• 核心思想 ：基于 MVVM (Model-View-ViewModel) 模式
• 特性 ：数据双向绑定，编程关注点集中在数据逻辑而非 UI 更新

Vue3快速上手

引入Vue框架只需要我们导入Vue.js文件，地址：

https://unpkg.com/vue@3/dist/vue.global.js

使用ES模块构建版本：

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

• createApp(...)：创建一个Vue应用实例。
• data()：在这里定义的响应式数据、方法如果被返回，就可以被模板使用
• .mount('#app')：挂载应用到指定DOM容器。

整体执行流程

1. createApp({...}) → 创建 Vue 应用实例。
2. date() 执行 → 定义响应式数据 message。
3. return { message } → 让模板能用到 message。
4. .mount('#app') → 绑定 #app，渲染出 Hello Vue!，并监听数据变化。

Vue常用指令

指令	用途	示例代码	注意点
v-bind	动态绑定 HTML 属性值（如 href、class、style等）	html<a v-bind:href="url">跳转</a><img :src="imgUrl" alt=""/>	可用 :缩写，例如 :class；绑定 style时可用对象或数组形式
v-model	表单元素双向数据绑定	html<input v-model="username"/>``{{ username }}	底层相当于 :value+@input组合；适配多种表单元素（input、textarea、select）
v-on	事件绑定	html<button v-on:click="handleClick">点我</button><button @click="handleClick">简写</button>	支持事件修饰符 .stop、.prevent、.once等
v-if	条件渲染（元素在条件为 true时渲染，否则销毁）	<p v-if="score" >= 90">成绩优秀</p>	频繁切换可能影响性能，因为会反复创建/销毁节点
v-else-if	条件渲染的 else-if 分支	<p v-else-if="score" >= 60">成绩及格</p>	必须跟在 v-if或 v-else-if后
v-else	条件渲染的 else 分支	<p v-else>需要加油</p>	必须紧挨在 v-if/v-else-if后面
v-show	条件渲染（通过 display切换显示/隐藏）	<p v-show="isVisible">这段文字可以被快速隐藏/显示</p>	节点始终存在于 DOM 中，仅切换样式，适合频繁切换
v-for	列表渲染	<li v-for="(item, index) in items" :key="index"> {{ index + 1 }}. {{ item }} </li>	必须有唯一 key以优化性能；支持对象遍历

Vue生命周期

生命周期 ：指组件从 创建 → 挂载 → 更新 → 销毁 的整个过程。

在每个阶段，Vue 会自动调用对应的 生命周期钩子函数 （Hooks）让我们在特定时机执行逻辑。

生命周期的八个阶段& 钩子方法：

阶段顺序	钩子方法	触发时机	常见用途
①	beforeCreate	实例初始化之前（data 和 methods 未初始化）	初始化非响应式数据、加载全局配置
②	created	实例创建完成（data 已初始化，但 DOM 未挂载）	发起 Ajax 请求、初始化数据状态
③	beforeMount	模板编译完成，但尚未挂载到 DOM	在渲染前进行最后的数据修改
④	mounted	组件挂载到 DOM 之后	操作真实 DOM、第三方插件初始化
⑤	beforeUpdate	响应式数据更新、DOM 重新渲染前	在渲染前保存状态、调试数据变化
⑥	updated	虚拟 DOM 重新渲染并应用到真实 DOM 后	根据最新 DOM 状态执行逻辑
⑦	beforeUnmount	组件实例销毁前	清除定时器、解绑事件、保存数据
⑧	unmount	组件已销毁	释放资源、断开 WebSocket 连接等

• mounted：挂载完成,Vue初始化成功,HTML页面渲染成功。(发送请求到服务端,加载数据)

Vue3重写 mounted钩子方法：

<div id="app">
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

createApp({
  data() {
    return {
      emps: []
    }
  },
  mounted() {
    axios.get('http://yapi.smart-xwork.cn/mock/169327/emp/list')
      .then(result => {
        this.emps = result.data.data
      })
      .catch(error => {
        console.error('获取员工数据失败', error)
      })
  }
}).mount('#app')
</script>

Ajax

官方文档：AJAX 简介

概念：

• Ajax ： Asynchronous JavaScript and XML （异步 JavaScript 与 XML）。
• 核心思想：在不刷新整个页面的情况下，与服务器进行数据交换并动态更新页面局部内容。

主要作用：

功能	说明	典型场景
数据交换	在前端与服务器间发送请求、接收响应数据	表单数据提交、加载更多内容
异步交互	局部页面更新，提升用户体验	搜索联想提示、用户名可用性验证

示例代码：

function getData() {
    // 1. 创建请求对象
    var xhr = new XMLHttpRequest();

    // 2. 配置请求
    xhr.open('GET', 'http://yapi.smart-xwork.cn/mock/169327/emp/list');

    // 3. 发送请求
    xhr.send();

    // 4. 监听响应
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            document.getElementById('div1').innerHTML = xhr.responseText;
        }
    }
}

Axios

官网：Axios

Axios 是一个基于 Promise 的 HTTP 客户端库 ，可以在 浏览器 和 Node.js 环境中发送请求。

封装了 XMLHttpRequest（浏览器端）或 http 模块（Node.js 端），提供了更简洁、直观的 API。

使用Axios

首先需要引入Axios：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

发送异步请求：

1. 配置对象写法：

axios({
  method: 'post',
  url: 'https://api.example.com/users',
  data: { name: 'Bob', age: 30 }
}).then((result) => {
  console.log(result.data);
});

2. 请求方式别名：axios.get、axios.post、axios.delete、axios.put

// 简单 GET
axios.get('https://api.example.com/users')
  .then(res => {
    console.log(res.data); // 自动解析 JSON
  })
  .catch(err => console.error(err));

// 带参数 GET
axios.get('https://api.example.com/users', {
  params: { id: 123, status: 'active' }
});

axios请求参数

1. axios.get(url[,config])
2. axios.post/put/patch(url[, data, config])

url：

• 请求地址，可以包含路径参数和查询参数(手写在url中)

  axios.get('/user?id=1');

data：

• 承载要提交给服务器的内容。

• 可接收对象：

  • 对象(默认转成JSON)
  • 字符串(原样发送)
  • FormData/URLSearchParams/Blob等特殊类型

  // JSON 格式
  axios.post('/user', { id: 1 }); //服务器会用json解析器来读数据
  
  
  // 表单格式
  axios.post('/user', 'id=1&name=Alice&age=25', {	// 服务器会用表单解析器来读数据
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }	//可以不写，用于增强可读性声明'id=1&name=Alice&age=25'为表单数据
  });

config：

• 常见字段：

  • params：会被序列化并拼接到URL查询字符串上
  • headers：请求头设置
  • 其他：timeout、auth、responseType

  axios.post('/user', null, { params: { id: 123 } });
  // 发送到 /user?id=123

前端工程化

前后端分离开发

前后端分离开发 ：前端负责界面与交互逻辑，后端负责业务逻辑与数据处理，两者通过 API 接口 进行数据交互。

目标 ：提高开发效率，减少依赖，前后端可并行工作，提升可维护性和可扩展性

YAPI

私有部署教程以及文档：YApi 接口管理平台

官方提供的公共服务：YApi Pro-高效、易用、功能强大的可视化接口管理平台

YApi 是一个 高效、易用、功能强大的可视化 API 管理平台 ，专为开发、产品、测试等角色设计，旨在让接口的设计、管理、调试、Mock 更加优雅和高效。

它的核心理念是：

让接口开发更简单高效，让接口管理更具可读性、可维护性，让团队协作更合理。

核心功能：

功能模块	说明	典型价值
项目管理	支持项目分组、权限管理、成员管理	清晰的团队协作结构
接口管理	可视化接口文档、WebSocket 多人协作编辑、类 Postman 测试工具	提升接口开发与调试效率
Mock 服务	基于 Mock.js，支持规则生成随机数据	前端可独立调试，无需等待后端
权限管理	扁平化管理模式，超级管理员 → 组长 → 成员	减少审批链路，加快迭代
接口测试	内置接口调试工具，支持自动化测试	保证接口稳定性与正确性

什么是Mock

• 指在测试或开发过程中，用 虚拟对象 （Mock 对象）来替代真实的依赖对象或服务，从而在不依赖真实环境的情况下进行功能验证和调试。

前端工程化

环境准备

Vue3项目

• 定义 ：Vue 官方提供的脚手架工具，用于快速生成 Vue 项目的模板。
• 作用 ：帮助开发者高效创建符合最佳实践的 Vue 项目结构。

核心功能：

功能	说明
统一的目录结构	保持不同项目间的目录规范一致，便于协作与维护
本地调试	内置本地开发服务器，可即时查看修改效果
热部署（Hot Deployment）	修改代码后自动刷新页面，提高开发效率
单元测试	集成单元测试框架，便于代码质量保证
集成打包上线	提供打包工具和配置，便于一键部署到生产环境

依赖环境：Node.js — Run JavaScript Everywhere

创建Vue3项目

安装好nodejs后，我们在工作目录下打开powershell输入：

npm create vue@latest

这会安装create-vue，它是 Vue 官方的项目脚手架工具。我们输入y表示确认安装。

之后我们输入项目名称，然后选择包含的功能：

如果你不知道某一功能是什么，那么就不要勾选

功能	作用	典型应用场景
TypeScript	为项目引入强类型系统，提供类型检查与更好的 IDE 提示，减少运行时错误	复杂业务、多人协作、需要长期维护的项目
JSX 支持	允许在 .vue外使用 JSX/TSX 语法编写组件，更灵活的逻辑和渲染控制	需要在模板中编写复杂逻辑、或从 React 迁移过来的项目
Router（单页面应用开发）	集成 Vue Router，支持多页面路由、嵌套路由和动态路由	SPA 应用、需要页面切换的后台管理系统
Pinia（状态管理）	官方推荐的新一代状态管理库，替代 Vuex，API 更简洁，支持 TypeScript	多组件间共享数据、需要持久化的应用
Vitest（单元测试）	轻量快速的单元测试框架，与 Vite 深度集成，支持热更新测试	功能模块验证、算法测试、回归测试
端到端测试（E2E Testing）	模拟真实用户在浏览器中的操作，验证全流程功能	大型应用上线前验证、关键用户流程保障
ESLint（错误预防）	统一代码风格、检测潜在错误，支持自动修复	团队协作、代码审查前自动格式检查
Prettier（代码格式化）	自动统一代码排版，使格式一致、美观	跨团队协作、快速保持代码可读性

然后让我们选择实验功能：

还是秉持不了解就不勾选的原则。

功能	说明	适用场景	注意事项
OxLint（试验阶段）	新一代 JavaScript/TypeScript 代码检查工具，目标是比 ESLint 更快、更轻量，支持现代语法和规则	想体验更高性能的代码检查，尤其是大型项目	生态和规则库还不如 ESLint 完善，可能需要自定义配置
rolldown-vite（试验阶段）	基于 Rust 实现的 Vite 打包器替代方案，旨在提升构建速度和资源优化效果	对构建速度要求极高的项目，或想测试最新打包技术	兼容性和插件支持可能不如 Vite 默认打包器成熟

选择是否有示例代码，我是新手，所以想看看示例代码：

终于创建完成了Vue3项目：

在让启动项目前，我们还需要执行这两个命令，以安装所需要的依赖。

npm安装时，依赖仅安装在当前项目中，所以每个项目启动前都需要执行 npm install安装依赖。

Vue项目目录

first-vue-project/
├── node_modules/          # npm依赖包目录
├── public/                # 静态资源目录
│   └── favicon.ico  
├── src/                   # 源代码目录
│   ├── assets/            # 资源文件目录
│   │   ├── main.css       # 全局样式文件
│   │   └── logo.svg       # Logo等图片资源
│   ├── components/        # Vue组件目录
│   │   ├── HelloWorld.vue 
│   │   └── TheWelcome.vue 
│   ├── router/            # 路由配置目录
│   │   └── index.js       # 路由配置文件
│   ├── views/             # 页面组件目录
│   │   ├── HomeView.vue   
│   │   └── AboutView.vue 
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口文件
├── .gitignore             # Git忽略文件配置
├── .vscode/               # VSCode配置目录
│   └── extensions.json    # 推荐的VSCode扩展
├── index.html             # HTML入口文件
├── package.json           # 项目配置和依赖管理
├── package-lock.json      # 依赖版本锁定文件
├── README.md              # 项目说明文档
└── vite.config.js         # Vite配置文件

配置文件

• package.json : 项目的核心配置文件，包含项目名称、版本、依赖包、脚本命令等
• vite.config.js : Vite构建工具的配置文件，定义开发服务器、构建选项、插件等
• index.html : 应用的HTML入口文件，Vite会自动注入构建后的JS和CSS文件
• .gitignore : 定义Git版本控制忽略的文件和目录
• README.md : 项目说明文档，通常包含项目介绍、安装和使用说明

src目录

• src/components（组件）：存放可复用的Vue组件，如按钮、表单、卡片等通用UI组件

• src/views（页面）：存放路由对应的页面级组件，每个文件通常对应一个路由页面

• src/router（路由）：

  • index.js : Vue Router配置文件，定义应用的路由规则和导航守卫

• src/assets（资源）：存放静态资源文件：图片、样式文件、字体文件等。

• main.js : 应用的JavaScript入口文件，创建Vue实例、挂载路由、全局配置等

• App.vue : 根组件，所有其他组件的父组件，定义应用的基本布局

public目录

存放不需要构建处理的静态资源，这些文件会直接复制到构建输出目录。

node_modules目录

npm安装的所有依赖包，由 package.json中的依赖自动生成，不应手动修改

Vue基础配置

配置端口号、外部访问、自动打开浏览器：

在你的 vite.config.js 文件中添加 server 配置：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueDevTools(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  server:{
    port: 3000,	// 修改为你想要的端口号
    host: true, // 可选：允许外部访问
    open: true // 可选：自动打开浏览器
  }
})

Vue项目的开发流程

index.html：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

这是一个普通的html文件，body部分定义了一个id为 app的div标签，然后引入了 src/main.js文件。

// 引入全局样式文件，使样式在整个应用中生效
import './assets/main.css'

// 从 Vue 库中引入 createApp 方法，用于创建应用实例
import { createApp } from 'vue'
// 引入根组件 App，作为应用的入口组件
import App from './App.vue'
// 引入路由实例，用于管理前端路由
import router from './router'

// 使用根组件 App 创建一个新的 Vue 应用实例
const app = createApp(App)

// 将路由插件注册到应用实例中，启用路由功能
app.use(router)

// 将应用挂载到页面中 id 为 'app' 的 DOM 节点上
app.mount('#app')

main.js中，我们将 App.vue中定义的Vue应用创建为实例，并最终挂载在index.html中的 <div>标签中。以达到渲染Vue程序的效果。

App.vue的Options API写法：

<!-- 模板区域，定义组件的 HTML 结构 -->
<template>
  <!-- 根容器，用于包裹组件内容 -->
  <div>
    <!-- 插值语法，渲染 data 中的 message 数据到页面 -->
    {{ message }}
  </div>
</template>

<!-- 脚本区域，定义组件的逻辑和数据 -->
<script>
export default{ // 导出一个默认的组件配置对象
  data(){ // data 选项，定义组件的响应式数据
    return { // 返回一个对象，包含该组件的数据
      message: 'Hello World' // 定义名为 message 的数据，初始值为 'Hello World'
    }  
  }, 
} 
</script>

• export default 用于将定义的Vue程序抛出，在 main.js中得以创建。
• Vue3已经支持多根节点（Fragment），不需要限制一个根容器。

Element组件库

基于Vue3开发的Element官网：一个 Vue 3 UI 框架 | Element Plus

Element入门

安装Element plus：在项目工作区中执行

npm install element-plus --save

完整引入：在 main.js中引入ElementPlus

//...
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

//...

// 注册 Element Plus 组件库
app.use(ElementPlus)

然后我们进入Element的组件库：Overview 组件总览 | Element Plus

假设我们想要使用该组件：

我们将代码直接复制到对应位置粘贴即可。

Vue路由

Vue Router

• Vue Router ：Vue.js 官方提供的前端路由解决方案
• 作用 ：根据 URL 路径动态加载并渲染不同的组件，实现单页应用（SPA）的页面切换

核心组成：

组件/类	作用描述
VueRouter	路由器类，内部维护路由表，根据当前 URL 决定 <router-view></router-view>中渲染哪个组件
<router-link></router-link>	用于创建导航链接，最终会被渲染为 <a></a>标签，点击可触发路由跳转
<router-view></router-view>	路由出口（视图容器），根据当前路由路径动态渲染对应组件

如果创建项目时没有安装，执行命令：

npm install vue-router@4

示例用法：

1. 在 src/router/index.js中配置路由

   import { createRouter, createWebHistory } from 'vue-router'
   import HomeView from '../views/HomeView.vue'
   
   const router = createRouter({
     history: createWebHistory(import.meta.env.BASE_URL),
     routes: [
       {
         path: '/',
         name: 'home',
         component: HomeView,
       },
       {
         path: '/about',
         name: 'about',
         // route level code-splitting
         // this generates a separate chunk (About.[hash].js) for this route
         // which is lazy-loaded when the route is visited.
         component: () => import('../views/AboutView.vue'),
       },
     ],
   })
   
   export default router

   • path：定义路由匹配的URL路径
     • 匹配规则：支持静态路径 /about，动态参数 /user/:id，通配符等。
   • name：路由的命名标识。
   • component：该路由对应渲染的Vue组件。
     • 直接加载：component: HomeView
     • 动态导入：component: () => import('../views/AboutView.vue')

2. 定义RouterLink

   <header>
       <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
   
       <div class="wrapper">
         <HelloWorld msg="You did it!" />
   
         <nav>
           <RouterLink to="/">Home</RouterLink>
           <RouterLink to="/about">About</RouterLink>
         </nav>
       </div>
   </header>

   • 点击Home字段就会跳转到哈希路径：#/
   • 点击About字段跳转到：#/about

3. 放置RouterView

   <template>
     <header>
       <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
   
       <div class="wrapper">
         <HelloWorld msg="You did it!" />
   
         <nav>
           <RouterLink to="/">Home</RouterLink>
           <RouterLink to="/about">About</RouterLink>
         </nav>
       </div>
     </header>
   
     <RouterView />
   </template>

   路由对应的页面内容会在RouterView标签处渲染。

Vue打包部署

打包项目：

npm run build

打包后的项目目录：/dist

Nginx代理静态页面

一个高性能、轻量级的 Web 服务器 、 反向代理服务器 ，同时支持 邮件代理（IMAP/POP3） 。

官网：nginx

目录结构及用途：

文件/目录	说明
conf	配置文件目录（如 nginx.conf）
contrib	额外的工具或脚本
docs	文档
html	默认网页目录（放置静态文件）
logs	日志文件（访问日志、错误日志）
temp	临时文件目录
nginx.exe	Nginx 主程序可执行文件