当前位置：首页 > news >正文

前端vue3项目学习

news 来源：原创 2025/7/10 10:20:09

鸽王经过一个多月的学习（断断续续吧，毕竟还有其他杂事），学的昏天黑地，终于把主线捋的差不多了。只能说，前端真不是人学的，涉及的语言语法太杂乱了，入门真的太难了。而后端，借助已有的成熟框架，上手比前端容易多了。（实际上我只学的一知半解，很多从未见过的语法特性，搞得人头大。）
在此期间，AI发展给我的学习带来了极大的便利，也推荐大家在AI辅助下学习。
ps: 回想自己还有很多开的坑，都没有补上，就汗流浃背了。
springbooot : https://start.spring.io/

1 技术说明
- 1.1 为什么会有这么多技术
- - 1.1.1 vite 前端构建工具（代码编译、依赖预构建、开发服务器支持）
  - 1.1.2 vue（代码框架）
  - 1.1.3 vite编译vue文件的流程（AI回答）
2 前端项目结构概览
- 2.1 index.html
- 2.2 main.js
- 2.3 App.vue
- 2.4 vite.config.js
- 2.5 jsconfig.json
- 2.6 package.json
- 2.7 node_modules
3 基于VUE的前端源码组成（src文件夹下的）
- 3.1 router/index.js
- 3.2 axios
- 3.3 stores/index.js
- 3.4 vue组件
4 语法补充（一些新的语法特性记录）(主要是javaScript)
- 4.1 Promise
- 4.2 import/export
5. HTML DOM（文档对象模型）
6.

1 技术说明

vue
vite
axios
pinna

涉及html、css、javascript等多种语言。

vite通过npm安装

npm install -g create-vite

pnpm 安装（需要管理员权限）

 npm install -g pnpm

1.1 为什么会有这么多技术

主要还是各种技术发展。这里只做简单介绍。
实际上，你无需过度关注其中的原理和实现，因为web开发的技术更新换代十分迅速，如果你只是一个应用者，化较多的时间在研究一些即将过时的技术是得不偿失的。

实际上，我们只需要知道捋清楚启动过程，

1.1.1 vite 前端构建工具（代码编译、依赖预构建、开发服务器支持）

官网
創建項目

pnpm create vite

ES（ECMAScript）‌ 是 JavaScript 语言的标准化规范，由 ECMA 国际组织制定。JavaScript 是 ES 的一种实现，两者关系类似于“标准”与“具体实现”‌。

2016年开始，浏览器才逐步支持ES6，而在此之前JavaScript 并没有提供原生机制让开发者以模块化的方式进行开发。

浏览器支持ES后，也就是说HTML中可以直接写JS，具体方式如下：

<script type="module" src="/src/main.js"></script>

按需构建项目，也就是说，只有当页面加载出来的时候，才会执行对应的代码。

如webpack 工具就是先将所有的源代码进行打包，打包后运行main.js文件。

Vite 是一款面向现代浏览器的前端构建工具，其核心目标是通过 ‌原生 ESM（ECMAScript Modules）‌ 和 ‌按需编译‌ 大幅提升开发效率，并在生产环境提供高性能打包。

vite的特性

开发模式基于原生 ESM 模块，按需编译，避免全量打包‌
生产构建依赖 Rollup，输出高性能代码‌

1.1.2 vue（代码框架）

vue是前端框架。众所周知，浏览器上运行的是html文件。vue组件相当于html的一个变体，更适合程序员编程开发。

而将vue转化为标准的JavaScript代码是vite的功能。
vue3，在一个单文件组件（SFC）的vue组件中，就包含了html、css、javascript三部分。

<script setup>
</script><template>
</template><style scoped>
</style>

1.1.3 vite编译vue文件的流程（AI回答）

Vite 通过 ‌原生 ESM 按需编译‌ 和 ‌插件机制‌ 实现 Vue 单文件组件（SFC）的编译

一、依赖预构建与插件加载‌
‌依赖预构建‌
Vite 启动时使用 esbuild 预转换第三方依赖（如 vue）为 ESM 格式，加速后续编译效率‌。

缓存机制：预构建结果存储在 node_modules/.vite，避免重复处理‌。
‌@vitejs/plugin-vue 插件激活‌
该插件是 Vue SFC 编译的核心，负责拦截 .vue 文件请求并触发以下操作：

通过 buildStart 初始化编译环境；
在 transform 阶段解析并转换 SFC 内容‌。
‌二、SFC 解析与编译‌
‌模板（Template）编译‌
‌AST 生成‌：解析器将== < template > == 内容转换为抽象语法树（AST），标记元素、属性及动态表达式‌。
‌渲染函数生成‌：AST 经过转换器优化后，由代码生成器输出 JavaScript 渲染函数（如 render()）‌57。
‌动态编译‌：支持运行时编译模板字符串（如 v-html 动态内容）‌。
‌
脚本（Script）处理‌
‌TypeScript/Babel 转换‌：通过 @vitejs/plugin-vue 调用 @babel/core 或 esbuild 处理 < script > 中的代码，支持 TS 语法和语法降级‌。
‌组合式 API 支持‌：自动处理 setup 语法糖，转换为标准 JavaScript 代码‌。

‌样式（Style）处理‌
‌CSS 预处理器‌：内置支持 Sass/Less，编译 < style > 为 CSS，并通过 < style > 标签注入页面‌。
‌模块化（Scoped CSS）‌：通过 PostCSS 添加哈希属性（如 data-v-xxx），实现样式局部作用域‌。

2 前端项目结构概览

在这里插入图片描述

2.1 index.html

在vue3中，index.html是始终运行的文件，所有的组件都是挂在在这个DOM树上的。

<!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>

这里面有两行关键代码：
（1） id 指定了vue组件的挂载点。一個標簽被稱爲一個DOM，組件是挂在這個DOM上的。

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

与main.js中，xxx.mount('#app') 中的#app的app对应（实际上，此处不一定要写app，只要 id=“kkk”, .mount(‘#kkk’)对应就行。

（2）module指定了vue入口代码

<script type="module" src="/src/main.js"></script>

此处，<script type="module">是在ES模块的方法（浏览器已经广泛支持）

2.2 main.js

2.3 App.vue

根组件

2.4 vite.config.js

该文件是面向vite的，加载vite的相关配置。只不过配置文件是用js写的。
vite是node下的一个开发服务器。vite运行时，会自动解析项目根目录下名为vite.config.js的配置文件。

export default defineConfig()

defineConfig 用于定义vite配置。
入口参数为对象 {}

补充：js用{}标识一个对象，无需集合数据类型。键值对形式组成，逗号分隔。

{
server:{},//后端服务器相关配置
plugins:[vue()],//使用vue插件
resolve:{//模块解析相关配置alias:{'@': fileURLToPath(new URL('./src', import.meta.url)) //将@别名指向src目录}
},
}

这里举一个案例：

// 引入 Node.js 的 URL 模块中的 fileURLToPath 和 URL 函数
import { fileURLToPath, URL } from 'node:url';// 引入 Vite 的 defineConfig 函数，用于定义 Vite 配置
import { defineConfig } from 'vite';
// 引入 Vite 的 Vue 插件
import vue from '@vitejs/plugin-vue';// 使用 defineConfig 函数定义 Vite 配置，并导出默认配置对象
export default defineConfig({// 服务器配置server: {port: 5173, //前端的开发服务器端口，默认5173open: true // 启动时自动打开浏览器，默认false// 代理配置，用于将本地开发服务器的请求转发到其他服务器。proxy: {// 可以配置多个代理，这里只配置了一个 '/api'// 配置 /api 开头的请求代理 （后端的连接信息）'/api': {// 目标服务器地址target: 'http://localhost:8080',// 是否改变请求的原点（Origin）changeOrigin: true,// 重写请求路径，将 /api 开头替换为空字符串rewrite: (path) => path.replace(/^\/api/, ''),},},},// 插件配置，用于引入 Vite 插件plugins: [// 引入 Vue 插件vue(),],// 解析配置，用于配置模块解析选项resolve: {// 配置别名，用于简化模块导入路径alias: {// 将 '@' 别名映射到 src 目录的绝对路径'@': fileURLToPath(new URL('./src', import.meta.url))}}
});

2.5 jsconfig.json

jsconfig,json主要是针对javascript编辑及处理是的一个配置文件，在该文件下，同样可以配置路径别名。
通常来说，这里的路径别名设置最好与vite.config.js中配置保持一致。（优先级vite.config.js更高）

{"compilerOptions": {"paths": {"@/*": ["./src/*"]}},"exclude": ["node_modules", "dist"]
}

2.6 package.json

注意：该文件不可手动需改，是通过npm install自动生成。还有一个pnpm-lock.yaml文件，可以用于版本锁定。都是自动生成的，不要手动修改。

定义项目元数据、依赖关系和脚本命令
元数据如：name、version等
依赖关系：生产依赖dependencies 开发依赖devDependencies
脚本命令：scripts中的内容

{"name": "chart_vue","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"pinia": "^3.0.1","vue": "^3.5.13","vue-router": "^4.5.0"},"devDependencies": {"@vitejs/plugin-vue": "^5.2.1","vite": "^6.2.1","vite-plugin-vue-devtools": "^7.7.2"}
}

2.7 node_modules

该文件夹下全是依赖包，通过命令行运行pnpm install或npm install安装，无需手动作任何修改。

3 基于VUE的前端源码组成（src文件夹下的）

axios、router、store（Pinia），这几个是必备的。

3.1 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

一般定义在./src/router/index.js中
导入的时候，可直接简写为: （这是因为js的默认查找规则，模块系统会自动查找./router文件夹下一个名为index.js的文件，进一步，如果import xxx 在index.js文件中并不存在，xxx将被赋予文件下的export default的对象。)

import router from './router'

一般，router用createRouter定义，并且，在页面跳转时需要设置路由导航受委。监听页面跳转。

<RouterView/>

上述标签相当于占位符，这个位置显示的内容有浏览器地址栏决定。
浏览器地址和页面之间的映射关系定义在路由router中。

3.2 axios

与后端交互
响应拦截器
官网：https://www.axios-http.cn/docs/example
axios是基于Promise的网路请求库（具体而言，是HTTP）

3.3 stores/index.js

状态管理器。这里用到了工厂、单例的设计模式。Pinia官网

3.4 vue组件

SPA（Single Page Application，单页应用）是一种特别的网页应用程序，它通过加载一个单个 HTML 页面并在用户与应用程序交互时动态更新该页面的相关部分，而不是加载新的页面来提供与传统网页应用程序类似的用户体验。

4 语法补充（一些新的语法特性记录）(主要是javaScript)

4.1 Promise

参考官网1
参考官网2

Promise 是一个对象，它代表了一个异步操作的最终完成或者失败。本质上 Promise 是一个函数返回的对象，我们可以在它上面绑定回调函数，这样我们就不需要在一开始把回调函数作为参数传入这个函数了。

4.2 import/export

导入导出，默认导出，别名这些，
import {xxx } from aaa
import xxx from aaa
这两个区别就是，下一个为是默认的导入，上一个是通过名称导入。

5. HTML DOM（文档对象模型）

https://www.w3school.com.cn/js/js_htmldom.asp
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）DOM

6.

在 HTML 和 XML 等标记语言中，‌标签（Tag）‌、‌元素（Element）‌ 和 ‌属性（Attribute）‌ 是三个紧密相关但职责不同的核心概念。以下是它们的定义、区别和关系：

‌1. 标签（Tag）‌
‌定义‌：
标签是语法标记，用尖括号 < > 包裹，用于标识元素的‌开始‌和‌结束‌。
‌类型‌：
‌开始标签‌：如

，表示元素的起始。
‌结束标签‌：如

，表示元素的终止。
‌自闭合标签‌：如或
，用于没有内容的元素（空元素）。
‌作用‌：
标签定义了元素的边界，但不包含额外信息。
‌2. 元素（Element）‌
‌定义‌：
元素是由 ‌开始标签 + 内容 + 结束标签‌ 组成的完整结构（自闭合标签例外）。它是文档的‌逻辑单元‌。
‌组成‌：
html
Copy Code

Hello World

开始标签：

内容：Hello World 结束标签：

‌作用‌：元素代表文档中的一个独立部分（如段落、图片、按钮等）。 ‌3. 属性（Attribute）‌ ‌定义‌：属性是附加在‌开始标签‌中的键值对，用于提供元素的额外信息或配置。 ‌语法‌：示例：链接 ‌作用‌：配置元素的行为（如 href 定义超链接地址）。控制样式（如 class 或 id 用于 CSS 选择）。提供元数据（如 alt 描述图片内容）。

目录