vite+react+ts+scss 创建项目

复制代码
npm create vite@latest
  • 输入项目名称
  • 选择react
  • 选择typescript + swc

WC 通过利用 Rust 编写的编译器,使用了更先进的优化技术,使得它在处理 TypeScript 代码时能够更快地进行转换和编译。特别是在大型项目中,SWC 相对于传统的 TypeScript 编译器有着更快的性能,特别是在启动项目和进行热模块更新时。

建议关闭严格模式,因为不能自动检测副作用,有意双重调用。将严格模式注释即可。

配置 scss

复制代码
npm install sass

将项目初始化时的index.css文件,修改为.sass后缀后即可书写sass代码。

vite.config.ts中注册全局样式

复制代码
css: {
		// 全局配置scss
		preprocessorOptions: {
			scss: {
				additionalData: '@import"./src/assets/style/main.scss";'
			}
		}
	},

配置路径别名

复制代码
npm i @types/node --save-dev

配置在vite.config.ts中引入path

复制代码
import { defineConfig } from "vite"
import react from "@vitejs/plugin-react-swc"
import { resolve } from "path"

export default defineConfig({
  plugins: [react()],
  // 配置路径别名
  resolve: {
    alias: {
      "@": resolve(__dirname, "src"),
    },
  },
})

此时@已经可以正确读取src目录,但是输入@后,并未出现提示,需要在tsconfig.json文件中声明路径

VScode中

ES7+ React/Redux/React-Native snippets 安装这个插件

. Auto Rename Tag

插件简介:

当你修改HTML/JSX标签时,这个插件会自动帮你更改匹配的开始/结束标签。

Auto Import - ES6, TS, JSX, TSX

配置Antd

复制代码
npm install antd --save

下载icon

复制代码
// npm
npm install @ant-design/icons --save
// yarn
yarn add @ant-design/icons
// pnpm
pnpm install @ant-design/icons --save
  1. 国际化

    import ReactDOM from "react-dom/client"
    import App from "./App.tsx"
    import "./index.scss"
    // antd部分
    import { ConfigProvider } from "antd"
    import "dayjs/locale/zh-cn"
    import zhCN from "antd/locale/zh_CN"

    ReactDOM.createRoot(document.getElementById("root")!).render(
    <ConfigProvider locale={zhCN}>
    <App />
    </ConfigProvider>
    )

这样操作又有些麻烦,每次使用组件我都要去引用一次,这里推荐一个插件可以按需引入

复制代码
yarn add vite-plugin-imp

安装路由

复制代码
npm i -S react-router-dom    安装指令

引入组件
import { Link,Route,Switch,NavLink } from 'react-router-dom'

Router: HashRouter和BrowserRouter

​ HashRouter: 使用URL的哈希值实现 (localhost:3000/#/first)

​ BrowserRouter:使用H5的history API实现(localhost3000/first)

Link/NavLink组件:用于指定导航链接(a标签)

​ 最终Link会编译成a标签,而to属性会被编译成 a标签的href属性
Route组件:指定路由展示组件相关信息(组件渲染)

path属性:路由规则,这里需要跟Link组件里面to属性的值一致

component属性:展示的组件

配置请求

复制代码
npm install axios @types/axios
相关推荐
腾讯TNTWeb前端团队29 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试