使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件

简介: 本文记录了如何使用Vite创建一个React+TypeScript+Service Workers(SW)项目,并整合AntDesign组件库和Scss等插件,包括项目的创建、配置问题解决、AntDesign和Scss的整合方法。

前言

记录一下使用 Vite 创建 React+TS+SW 项目并整合 AntDesign 、Scss 等组件或插件。

一、使用 Vite 创建 React+TS+SW 项目

1.新建一个 temp 文件夹

(1)在桌面新建一个 temp 文件夹,然后在 VS Code 中打开此文件夹,打开一个终端;

2.创建一个 Vite 项目工程

(1)具体操作如下:

npm create vite@latest

(1) 输入项目名,如: vite-react-ts-scss-ant_design ,然后回车
? Project name: » vite-react-ts-scss-ant_design

(2) 选择 React 框架,回车
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
    Vue
>   React
    Preact
    Lit
    Svelte
    Others

(3) 选择数据类型,回车
? Select a variant: » - Use arrow-keys. Return to submit.
    TypeScript
>   TypeScript + SWC
    JavaScript
    JavaScript + SWC

(4) 创建完成,运行项目
Done. Now run: 

  cd vite-react-ts-scss-ant_design
  npm install
  npm run dev

二、解决一下配置问题

(1)找不到模块“vite”。你的意思是要将 \"moduleResolution\" 选项设置为 \"node\",还是要将别名添加到 \"paths\" 选项中?

(2)找不到模块“path”或其相应的类型声明。(执行 npm i @types/node -D 即可)

(3)未设置 "baseUrl" 时,不允许使用非相对路径。是否忘记了前导 "./"?

(4)解决方法,修改一下 vite.config.js、tsconfig.json、tsconfig.node.json 这三个配置文件即可。

【修改前】

vite.config.js

import {
    defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [react()],
})

tsconfig.json

{
   
  "compilerOptions": {
   
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"],
  "references": [{
    "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
   
  "compilerOptions": {
   
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

【修改后】

vite.config.js

import {
    defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
import {
    resolve } from 'path'

// https://vitejs.dev/config/
export default defineConfig({
   
  plugins: [react()],
  resolve: {
   
    alias: {
   
      '@': resolve(__dirname, './src'),
    }
  },
})

tsconfig.json

{
   
  "compilerOptions": {
   
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "baseUrl": ".", // 未设置 "baseUrl" 时,不允许使用非相对路径。是否忘记了前导 "./"?
    "jsx": "react-jsx",
    "paths": {
   
      "@": ["src"],
      "@/*": ["src/*"]
    },

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src"],
  "references": [{
    "path": "./tsconfig.node.json" }]
}

tsconfig.node.json

{
   
  "compilerOptions": {
   
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

三、整合 AntDesign 框架/UI组件库

1.导入依赖

npm i antd -D

2.按需引入

(1)修改 src/App.tsx,如引入 antd 的按钮组件,保存即可在页面看到效果。

import React from 'react'
import {
    Button } from 'antd'

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
)

export default App

四、整合 SCSS 插件

1.导入依赖

npm i sass -D
npm i scss -D

2.使用方式

(1)例如对 App.tsx 进行使用,首先修改 App.tsx 文件,然后新建 App.module.scss 文件,将 scss 样式引入 App.tsx 文件即可。

App.tsx

import {
    Button } from 'antd'
import style from './App.module.scss'

function App() {
   
  return (
    <>
      <div className={
   style.appContainer}>
        <div className={
   style.box}>
          <h1 className={
   style.welcome}>Vite + React</h1>
          <Button type="primary">Button</Button>
        </div>
      </div>
    </>
  )
}

export default App

App.module.scss

.appContainer {
   
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  text-align: center;

  .box {
   
    display: inline-table;
    width: 100%;
    height: auto;
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    .welcome {
   
      padding-bottom: 10px;
      color: rgb(0, 255, 115);
      font-weight: normal;
    }

    :global(.ant-btn) {
   
      width: 250px;
    }
  }
}

到此项目整合完毕,传送门如下。

vite-react-ts-scss-ant_design: 这是一个基于 Vite 构建的 React + TS 项目,以及整合了 Scss、AntDesign5 等组件或插件。

目录
相关文章
|
4月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
223 68
|
4月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
205 67
|
4月前
|
前端开发 JavaScript 安全
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
除了高阶组件和render props,还有哪些在 React 中实现代码复用的方法?
214 62
|
4月前
|
运维 前端开发 数据可视化
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
本文分享了一个基于React 19构建的用户注册表单系统,采用模块化CSS和状态驱动视图更新,实现实时校验、错误提示与提交反馈等功能。核心亮点包括验证规则引擎(如密码复杂度校验)、交互反馈体系(输入框警示、按钮禁用)及加载动画优化。通过函数式更新确保状态同步,正则表达式实现多条件验证,CSS伪元素打造流畅体验。代码结构清晰,可扩展性强,适合作为React表单开发模板。文末附CodeBuddy免费下载链接,助力高效开发!
103 1
【CodeBuddy】挑战一句话开发一个完整项目之:React表单验证系统
|
6月前
|
移动开发 前端开发 JavaScript
React音频播放列表组件:常见问题、易错点与解决方案
本文介绍了在React中实现音频播放列表时常见的挑战及解决方案。通过基础实现、常见问题分析和最佳实践,帮助开发者避免状态管理、生命周期控制和事件处理中的陷阱。关键点包括使用`useRef`操作音频元素、`useState`同步播放状态、全局状态管理防止多音频同时播放、以及通过`useEffect`清理资源。还提供了代码示例和跨浏览器兼容性处理方法,确保高效实现功能并减少调试时间。
219 30
|
6月前
|
移动开发 前端开发 UED
React 音频音量控制组件 Audio Volume Control
在现代Web应用中,音频播放功能不可或缺。React以其声明式编程和组件化开发模式,非常适合构建复杂的音频音量控制组件。本文介绍了如何使用HTML5 `&lt;audio&gt;`元素与React结合,实现直观的音量控制系统,并解决了常见问题如音量范围不合理、初始音量设置及性能优化等,帮助开发者打造优秀的音频播放器。
219 27
|
6月前
|
编解码 前端开发 开发者
React 图片组件样式自定义:常见问题与解决方案
在 React 开发中,图片组件的样式自定义常因细节问题导致布局错乱、性能损耗或交互异常。本文系统梳理常见问题及解决方案,涵盖基础样式应用、响应式设计、加载状态与性能优化等,结合代码案例帮助开发者高效实现图片组件的样式控制。重点解决图片尺寸不匹配、边框阴影不一致、移动端显示模糊、加载失败处理及懒加载等问题,并总结易错点和最佳实践,助力开发者提升开发效率和用户体验。
211 22
|
7月前
|
移动开发 前端开发 API
React 音频播放器组件 Audio Player
本文介绍如何使用React创建音频播放器组件,涵盖核心功能如播放/暂停、进度条、音量控制和时间显示。通过HTML5 `&lt;audio&gt;` 元素和React的声明式状态管理,实现交互式音频播放。常见问题包括控件不响应、进度条无法更新和音量控制失灵,并提供解决方案。此外,还讨论了浏览器兼容性、异步错误处理和性能优化等易错点及避免方法。
597 123
|
6月前
|
前端开发 JavaScript
除了使用Route组件,React Router还有其他方式处理404错误页面吗
除了使用Route组件,React Router还有其他方式处理404错误页面吗
180 58
|
6月前
|
前端开发
React 中高阶组件的原理是什么?
React 中高阶组件的原理是什么?
186 57