全部学科
通用技术
redis git docker nginx mysql zookeeper rabbitmq
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
GO后端
golang gorm gin
Web前端
TypeScript vue CSS HTML javascript npm pinia vite
Python全栈
python
NodeJS全栈
nodejs
vite / 专题
📝 1 篇文章 22 道配套习题

框架集成实践专题

专题说明

本专题介绍 Vite 与 Vue、React 等主流框架的集成实践，帮助开发者正确配置框架项目。

学习目标

  1. 掌握 Vue 项目配置与插件使用
  2. 理解 React 项目集成方式
  3. 学会框架特定的调试技巧

学习内容

  • Vue 集成配置：@vitejs/plugin-vue 配置
  • React 集成配置：React Fast Refresh 配置
  • 框架调试技巧：开发环境配置

学习建议

创建 Vue 或 React Vite 项目，实际体验框架集成的开发效果。

📝 配套习题（22 题）

💡 参考答案在文末
判断题
1

@vitejs/plugin-react 插件为 React 项目提供 Fast Refresh 支持。

A

对

B

错

2

Svelte 项目需要配置 @sveltejs/vite-plugin-svelte 插件来编译 .svelte 文件。

A

对

B

错

3

@vitejs/plugin-vue 插件支持 Vue 单文件组件（.vue）的编译和热更新。

A

对

B

错

4

Vue 项目必须配置 @vitejs/plugin-vue 插件才能正确编译 .vue 单文件组件。

A

对

B

错

5

@vitejs/plugin-react 插件使用 esbuild 进行 JSX 转译，提供 Fast Refresh 热更新支持。

A

对

B

错

6

Vite 默认使用 esbuild 转译 JSX，可通过 esbuild.jsx 配置调整转译行为。

A

对

B

错

7

@sveltejs/vite-plugin-svelte 插件支持 Svelte 组件的编译和热更新。

A

对

B

错

单选题
8

Svelte 组件文件应该使用什么后缀？

A

.js

B

.svelte

C

.sv

D

.component

9

@vitejs/plugin-vue 插件默认会处理以下哪种文件类型？

A

.js 和 .ts 文件

B

.vue 单文件组件

C

.jsx 和 .tsx 文件

D

.html 文件

10

Vue 项目构建优化时，如何减少 Vue 运行时体积？

A

使用 Vue 2.x 版本

B

配置生产模式移除警告代码

C

使用 runtime-only 构建

D

禁用 Vue 插件

11

使用 @vitejs/plugin-react 时，JSX 文件应该使用什么后缀？

A

.js

B

.jsx 或 .tsx

C

.react

D

.esbuild

12

配置 esbuild: { jsx: 'automatic' } 使用的是哪种 JSX 转译模式？

A

经典模式，手动导入 React

B

自动模式，自动注入 JSX 运行时

C

转换模式，使用 React.createElement

D

禁用 JSX 转译

多选题
13

@vitejs/plugin-vue 插件的配置选项有哪些？

A

include - 指定处理的文件模式

B

exclude - 排除不处理的文件

C

isProduction - 生产模式标记

D

template - 自定义编译器选项

14

@sveltejs/vite-plugin-svelte 插件的配置选项有哪些？

A

include - 处理的文件范围

B

exclude - 排除的文件范围

C

compilerOptions - Svelte 编译器选项

D

hot - 热更新配置

15

Svelte 相比 Vue/React 在 Vite 项目中的特点有哪些？

A

编译时框架，无运行时开销

B

生成的代码体积更小

C

样式默认局部作用域

D

需要额外的运行时库

16

React Fast Refresh 热更新的特点有哪些？

A

更新组件时保留组件状态

B

只更新修改的组件不影响其他

C

支持函数组件和 Hooks

D

类组件热更新需要额外处理

17

@vitejs/plugin-react 插件的配置选项有哪些？

A

jsxRuntime - JSX 运行时模式

B

babel - 使用 Babel 替代 esbuild

C

fastRefresh - Fast Refresh 配置

D

include - 处理文件范围

18

Vite JSX 转译支持哪些模式？

A

classic - 经典模式

B

automatic - 自动运行时模式

C

transform - 使用 createElement

D

preserve - 不转译保留 JSX

19

需要在 Vite 中使用 Babel 替代 esbuild 进行 JSX 转译的场景有哪些？

A

需要使用 Babel 插件转换语法

B

需要装饰器支持

C

需要更精细的 JSX 转译控制

D

esbuild 转译速度不够快

20

在 Vite Vue 项目中使用 CSS Modules 需要哪些配置？

A

CSS 文件使用 .module.css 后缀

B

在 .vue 文件中使用 module 属性

C

安装额外的 CSS Modules 插件

D

配置 css.modules 选项

21

React 项目构建优化可以采取哪些策略？

A

使用生产版本的 React

B

配置 Babel 移除 propTypes

C

使用 React.lazy 实现组件懒加载

D

分析 bundle 体积定位大型组件

22

框架项目的构建产物优化需要关注哪些指标？

A

首屏加载资源体积

B

框架运行时体积占比

C

代码分割后的 chunk 数量

D

CSS 与 JS 体积比例

参考答案
1.正确 2.正确 3.正确 4.正确 5.正确 6.正确 7.正确 8.B 9.B 10.C 11.B 12.B 13.A;B;C;D 14.A;B;C;D 15.A;B;C 16.A;B;C;D 17.A;B;C;D 18.A;B;C;D 19.A;B;C 20.A;B 21.A;B;C;D 22.A;B;C;D
想在手机上练习这套专题？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码
← 上一个专题 构建原理与底层机制专题
下一个专题 → 模块化与依赖预构建专题
扫码体验小程序
加载中
想在手机上刷题学习？
使用微信卷王开发者小程序，打开首页顶部扫码功能识别二维码