vuecli

一.vuecli基础积累

1.基础概念

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，通常被称为“脚手架”。它致力于将 Vue 生态中的工具基础标准化，确保各种构建工具能够基于智能的默认配置平稳衔接，让开发者可以专注于撰写应用，而不必花大量时间去纠结配置问题。

2.跨域

跨域是指浏览器从一个域名的网页去请求另一个域名的资源时，由于浏览器的安全限制而产生的拦截现象。
跨域是由浏览器的同源策略（Same-Origin Policy）造成的。这是一种著名的安全策略，它规定只有当请求的协议、域名和端口这三个部分完全相同时，才被视为“同源”。只要这三者中有任何一个不同，浏览器就会判定为“跨域”。
跨域不是后端的 Bug，而是浏览器的一种安全防护机制。在实际开发中，我们通常通过配置本地代理（Proxy）、Nginx 反向代理或后端设置 CORS 响应头等方式来“合法”地绕过这一限制。

3.IP,协议,端口号

在 Vue 开发中，这三个概念直接决定了你的本地开发服务器地址和跨域代理配置。简述如下：

IP（主机地址）

IP（主机地址）：你的电脑在局域网中的地址（如 192.168.1.100）。在 Vue 中，如果你想让手机或同事的电脑也能访问你正在写的项目，就需要在 vue.config.js 中将 host 设置为 '0.0.0.0' 或你的局域网 IP。

端口（Port）

端口（Port）：你本地 Vue 项目的“门牌号”（默认是 8080）。在 Vue 中，如果默认端口被占用，你可以修改 port 配置。同时，跨域问题往往就是因为前端（如 8080）和后端（如 3000）的端口不同而触发的。

协议（Protocol）

协议（Protocol）：数据传输的规则（如 http 或 https）。在配置跨域代理时，target 目标地址必须严格包含协议（如 target: 'http://localhost:3000'），且前后端协议不同也会触发跨域。

💡 Vue 实战关联：💡 Vue 实战关联：

这三者组合起来就是 源（Origin）。Vue 开发中最常用的跨域代理（Proxy），本质上就是利用本地 Node 服务器，把前端发出的 http://localhost:8080/api/xxx 请求，偷偷转发给真实的后端 http://真实IP:后端端口/api/xxx，从而完美绕过浏览器的同源限制。

4.路由

Vue 路由（Vue Router）是 Vue 官方提供的路由管理器。它的核心作用是管理 URL 与组件的映射关系，让单页面应用（SPA）在不刷新整个网页的情况下，实现页面的无缝切换。
核心三要素：
router：路由管理器实例，负责控制页面的跳转逻辑。
routes：路由表（数组），定义了“URL 路径”和“对应组件”的映射规则。
route：当前激活的路由信息对象（包含路径、参数等）。
最常用的两个组件：
<router-link>：用于声明式导航（点击跳转）。
<router-view>：路由出口，匹配到的组件会在这里渲染显示。

两种常见模式：

Hash 模式:URL 带 #（如 /#/about），兼容性好，无需后端特殊配置。
History 模式:URL 干净美观（如 /about），但需要后端配合配置，否则刷新会 404。

5.es6与es5转换

ES6 与 ES5 的转换，本质上是利用编译器（转译器）将采用最新 ECMAScript 标准编写的高级语法代码，安全、向后兼容地转换为广泛支持的旧版 JavaScript（ES5）代码。这一过程主要是为了解决浏览器兼容性问题与运行时环境限制，确保代码能在不支持 ES6 特性的旧环境中正常运行。

6.总体解析图片

7.在view页面中

created (生命周期钩子)
触发时机：组件实例创建完成，数据（data）已初始化，但 DOM 尚未挂载。
核心作用：用于初始化数据或发送网络请求（API调用）。
注意：此时无法操作 DOM 元素。
2. computed (计算属性)
核心作用：基于现有数据衍生出新数据（如格式化、拼接），保持模板简洁。
关键特性：自带缓存。只有依赖的数据发生变化时才会重新计算，否则直接返回缓存结果，性能优于 methods。
注意：默认为只读，不可直接赋值。

二.路由模式

1.简述

1. Hash 模式（默认）
URL 表现：URL 中带有 # 符号（如 http://example.com/#/home ）。
底层原理：基于浏览器原生的 hashchange 事件，# 后的内容不会发送给服务器。
优点：兼容性极好（支持老旧浏览器），无需后端服务器配置，部署简单。
缺点：URL 不够美观，对 SEO（搜索引擎优化）不友好。
2. History 模式
URL 表现：URL 干净美观，没有 # 符号（如 http://example.com/home ）。
底层原理：基于 HTML5 新增的 History API（pushState / replaceState）来修改 URL。
优点：URL 更符合传统网站规范，对 SEO 非常友好。
缺点：兼容性稍差（需 IE10+），必须要求后端服务器配合配置兜底规则（将所有前端路由请求转发到 index.html），否则刷新页面或访问子路径时会报 404 错误。
💡 选型建议
Hash 模式：
适合开发阶段快速调试、内部管理系统、或无法配置后端服务器的场景。
History 模式：
适合面向用户的正式前台项目（需要美观 URL 和 SEO 优化）。

Hash 模式：

Hash 模式：不刷新页面。点击链接时，只改变 URL 中 # 后面的内容，浏览器会触发 hashchange 事件，Vue Router 监听到后动态替换组件，整个过程没有向服务器发请求。

History 模式：

History 模式：不刷新页面。点击链接时，底层调用 history.pushState() 修改地址栏，Vue Router 监听到变化后动态渲染组件，同样不会向服务器发请求。

2.

Vue 中的路由默认是 hash 模式，使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。
修改 router/index.js，把模式改成 history。

const router = new VueRouter({
    mode: 'history',
    routes
})

404 错误（部署才会出现）：
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 http://localhost:8080/#/a ，因此对于后端来说，即使没有做到对路由的全覆盖，也不会返回 404 错误；
history 模式下，前端的 url 必须和实际向后端发起请求的 url 一致，如 http://localhost:8080/a 。如果后端缺少对 /a 的路由处理，将返回 404 错误。

3.标签含义

template：
用来编写结构，注意只能包含一个根标签。
style：
用来编写样式，可以写普通 CSS，也可以写 LESS，SCSS 等（但需要 Webpack 支持），其还有两个属性：
scope，有这个属性，局部样式，反之就是全局样式。
lang，只能编写 CSS 语言。
script
：用来编写数据和逻辑，这里默认使用 ES6 模块化，导入构建 Vue 对象的配置，只是其中数据需要定义名为 data 函数，在函数中返回要显示的数据。

4.在页面中

在控制台发送这个请求后,页面会跳转到真实的输入网址

输入这个请求可以发现,路径地址确实变了.但是没有发送请求,并且可以前后回退

当输入这个请求时会记录路径改变的次数

三.AJAX

它的核心作用是允许网页在后台与服务器进行数据交换，从而在不重新加载整个页面的情况下，动态更新网页的局部内容。

1. 核心特点

异步通信：用户在浏览器上的操作不会阻塞页面，请求在后台发送，用户无需等待服务器响应即可继续与页面互动。
局部刷新：只请求和更新页面中需要改变的小部分数据，避免了传统网页“牵一发而动全身”的全页重载，大幅提升了响应速度和用户体验。

2. 技术本质

AJAX 并不是一种全新的编程语言，而是一组现有技术的综合应用。它主要结合了：
HTML/CSS：用于页面内容的呈现和样式设计。
DOM：用于动态交互和更新页面显示的内容。
JavaScript：作为核心纽带，负责绑定用户操作、发起请求并处理响应数据。
XMLHttpRequest 对象：这是 AJAX 的基石，用于在后台与 Web 服务器进行异步数据交互（现代开发中也常使用更先进的 Fetch API）

. 常见应用场景

搜索提示：在搜索框输入时，实时显示相关的搜索建议（如自动补全）。
表单验证：在不刷新页面的情况下提交表单，实时提示登录状态或数据校验结果。
无限滚动：用户滚动到页面底部时，自动加载下一页的新内容。
数据仪表盘：定期从服务器获取最新数据并动态更新图表或表格。

四.axios

Axios 是一个基于 Promise 的 HTTP 客户端库，专为浏览器和 Node.js 环境设计，是目前前端开发中最主流的网络请求解决方案。
它支持自动转换 JSON 数据、请求/响应拦截器、取消请求、超时控制等功能，能显著提升异步请求的开发效率与用户体验。
Axios 的核心优势在于其简洁的 API 设计和强大的功能扩展性。它支持多种请求方法（如 GET、POST、PUT、DELETE），并可通过拦截器在请求发出前或响应返回后统一处理逻辑
例如自动添加 Token、全局错误提示或数据格式转换。此外，它还支持文件上传进度监控、并发请求管理以及防御 XSRF 攻击，适用于从简单页面到复杂工程化项目的各种场景。

---

---

---

一般写的时候使用原生发异步请求

写完配置后的主配置文件就长这样