React 高级使用

目录

创建项目

样式初始化

路径别名配置

路径别名提示 

scss模块化管理样式

路由表写法

嵌套路由

---

 

创建项目

更改package.json启动命令

"scripts": {
    "dev": "vite --host --port 3002",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

样式初始化

npm i --save rest-css

路径别名配置

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

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

scss模块化管理样式

import React from "react"

// scss模块化引入
import styles from "./Comp1.module.scss"
const Comp = () => {
  return (
    <div className={styles.box}>
      <p>p1</p>
    </div>
  )
}

export default Comp

路由表写法

main.tsx

import React from 'react'
import ReactDOM