前言
记录一下使用 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 等组件或插件。
