Java.慈祥

TS和JS之间的关系其实就是Less/Sass和CSS之间的关系，TypeScript由微软开发，基于JavaScript的⼀个扩展语⾔，包含了JavaScript的所有内容静态类型检查、接⼝、 泛型等很多现代开发特性，更适合⼤型项⽬的开发；抽象类是一种不能被实例化的类，它主要用于作为其他类的基类抽象类通常包含抽象方法和非抽象方法，抽象方法是没有具体实现的方法，//创建一个形状的抽象类// 非抽象属性、方法// 面积抽象方法,没有具体实现。

一直都想做这个，但因为前端的文章还没写多少，不够撑起来…就一直没写，最近终于忙完了，趁着摸鱼的时间来梳理一下前端，还有未来更新的Demo。

或或新建利用创建一个自定义的axios来使用；// TODO 1. 基础地址，超时时间baseURL,})// 请求拦截器// TODO 2. 携带token},// 响应拦截器(res) => {// TODO 4. 摘取核心响应数据return res// TODO 3. 处理业务失败// 处理业务失败, 给错误提示，抛出错误ElMessage.error(res.data.message || '服务异常')},(err) => {// TODO 5. 处理401错误。

定义Store状态管理仓库// 定义store// defineStore(仓库的唯一标识, () => { ... })// 仓库唯一标识,也被称作id：是必须传入的,Pinia将用它来获取store// defineStore() 的第二个参数可接受两类值：Setup 函数或 Option对象,分别对应Vue3\Vue2写法;//以 Option对象,形式定义Pinia store库,貌似现在用的比较多,因为结构相对清晰,语法与Vux几乎类似;

更适合大型项目，需要高度定制化的构建流程，以及对成熟生态依赖较高的情况；

104-139集 》》🎯目标：冲击前后端全栈🔥，Java.慈祥的博客、本来想完整跟完一个项目Blog的，结果发现后面的全是业务逻辑；而业务逻辑不同的项目场景又都不同，接口又不稳定，所以这里就不继续了；

一级路由，定义为文件夹、index.vue主页面定义在所属的一级路由目录下；——————创建文件my-app/│├── src/│ ├── router/ # 定义路由组件配置 │ │ ├── index.js│ ├── views/ # 定义路由模块页面 │ │ ├── login/ #登录模块 │ │ │ │ ├── index.vue│ │ └── layout/ #首页模块——内涵多个二级子模块;│ │ │ │ ├── 首页.vue│ │ │ │ ├── 我的.vue。

在Vuex的store配置中，定义mutations键 =是=>事件类型(通常是大写命名)值=是=>处理函数// 创建仓库 store 状态,即数据:// 类似于vue组件中的data、data 是组件自己的数据;// state 中的数据整个vue项目的组件都能访问到;//开启严格模式state: {count: 10,title: "大标题1",},//mutations对象其中键是事件类型通常是大写命名)、值是处理函数;

和正常的Vuex中定义类似，如下：定义函数给模块内修改用户对象age值；

单页应用类网站：系统类网站 / 内部网站 / 文档类网站 / 移动端站点，如：网易云音乐多页应用类网站：公司官网 / 电商类网站，如：京东 https://jd.com/Vue Router为了提供更多的定制性，开发者可以自定义激活时的CSS类名；routes: [...], // 路由配置linkActiveClass: 'custom-active', // 自定义模糊匹配激活类名。

是Vue.JS提供的一组内置的功能指令，它们以v-这些指令使得开发者能够以声明式的方式实现数据与视图的绑定，从而简化了DOM操作；自定义指令：是Vue.js实现对DOM元素的定制化操作，这种机制为开发者提供了直接操作控制DOM能力；从而在不深入组件内部逻辑的情况下，增加或修改元素的行为；自定义指令分为： 全局注册、局部注册；在Vue中让指令在整个应用程序中可用的方法，通过调用方法完成；Vue的静态方法指令名称v-指令名称；定义对象：该对象内包含指令执行的生命周期钩子函数；指令第一次绑定到元素时触发。

适用场景：v-model更适合简单的表单输入双向绑定，而.sync适用于需要子组件修改父组件数据的复杂场景版本差异：在Vue 3中，.sync已被废弃，推荐使用Composition API中的方法来实现类似功能而v-model依然存在，且支持更广泛的类型和自定义行为灵活性：.sync提供了更灵活的双向绑定方式，尤其是在需要子组件影响父组件状态时而v-model则更专注于简化用户体验设计中的数据绑定。

前言： 紧跟前文，目标学习Vue2.0——3.0： 懂个锤子Vue、WebPack5.0、WebPack高级进阶 涉及的技术栈…当然既然学习框架的了，HTML+CSS+JS三件套必须的就不说了： JavaScript 快速入门学习前置链接： 懂个锤子Vue 项目工程化在 Vue 开发中，组件样式冲突是一个常见的问题： 为什么会发生组件样式冲突⁉️我们都知道，组件是由： 组成，每个组件都是有自己的三件套)但，因为Vue在运行过程中，本质是将多个组件合并成一个：html文件所以，多个组件样式，相互匹配就发生组件

node_modules/ # 存放项目的第三方依赖包public/ # 存放外部静态文件├── favicon.ioc # 网站图标├── index.html # 项目的入口 HTML 文件src/ # 项目的主要源码目录├── assets/ # 存放内部静态文件，如图片和字体图标├── components/ # 存放项目的公共组件└── HelloWorld.vue # 默认组件页面├── App.vue # 项目的主组件——>项目运行看到的内容就在这里编写。

cross-env是一个用于跨平台设置环境变量的工具，特别适用于在 Windows 和 Unix 系统之间进行兼容通过cross-env安装cross-env配置在中添加脚本，使用cross-env设置环境变量//....省略部分代码;},配置将配置中根据NODE_ENV环境变量动态调整配置；//为方便管理引入Node 文件资源管理模块;//WebPack配置://...省略部分代码,module:{ //加载器:rules: [ //规则列表://优化-提取 css 代码。

Webpack是一个强大的静态模块打包工具🧰主要用于现代JavaScript应用程序，它从一个或多个入口点开始，构建一个依赖图，然后将项目中所需的每个模块打包成一个或多个bundle，这些bundle是静态资源，用于展示你的内容；指的是编写代码过程中，htmlcssjs图片、文件🖺等固定内容的资源；把静态模块内容，压缩，整合，转译等…🧊前端工程化；WebPack支持多种模块标准语法把less/sass转成css代码把ES6+降级成ES5Webpack是一个强大的静态模块打包工具🧰主要用于现代。

Vue2.0 零基础通俗易懂🎢本篇文章会持续更新，至Vue3.0+TS 整个前后端架构生态笔记，请多多关注； 当个笔记看也好鸭~本篇文章学习于尚硅谷，快速跳转 最近互联网环境真的爆炸啊，为了多一口饭吃还是赶紧学一下前端吧前置知识： 此篇并不适合初学者，学习Vue之前，还需掌握：HTML+CSS+JS 前端三件套；分享个人一些📄：JavaScript、 JavaScript新特性、前后端交互ajax、前端工程\模块化懂个锤子Vue🔨Vue是一套用于构建用户界面的渐进式JS框架 是中国程序员 尤雨溪

🆗，收拾一下心情让我们来聊一聊AJax吧，随着前端的飞速发展，前后的交互也发生了天翻地覆的变化：前后端交互的方式有很多： 、、、、这对新入行的朋友很不友好，乱七八糟都不知道学什么怎么学了，学了没用？？傻傻呼呼让人头疼😵😵本篇文章学习至： 黑马前端AJAX入门到实战 ✅官方文档也超级细致，细致到都不用看视频都能看懂了Axios框架全称 官方文档🔗不是一种新技术，本质上还是对原生的封装，用于、 HTTP客户端：HTTP请求响应工具；它基于 ，提供了一种简洁且强大的方式来发送异步请求，使用 Axios开

多中间件，本质和单中间件一样，与它们被添加到app.use(???的顺序相同；//程序自上而下: 先全局绑定的中间件先执行;app.use((req,res,next)=>{console.log("中间件1");next();});app.use((req,res,next)=>{console.log("中间件2");next();});

Node中的模块概念其本质就是对应一个个。

Adobe Photoshop，通常简称为PS是由Adobe Systems开发和发行的图像处理软件：支持多种图像格式，并允许用户进行图像修复、色彩校正、图形设计以及数字绘画等工作它提供了丰富的工具和功能，包括图层、选择工具、画笔、滤镜和特效，使用户能够进行高度复杂的图像编辑和创作图像处理、平面设计、广告摄影、网页制作、后期修饰、视觉创意于设计、界面设计等领域…自1990年发布以来，经历了多个版本的更新有三个大版本🆙最初版本传统的软件版本号迭代。

此处的接口是API前后端通信的桥梁，某些编程语言也有接口概念是一种编码语法…一个接口就是 服务中的一个路由规则 ，根据请求响应结果；接口的作用：实现不同软件之间的连接和通信：通过API，软件可以在业务上实现数据共享和交换提供软件开发人员的工具：API使开发人员可以快速设计和编写代码，简化软件的开发过程提高软件应用程序的性能：API通过有效地传递和处理数据，缩短数据处理时间，提高软件的响应速度接口的组成：接口访问地址：由协议、IP地址或域名、端口号、应用名和功能名组成。例如，请求方法。

MongoDB是一种流行的开源文档数据库，基于分布式文件存储的数据库；是一个介于关系数据库和非关系数据库之间的产品，它属于NoSQL数据库的一种，由C++语言编写；MySQL，它不遵循传统的表格结构，类似json的bson格式正因如此，对于JavaScript有天然的优势；

本篇文章，并不完全适合小白，需要有一定的HTML、CSS、JS、HTTP、Web等知识及基础学习：之后，让我们来认识一个新的盆友那是一个满是星星的夜晚，正把玩JS的我，想到一个问题，一个个单独的.JS文件，如何组合在一起成为一个项目看网上好多大佬，使用 JS 像Java一样导包、写脚本、甚至连接服务器写后端….，这是如何做到的呢🤔❓经过一番查找认识了它🎉学习NodeJS首先就是要掌握 JavaScript(这里不介绍了)

回调函数是一种函数，它作为参数传递给另一个函数并在后者执行完成或达到特定条件时被调用执行，这允许我们在需要的时候执行一些操作，而不必等待同步代码块的执行完毕//假设存在：函数x、函数y|x是y的回调函数//就是：将函数x，作为参数传递函数yy(x,...){//执行函数,//在特定的位置执行x() 函数;//如果x函数需要参数,可以定义在...也在y()函数中一起传递过来;//定义X函数: 用于加法运算;//定义y函数: 作为计算器验证判断参数是否是数值;

JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);