csj50的专栏

1、JSX是JavaScript XML，是一种语法，由Meta公司发布，浏览器是不支持这种语法的。2、在编写React组件视图结构时，JSX是可选的。

特点：用函数式编程，没有生命周期，也没有state，没有this，没有上下文，没有ref，什么特性都没有。组件是UI（用户界面）的一部分，它拥有自己的逻辑和外观。特点：用ES6面向对象语法，有生命周期、有this、有state、有上下文、有ref。3、React组件有两种写法，一种是类组件的写法，一种是函数式组件写法。React组件必须以大写字母开头，而HTML标签则必须是小写字母。缺点：相对函数式组件来讲，性能较差。优点：相对于类组件，性能较好。（2）用代码和标签编写组件。（1）用组件创建用户界面。

这是同步加载，webpack打包时就会把dog.js代码和app合并在一起，如果dog模块代码非常大，生成的文件就很大。当webpack打包时，只要遇到()=>import()这样的语法，会切割生成一个新的JS文件（chunk）比如在文件中有方法在项目中任何地方都没用到，可以开启tree-sharking，把这个死代码摇掉。dog现在是function，现在没有调用，不会引入app.js，会新开一个js文件。入口文件main.js，可以理解是树根，main.js和后面所有模块产生树结构的关系。

本文介绍了如何在webpack开发环境中集成ESLint进行代码检测。主要步骤包括：安装eslint-webpack-plugin和eslint依赖；配置webpack的serve.js文件，设置ESLint检测规则；使用eslint向导生成配置文件eslint.config.mjs；解决React全局变量未定义问题；配置node环境变量以消除require等语法警告。最终通过修改eslint.config.mjs文件，整合了ESLint、TypeScript和React的推荐配置，实现了完整的代码检测功能

摘要：本文介绍了在Webpack中处理图片模块的两种方法。在Webpack 5.0之前版本，需要使用file-loader和url-loader来转换图片为链接或base64编码。而在Webpack 5.0中，推荐使用asset/resource类型处理图片资源，相当于file-loader的功能。详细演示了如何在webpack配置文件中配置图片处理规则，包括修改module.rules部分，指定图片文件的处理方式和输出路径。两种方法都能实现图片的打包处理，但Webpack 5.0的内置asset模块方案更

本文介绍了如何为webpack项目集成CSS和SASS支持。首先创建app.css文件定义基础样式，然后安装style-loader和css-loader。重点说明了webpack配置中module.rules部分如何添加CSS处理规则：当遇到.css文件时，先由css-loader解析CSS代码，再由style-loader将样式插入HTML的head标签。规则排除了node_modules目录，同时展示了完整的webpack配置文件结构，包括入口、出口、插件等基本配置。通过这种方式，webpack可以正

【Webpack编译优化配置】 通过配置webpack.config.js将第三方库与业务代码分离： 在entry中定义vendors入口，包含react等第三方库 业务代码入口app通过dependOn声明依赖vendors 输出配置使用[name].[chunkhash:8].js生成带哈希的文件名 配合HtmlWebpackPlugin实现自动注入 使用ProvidePlugin全局提供React变量 优化效果： 第三方库独立打包，便于CDN部署 业务代码与依赖分离，提升缓存利用率 每次构建自动清理旧

本文介绍了在项目中集成JSX语法的步骤：1)安装React相关依赖(react, react-dom)；2)创建React根组件App.jsx；3)配置main.js作为入口文件并挂载组件；4)安装babel预设(@babel/preset-react)处理JSX语法；5)修改webpack配置，通过babel-loader处理.jsx文件扩展名。重点说明了react用于组件封装，react-dom负责DOM挂载，以及babel预设和webpack loader的配合使用来实现JSX语法支持。

本文介绍了webpack中使用loader处理ES6+语法的步骤：1.安装babel相关包（babel-loader、@babel/core、@babel/preset-env）；2.配置webpack.config.js，设置js文件使用babel-loader处理；3.创建babel.config.js定义编译规则，使用@babel/preset-env预设将ES6+代码转换为ES5。通过配置loader实现webpack对不同模块文件的预处理，解决浏览器不识别最新语法的问题。

Webpack是一个模块化打包工具，能够将各种前端资源打包成浏览器兼容的静态文件。它采用从入口文件开始的依赖分析机制，将每个文件视为模块。搭建Webpack环境需要先安装Node.js和npm/yarn，创建项目目录并初始化package.json文件。然后通过npm或cnpm全局和本地安装webpack核心包及webpack-cli工具，为后续的模块化开发和打包构建做好准备。整个配置过程体现了现代前端架构的技术选型能力。

本文介绍了Pinia在Vue3中的安装与使用。首先通过npm安装Pinia并在main.ts中引入。然后详细说明了如何创建store：定义state、getters和actions，并强调store命名需以"use"开头。在组件中使用时，可以通过$patch直接修改state或调用actions方法更新数据。文章特别指出，解构store变量会导致响应式丢失，需使用storeToRefs保持响应性。最后展示了模板中调用store数据和方法的示例代码。

本文介绍了Vue3项目中集成Vue Router(v4)的全过程。首先通过npm安装依赖，配置@路径别名指向src目录，包括vite.config.ts和tsconfig.app.json的修改。然后详细说明了在main.ts中如何初始化路由，创建路由实例并定义路由规则。接着指导建立router/index.ts文件，配置hash模式路由和全局守卫。最后演示了在App.vue中使用<router-view>展示路由组件，并验证了路由访问效果。文章还简要提及了集成步骤的三个关键环节，为后续使用El

组合API介绍

本文主要介绍了Vue3组合API对开发思想的改变。相比Vue2将逻辑分散在选项中的方式，组合API能够集中管理逻辑关注点，使代码更易维护。实现方法包括：1）用组合API替代传统选项写法；2）梳理代码逻辑并封装为自定义hooks。这种变化提升了代码组织性和复用性，使开发者能更好地分离和抽象组件逻辑。

选项写法和组合写法

Vue3已于2022年春节正式发布，推荐使用Vite搭建项目。创建命令为yarn create vite vue3-admin --template vue-ts，项目结构包含TS配置文件和单文件组件。Vue3单文件组件支持多template节点、多个script块，样式可使用v-bind指令。在<script setup>语法中，使用ref定义响应式变量，通过.value访问值，方法直接定义，watch实现监听。相比Vue2，不再需要data和methods选项，简化了组件开发流程。推荐配套使

vue-element-admin

摘要：跨域问题由协议、IP或端口不同引起，浏览器基于同源策略会阻塞跨域Ajax请求。解决方案包括：1)JSONP（仅GET请求）；2)后端配置CORS头；3)代理转发（开发用webpack，生产用nginx）。Vue中可通过devServer配置代理，将含"/api"的请求转发到目标服务器，保持请求同域从而规避跨域限制。（149字）

1、官网：https://www.mongodb.com/，点击“Products”-“community edition”-“下载community版本”不用安装最新版，最新版会有各种兼容性问题，所以下载了6.0版本。注意区分操作系统版本，这里下载的是CentOS9的。注意：要用第三方驱动，官网下载的驱动包不支持社区版。6、下载mongodb JDBC驱动。9、使用dbeaver连接。10、创建admin用户。一、安装MongoDB。5、验证有没有安装成功。建立一个新的驱动配置。

摘要：WebApp是一种交互类似App但无需安装的H5页面。移动端布局方案包括rem、vw/vh等相对单位布局，不使用绝对单位px。通过rem.js动态设置根字体大小（屏幕宽度的1/10），实现适配不同屏幕。CSS中rem单位基于根字体尺寸，em基于父元素字体。UI稿尺寸转换示例（如750px→10rem），推荐使用pxtorem插件简化计算。文中还介绍了布局类型比较和常用CSS单位。

Vue状态管理核心要点：1、版本匹配(Vue2+Vuex3/Vue3+Vuex4或Pinia)；2、状态管理本质是数据共享与缓存；3、安装使用三步骤：注册插件、创建Store实例、导出；4、主要解决组件间数据共享和响应式更新问题；5、Store配置包含state等核心概念。通过建立store目录并在main.js导入实现全局状态管理。

本文介绍了两种前端路由模式：hash路由（带#号，基于onhashchange事件，部署无404问题）和history路由（无#号，需服务器重定向避免404）。重点讲解了Vue路由的两个全局组件：<router-view>（视图容器，支持命名视图）和<router-link>（导航链接，支持多种属性和写法）。还解释了路由栈概念，即浏览器通过堆栈记录访问历史，支持前进后退导航。全文简明扼要地概括了前端路由的核心知识点。

本文介绍了单页面应用程序(SPA)与多页面应用程序(MPA)的区别，并详细讲解了在Vue项目中集成路由系统的步骤。主要内容包括：1. SPA与MPA的定义和特点；2. Vue路由系统安装配置方法，包括版本选择、插件调用和全局组件使用；3. 路由规则定义和模式选择（hash/history）；4. 路由与主程序的关联方式；5. 在App.vue中放置路由视图容器和导航链接的实践。通过10个步骤详细说明了从安装到使用的完整流程，帮助开发者快速掌握Vue路由的基本使用方法。

本文介绍了在Windows 10环境下搭建Vue.js开发环境的步骤。首先，推荐使用Node.js和Vue CLI（基于webpack）作为开发工具。接着，通过命令行验证Node和npm的安装是否成功。Vue CLI作为脚手架工具，能够生成项目的基本结构，包括入口文件和配置。常用的包管理器有npm、yarn和cnpm（淘宝镜像）。安装Vue CLI后，可以通过命令行创建Vue项目，支持Vue 2或Vue 3版本。此外，还提供了可视化界面创建项目的方式，但通常不推荐使用。

const bus = new Vue()，不给选项就是事件总线，给选项就是组件了。（2）bus.$emit('频道', '消息')：向指定“频道”上发送消息。（1）bus.$on('频道', callback)：监听一个“频道”在Vue的背后源码中的Dep类也是一种“订阅-发布”模式。（4）bus.$once()：对某个“频道”只监听一次。（3）bus.$off()：取消订阅“频道”这里的事件总线，就是一种“订阅-发布”模式。“订阅-发布”模式，也叫做“观察者模式”。2、什么是“订阅-发布”模式。

在Vue中，组件树（Component Tree）指的是一个由多个嵌套的Vue组件组成的层级结构。借助$parent/$children这两个API，可以实现在任一组件中访问组件树中的其它任意组件实例。当兄弟组件之间需要共享数据时，我们通常的做法是把这个数据定义在它们的共同的父组件中，再通过自定义属性实现数据共享。注意：provide提供声明式变量numf，如果在父组件中修改了app.num的值，子组件中不会改变！所以下面在例子代码里，更新父组件中的provide数据，子组件不会更新！

set操作代码是同步的，但是代码背后的行为是异步的。set操作修改声明式变量，触发re-render生成新的虚拟DOM，进一步执行diff运算，找到脏节点集合，交给Vue背后的更新队列去执行循环更新。在更新队列中每一个更新任务都是一个更新单元，nextTick表示下一个更新单元（更新周期）。1、Vue.$nextTick()或者this.$nextTick()代码是同步的，任务是异步的，打印出来肯定不是3。什么是nextTick？

插件是一种更加高级的代码复用技术，可以以插件的方式为我们提供可复用的组件、混入、指令、过滤器原型链API等等。1、在Vue生态中，除了Vue本身，其它所有的与Vue相关的第三方包，都是插件。调用插件上的install方法，并传入Vue实参。2、如何封装Vue插件。Vue.use(插件)

（1）使用Vue.directive('指令名', function() {})定义全局指令。如果有一些DOM功能经常用，但是Vue没有提供相关指令，建议自己封装。使用directives: {}定义局部指令，只能在当前组件中使用。指令本质上就是DOM功能的一种抽象封装。binding：绑定的值/表达式。el：指令所对应的DOM节点。vnode：当前的虚拟DOM。

使用Vue.filter('名称', val=>{return newVal})定义。6、过滤器还可以链式调用{{num | f1 | f2}}，过滤器是有顺序的。使用选项，filters: {}定义，只能在当前组件中使用。5、过滤器只能用在{{}}和v-bind中，不支持其他指令。4、过滤器在Vue 3.0中已经淘汰了。在任何组件中都可以直接使用。

比如我封装两个组件，一个是A组件，一个是B组件，发现它里面有相同的选项，就可以用混用的方式来复用它。4、当一个组件同时有全局混入、局部混入、自有选项时，它们的优先级。Vue组件是由若干选项组成的，向组件中混入可复用的选项。当前Vue程序中，所有组件都拥有了这些被混入的选项。使用mixins:[{},{}]选项，进行局部混入。1、当混入用的多了，选项来历不明，代码不易维护。注意：尽量不要用全局混入，偶尔会用到局部混入。只有当前组件才有这些被混入的选项。1、是一种代码复用的技巧。3、一般混入的内容是。

（3）mounted()只执行一次，activated()、deactivated()可以执行多次。有种v-if的感觉，根据指定条件渲染目标组件，它的is属性等于哪个组件，就显示哪个组件。（2）还会多两个生命周期钩子：activated()、deactivated()。exclude：包含在exclude里面的组件会死，其他都不死。include：包含在include里面的组件不会死。它经常配合<keep-alive>一起使用。它的is属性，is等于谁就显示谁。二、keep-alive组件例子。

循环递归运算，找出两个虚拟DOM的差异（找出最小的脏节点集合），通过一个队列更新，重新渲染DOM。调用render方法，创建虚拟DOM。组件上下文数据的注入，对data调用遍历，把data中所有的数据放在this中。当虚拟DOM被destroy()方法调用，路由切换的时候，组件会销毁。销毁阶段：beforeDestroy、destroyed。beforeMount：到派出所办户口（生成虚拟DOM）加set、get钩子。再次调用render，生成一个新的虚拟DOM。......一岁一岁长大......

2、在组件中，v-model='num' 等于 v-bind:value='num' + v-on:input='num = $event'（2）对checkbox和radio选择框，v-model 等于 v-bind:checked + v-on:change。（1）对text和textarea文本表单，v-model 等于 v-bind:value + v-on:input。（3）对select下拉框，v-model 等于 v-bind:value + v-on:change。1、在组件中，可以把。

一个组件，你可以理解成是由一组选项构成的，在封装自定义组件时，你可以使用大多数的Vue选项属性，比如：data、template、methods等。组件封装后，必须要注册（局部注册，或，全局注册）才能在Vue的地盘中使用，注册自定义组件时，组件名称必须由多个单词用中划线连接。对一个组件来讲，你可以使用this.$emit('自定义事件','数据')触发父组件给的自定义事件，并回传数据给父组件。对Vue组件来讲，最重要的是视图结构，所以我们在封装Vue组件时，可以使用大多数的Vue选项。

当获取、修改obj2属性的时候，会触发钩子函数。obj2对象多了get和set函数。当你get/set一个变量时，你有办法可以“捕获到”这种行为。2、一个普通对象和一个响应式对象对比。1、响应式英文reactive。

（3）计算属性本质上是一个函数，vue会分析函数体中使用到了哪些声明式变量，有且仅有这些声明式变量发生变化时，计算属性才会重新执行。（1）用于优化指令的表达式，当指令的表达式比较复杂，我们建议使用计算属性来优化，提升视图模板中代码的可阅读性、可维护性。5、在视图模板中把计算属性直接当作变量直接使用，在vue逻辑代码使用this访问计算属性，默认只有get功能。可以，计算属性要有set功能，拆成get/set写法。语法：在computed选项中，定义计算属性方法，在方法体使用声明式变量进行若干计算。

以后自定义指令也要用v-开头，因为vue编译器看到v-开头，知道是指令，而指令绑的表达式，编译器就会去编译表达式。1、指令是vue内置的一套“模板”（都是以v-开头的）{{}}：文本插值，在以前前后端不分离的项目中常见到。3、每一个Vue组件都有个id，“_uid: 0”4、$开头的符号，是vue官方提供的内置api。4、指令实际上是DOM功能的抽象。我 -> 指令 -> DOM操作。用于在视图节点上动态绑定变量的。5、指令等号右边的值是表达式。3、指令可以理解成一套符号。背后也是在做DOM操作。

声明式思想，先在data选项中声明一个合适的变量，再在交互事件中改变这个声明式变量即可，视图自动更新。当声明式变量变化时，它所对应的视图节点自动更新，这就是所谓的响应式。DOM开发思想，当我们需要在交互事件中改变视图时，使用DOM选择器选中目标节点，再使用DOM方法直接改变视图。（5）基于选项的（templete、data、computed、watch、methods）选项：固定的东西放在固定的位置（react没有选项所以更灵活更难）（4）丰富的指令（DOM功能的抽象）（6）vue文档集中（官网都有）

holderjs占位图