vite 创建 react 项目-Toy模板网

这篇具有很好参考价值的文章主要介绍了vite 创建 react 项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

npm create vite@latest

选择 react 和 ts

安装 redux react-redux

npm i redux react-redux

安装 react-router-dom

npm i react-router-dom

安装 reset-css 样式初始化

npm i reset-css

在 main.tsx 中引入 import "reset-css" 清除浏览器默认样式

安装 sass

npm i sass

$color: burlywood;

body {
    background-color: $color;
    // 禁用文字选中
    user-select: none;
}

img {
    // 禁止图片拖动
    -webkit-user-drag: none;
}

正确的样式引入顺序

样式初始化即 reset-css --》 ui框架样式 --》全局样式 --》组件样式

路径别名 @

npm i -D @types/node 让 ts 接受 node 中的 path，然后在 vite.config.ts

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

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

配置别名提示，在 tsconfig.json

"compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
}

样式模块化引入避免影响全局

// import "./comp1.scss" // 全局引入
// 模块化引入
import styles from "./comp1.module.scss"

function Comp(){
    return(
        <div className={styles.box}>
            <p>组件1</p>
        </div>
    )
}

export default Comp

安装蚂蚁库 ant-design 我现在的版本是 5.2.6

现在不需要引入样式了

npm install antd --save 找到对应版本的组件库网站

安装图标

npm install @ant-design/icons --save

通过 ConfigProvider  控制全局样式
import { Button, Flex, ConfigProvider } from 'antd';
引入图标
import { MessageOutlined } from '@ant-design/icons';


app.tsx
<ConfigProvider
        theme={{
          token: {
            // Seed Token，影响范围大
            colorPrimary: '#00b96b',
            borderRadius: 2,
            // 派生变量，影响范围小
            colorBgContainer: '#f6ffed',
          },
        }}>
    内容
</ConfigProvider>

旧的路由写法

import { Outlet } from "react-router-dom"

Outlet 相当于 vue 中的 router-view

占位符显示组件文章来源地址https://www.toymoban.com/news/detail-798952.html

到了这里，关于vite 创建 react 项目的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！