Web前端开发工具总结_前端工具类开发-CSDN博客

本文链接：https://blog.csdn.net/CSDN2497242041/article/details/135904484

一、nvm，node，npm之间的区别

nodejs：在项目开发时的所需要的代码库。相当于JDK
npm：nodejs 包管理工具，npm 可以管理 nodejs 的第三方插件。在安装的 nodejs 的时候，npm 也会跟着一起安装。相当于Maven。
nvm：nodejs 版本管理工具。nvm 管理 nodejs 和 npm 的版本

二、什么是vue-cli？

vue-cli是一个官方发布vue.js项目脚手架，使用 VueCLI 可以快速搭建 vue 项目，以及对应的 webpack 配置。cli 是 Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。主要作用：目录结构、本地调试、代码部署、热加载、单元测试。

web-pack和可vue-cli都可以创建vue项目吗？

Webpack和Vue CLI都可以用来创建Vue项目，但它们的使用方式和功能有所不同。

Webpack是一个模块打包器，它可以将多个模块打包成一个或多个文件，以便在浏览器中运行。Webpack提供了强大的配置功能，可以用来处理静态资源、转换代码、压缩文件等。它也可以与Vue.js配合使用，但需要手动配置。
Vue CLI是Vue.js的脚手架，用于自动生成Vue.js+webpack的项目模板。通过Vue CLI，可以快速创建Vue项目，并自动配置Webpack、Babel、ESLint等工具。Vue CLI还提供了插件系统，可以方便地扩展项目功能。

因此，Webpack和Vue CLI都可以用来创建Vue项目，但Vue CLI更为方便快捷。如果需要更精细的控制和定制化配置，可以选择使用Webpack。

三、Webpack和Vite的区别

（1）Webpack

Webpack是一个模块打包工具，使得工程中的各种资源能够被打包成一个整体的bundle.js文件。Webpack具有很高的可配置性和灵活性，使得开发者可以使用各种插件和配置文件来优化它们的工作流程。Webpack适用于大型、复杂的项目，它可以处理多种不同类型的文件（如js、css、图片等），并根据需求进行转换、压缩和打包。但是，Webpack的配置可能比较复杂，需要花费一定的时间和精力进行学习和调试。

（2）Vite

Vite是一个快速、轻量级的现代Web开发构建工具，它利用现代浏览器的原生ES模块加载功能，实现了开发环境中的快速冷重载和构建速度。Vite的开发体验非常好，因为它能够在开发时实时更新页面，而不需要对整个项目进行重新构建。相比于Webpack的构建过程，Vite的开发速度更快，也更适合小型、简单的项目。但是，Vite目前还不支持像Webpack那样的插件生态系统，因此其可扩展性还有待提高。

（3）Vite相比于Webpack打包更快

在Webpack中，每次修改代码后都需要对整个项目进行重新编译，然后重新生成大量的代码和资源文件。而在Vite中，它使用了浏览器原生的ES模块加载器，当开发者修改代码后，Vite会即时在浏览器中编译和打包代码，然后将更改的部分直接传递给浏览器，并重新加载这部分代码。因此，Vite的编译和打包速度比Webpack更快，因为它避免了重复的编译和打包步骤，以及更高效地利用了现代浏览器的功能。另外，Vite还使用了缓存机制和按需加载的方式，这也是它快速打包的原因之一。当开发者第一次访问项目时，Vite会对项目进行编译和打包，并缓存生成的文件。这样，当开发者下一次打开项目时，Vite只需要编译和打包发生更改的部分，而不需要重新编译和打包整个项目。这种按需加载的方式也能够进一步提高Vite的打包速度。

四、axios和fetch的区别

Axios 和 Fetch 都是 JavaScript 中用于发送 HTTP 请求的 API，它们的主要区别在以下方面

Axios 支持更广泛的浏览器和 Node.js 版本，而 Fetch 只能在较新的浏览器中使用，或需要使用 polyfill 兼容旧版浏览器。
Axios 可以拦截请求和响应，可以全局配置默认的请求头、超时时间等，而 Fetch 目前不支持这些功能。
Axios 默认返回 JSON 格式的数据，而 Fetch 返回的是 Response 对象，需要自己通过 Response 的方法（如 json()、text() 等）将结果转换成所需的格式。
Axios 对于请求错误可以直接抛出异常，方便进行错误处理，而 Fetch 的错误处理比较繁琐，需要手动检查 Response.ok 属性。
fetch是原生js自带的，axios是封装的原生的xhr

五、SSR和CSR对比

SSR（Server-Side Rendering，服务器端渲染）相比CSR（Client-Side Rendering，客户端渲染）在某些场景下渲染看起来更快，主要是因为以下几点原因：

首屏加载时间缩短：在SSR中，用户请求页面时，服务器会直接返回已经渲染好的完整HTML内容给浏览器。这意味着用户可以立即看到页面的基本布局和内容，而不需要等待JavaScript文件下载和执行，从而减少了“白屏时间”。
SEO优化：虽然这不直接影响渲染速度，但SSR对SEO友好是因为搜索引擎爬虫可以直接读取到服务器返回的完整HTML，无需执行JavaScript，这样内容更容易被索引，间接提升了“可见性速度”。
减少客户端负担：SSR将大部分渲染工作放在了服务器端，客户端收到的是可以直接展示的页面，减轻了浏览器的计算压力，尤其是在低性能设备或网络条件不佳的情况下，用户能更快地与页面交互。
即时内容显示：对于内容驱动型网站，如新闻、博客等，SSR确保用户第一时间看到实际内容，而不需要等待JavaScript框架加载和执行完毕，提高了用户体验。

然而，这并不意味着SSR在所有情况下都优于CSR。CSR的优势在于交互更流畅、更新状态更快（对于已加载的页面），并且可以减少服务器负载（将渲染任务转移到客户端）。因此，选择SSR还是CSR通常取决于具体的应用场景、性能要求以及SEO需求。现代Web开发中，还经常采用同构渲染（Isomorphic Rendering）或渐进式 hydration 等技术，结合SSR和CSR的优点，以达到最佳的性能和用户体验。

六、选择Fetch还是Axios

Axios:

Axios 提供了更加丰富的特性和选项，如请求和响应拦截器、自动转换JSON数据、取消请求的能力、超时设置等。
它具有更好的跨浏览器兼容性，同时支持浏览器和Node.js环境，不需要polyfill。
Axios的API设计直观，错误处理更加方便，对于复杂的项目和需要细致控制HTTP请求的场景更为合适。
对于需要大量HTTP请求、复杂错误处理或HTTP拦截的应用，Axios通常是更好的选择。

Fetch:

Fetch 是现代浏览器内置的API，对于简单的请求而言，使用起来非常简洁。
它是基于Promise设计的，支持async/await，使得异步代码更易于阅读和维护。
但是，Fetch原生API在功能上较为基础，比如缺少请求拦截、响应拦截以及处理JSON数据的便捷方法，可能需要额外的封装来达到与Axios类似的便利性。
对于小型项目或只需要进行简单API调用的情况，Fetch是一个轻量级的选择。
需要注意的是，Fetch在一些老旧浏览器中可能需要polyfill来实现兼容。

总结来说，如果您追求更全面的功能集、更好的错误处理和兼容性，或者项目复杂度较高，Axios可能是更优的选择。而对于轻量级应用或希望利用现代浏览器原生功能的场景，Fetch会是一个简洁的解决方案。在决定使用哪一个之前，考虑您的项目需求、团队熟悉度以及长期可维护性是很重要的。

七、SPA（Single Page Application，单页应用程序）和MPA（Multi-Page Application，多页应用程序）区别

SPA（Single Page Application，单页应用程序）和MPA（Multi-Page Application，多页应用程序）是Web开发中两种不同的架构模式，它们各有特点，适用于不同类型的项目需求。

SPA (Single Page Application):

定义: SPA是一种Web应用模式，其中整个用户界面通常加载在一个单一的HTML页面上，通过JavaScript动态更新内容和呈现不同的视图，而无需重新加载整个页面。用户在应用内的导航主要是通过前端路由实现的。
技术特点: 利用Ajax技术与后端通信，获取数据并局部更新页面，提升用户体验。常见框架有React、Vue.js、Angular等。
优势: 提供流畅的用户体验，快速的页面转换，适合构建高度交互式的应用。开发和维护相对集中，便于管理状态。
劣势: 初次加载可能较慢，因为需要加载整个应用的JS bundle。SEO优化相对困难，需要额外手段（如服务端渲染SSR或预渲染）来改善。

MPA (Multi-Page Application):

定义: MPA是传统的Web应用模式，每个页面都是一个独立的HTML文档，用户在不同页面间导航会触发页面的完全重载。
技术特点: 每个页面的渲染和内容加载都在服务器完成，然后作为完整的HTML发送到客户端。常使用服务器端模板引擎如JSP、PHP等。
优势: SEO友好，因为搜索引擎爬虫能够更容易抓取静态页面内容。开发模式相对简单，适合内容驱动、结构相对固定的网站。
劣势: 用户在页面间切换时会有明显的加载延迟，用户体验可能不如SPA流畅。维护成本可能随着页面数量增加而提高。

选择SPA还是MPA，需根据项目需求、性能要求、SEO考虑、团队技能等因素综合决定。现代Web开发实践中，有时也会结合两者的优势，例如通过同构渲染或部分页面使用SPA模式来优化关键路径的加载体验。

1、单页面应用（SPA）：

一个项目中只有一个完整的html主页面，其他都是html片段组成的分页面，浏览器一开始会在主页面加载所有必须的 html, js, css。撸代码的时候每个页面分开写（不管主页面还是分页面）。在页面跳转交互的时候由路由程序将分页面动态载入主页面，跳转只是局部刷新，不会重新加载全部资源。片段之间的切换快，比较容易实现转场动画

原理：在js会感知到url的变化后动态地将当前页面的内容清除，然后将下一个页面的内容挂载到当前页面上。这个时候的路由不再是后端来做了，而是前端来做，判断页面显示相应的组件，清除不需要的。

页面跳转：使用window.location.href = "./index.html"进行页面间的跳转；

数据传递：可以使用path?account="123"&password=""路径携带数据传递的方式，或者localstorage、cookie等存储方式

2、多页面应用（MPA）：

一个项目是由多个完整的html页面组成，不在有主、分页面。页面跳转是所有的资源都要重新加载，页面之间的切换会出现卡顿空白的问题，不容易实现切换动画等。这种类型的网站也就是多页网站，也叫做多页应用。

页面跳转：使用js中的append/remove或者show/hide的方式来进行页面内容的更换；

数据传递：可通过全局变量或者参数传递，进行相关数据交互

八、vue项目目录作用

1. build文件夹：打包配置的文件夹

　　1.1 webpack.base.conf.js ：打包的核心配置

　　1.2 build.js：构建生产版本，项目开发完成之后，通过build.js打包（加载base与prod，读取完之后通过webjpack命令对项目进行打包）

　　1.3 webpack.prod.conf.js：被build.js调用，webpack生产包的一个配置。基础代码都在1.1里面写，1.3是对1.1的扩展与补充

　　1.4 dev-client.js：热更新的插件，进行对客户端进行重载

　　1.5 dev-server.js：服务器。（背后的原理是启动一个express框架，这是一个基于node做的一个后端框架，后端框架可以在前端起一个服务）

　　1.6 vue-loader.conf.js：被base加载，

　　1.7 utils.js：工具类，公共的配置

2. config文件夹：打包的配置，webpack对应的配置

　　2.1 index.js：可与1.1合并成一个文件，但由于spa想做一个清晰的架构，因此把它们拆分开了

3. src文件夹：存放项目的源代码和资源文件。

assets: 存储应用程序的静态资源，例如图片、字体等。
components: 存储应用程序的可重用组件。
views: 存储应用程序的视图组件，每个视图组件对应一个路由地址。
App.vue: 应用程序的根组件。所有其他组件的容器，定义了应用程序的布局和结构
main.js: 应用程序的入口文件，初始化 Vue 实例并配置路由、状态等。
router.js: 应用程序的路由配置文件，定义页面路由和对应的组件。

4. App.vue ：入口组件

5. static文件夹：静态资源，图片

6. babelrc：ES6解析的配置

7. .gitignore：忽略某个或一组文件git提交的一个配置

8. index.html：单页面的入口，通过webpack的打包构建之后，会对src源码进行编译，最终把它们插入到html里面来

9. package.json：基础配置，告诉我们项目的信息（版本号、项目名、依赖），还有打包和运行项目等命令

10. node_modulues：项目的安装依赖

11.vue.config.js：

vue打包管理的配置文件，旨在给开发者们自定义自己的配置，把.vue的文件打包成浏览器能读懂的文件。

12.public: 存储应用程序的静态 HTML、CSS、JS 等资源。

favicon.ico: 应用程序的浏览器标签页图标。
index.html: 应用程序的主 HTML 文件。

九、NPM和PNPM区别

npm（Node Package Manager）和 pnpm（Performant NPM）都是用于管理JavaScript项目依赖的工具，pnpm可以提升依赖的安装速度。

安装速度与磁盘使用：
- npm 默认情况下会将每个依赖项复制到项目的node_modules文件夹中，即使多个包依赖于同一个版本的库，也会重复存储。这可能导致大量的磁盘空间被占用。
- pnpm 则采用了内容可寻址存储的方式，所有相同版本的包只会存储一次，通过符号链接的方式在不同的地方引用相同的包，从而节省了大量磁盘空间，并且提高了安装速度。
依赖解析算法：
- npm 自版本3开始采用扁平化的依赖树结构，尝试将所有重复的依赖尽可能地提升到顶层，减少嵌套层级。然而，在处理依赖冲突时可能会导致一些问题。
- pnpm 使用严格的依赖解析算法，保持一个更加严格的依赖树结构，避免了潜在的依赖冲突，确保依赖关系的一致性。
命令行体验：
- npm 是默认随Node.js一起安装的包管理器，拥有广泛的社区支持和文档资源，对于新手来说更易于上手。
- pnpm 提供了类似npm的CLI界面，同时增加了一些优化功能如pnpm dlx可以直接运行临时脚本而不需要全局安装等。