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

框架集成实践专题

专题说明

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

学习目标

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

学习内容

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

学习建议

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

📝 发现内容有误？点击此处直接编辑

📝 配套习题（22 题）

1
判断题

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

A

对

B

错

2
判断题

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

A

对

B

错

3
判断题

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

A

对

B

错

4
判断题

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

A

对

B

错

5
单选题

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

A

.js 和 .ts 文件

B

.vue 单文件组件

C

.jsx 和 .tsx 文件

D

.html 文件

6
多选题

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

A

include - 指定处理的文件模式

B

exclude - 排除不处理的文件

C

isProduction - 生产模式标记

D

template - 自定义编译器选项

7
多选题

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

A

CSS 文件使用 .module.css 后缀

B

在 .vue 文件中使用 module 属性

C

安装额外的 CSS Modules 插件

D

配置 css.modules 选项

8
判断题

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

A

对

B

错

9
单选题

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

A

.js

B

.jsx 或 .tsx

C

.react

D

.esbuild

10
多选题

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

A

jsxRuntime - JSX 运行时模式

B

babel - 使用 Babel 替代 esbuild

C

fastRefresh - Fast Refresh 配置

D

include - 处理文件范围

11
多选题

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

A

更新组件时保留组件状态

B

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

C

支持函数组件和 Hooks

D

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

12
判断题

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

A

对

B

错

13
单选题

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

A

.js

B

.svelte

C

.sv

D

.component

14
多选题

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

A

include - 处理的文件范围

B

exclude - 排除的文件范围

C

compilerOptions - Svelte 编译器选项

D

hot - 热更新配置

15
多选题

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

A

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

B

生成的代码体积更小

C

样式默认局部作用域

D

需要额外的运行时库

16
判断题

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

A

对

B

错

17
单选题

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

A

经典模式，手动导入 React

B

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

C

转换模式，使用 React.createElement

D

禁用 JSX 转译

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
单选题

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

A

使用 Vue 2.x 版本

B

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

C

使用 runtime-only 构建

D

禁用 Vue 插件

21
多选题

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

A

使用生产版本的 React

B

配置 Babel 移除 propTypes

C

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

D

分析 bundle 体积定位大型组件

22
多选题

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

A

首屏加载资源体积

B

框架运行时体积占比

C

代码分割后的 chunk 数量

D

CSS 与 JS 体积比例

← 上一个专题 构建原理与底层机制专题
下一个专题 → 模块化与依赖预构建专题

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？
小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库