# vite-react-template

**Repository Path**: liuyangong/vite-react-template

## Basic Information

- **Project Name**: vite-react-template
- **Description**: vite + react 构建模版
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-01
- **Last Updated**: 2022-11-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 环境

```
node
16.17.1

npm
8.15.0
```

Ant Design of React 官网 https://pro.ant.design/zh-CN/docs/overview

# 一、创建项目

```
npm init vite
```

![图片](md/1.png)

打开 package.json 添加

```
"scripts": {
    "dev": "vite --host --port 8888 --open", // 定义端口号，自动打开
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.4",
    "react-router-dom":"^6.4.2",
    "redux":"^4.2.0"
  },
```

安装 npm i

# 二、项目目录初始化

删除不需要的页面、css

# 三、样式初始化

使用 reset-css,更简洁， 比 Normalize 更适合企业使用

```
npm i rest-css
```

在 main.tsx 中应用

```
import React from 'react'
import ReactDOM from 'react-dom/client'
import 'rest-css'
import App from './App'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)
```

# 四、scss 安装

```
npm i --save-dev sass

```

```
$color: #fcf;
body {
  user-select: none;
  background-color: $color;
}

img{
  -webkit-user-drag: none;
}
```

# 五、配置项目路径别名

### 5.1 路径别名

在 vite.config.ts 中

```
resolve: {
    alias:{
      '@': path.resolve(__dirname, './src')
    }
  }
```

这个时候 path 会报错， 需要安装

```
npm i -D @types/node
```

### 5.2 路径别名提示

在 tsconfig.json 中添加配置

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

然后重启 vscode

# 六、样式模块化

名称命名为 xxx.module.scss

```
import styles from '@/assets/styles/app.module.scss'
 <div className={styles.content}>
      Hello world
  </div>
```

# 七、Ant Design 安装

## 1. 安装

```
npm install antd --save
```

安装图标所需要的模块

```
npm install --save @ant-design/icons
```

在 app 组件中引入即可使用

```
import {Button} from 'antd'
import 'antd/dist/antd.css' // 全部组件的样式全部引入了
 <Button type='primary'>点击</Button>
```

## 2. 按需引入

antd4 以上支持按需引入

```
npm install vite-plugin-style-import@1.4.1 -D
```

配置 vite.config.ts 的 plugin 中添加

```
import styleImport, {AntdResolve} from 'vite-plugin-style-import'
 plugins: [
    react(),
    styleImport({
      resolves:[
        AntdResolve()
      ]
    })
  ],
```

重新启动会发现报错

```
Preprocessor dependency "less" not found. Did you install it? (x2)
00:27:05 [vite] Internal server error: Preprocessor dependency "less" not found. Did you install it?
Plugin: vite:css
File: /Users/xueyan/Desktop/project/vite-react-template/node_modules/antd/es/style/default.less?v=134c57c1
    at loadPreprocessor (file:///Users/xueyan/Desktop/project/vite-react-template/node_modules/vite/dist/node/chunks/dep-c842e491.js:45364:19)
    at less (file:///Users/xueyan/Desktop/project/vite-react-template/node_modules/vite/dist/node/chunks/dep-c842e491.js:45497:22)
    at compileCSS (file:///Users/xueyan/Desktop/project/vite-react-template/node_modules/vite/dist/node/chunks/dep-c842e491.js:44926:40)
    at async TransformContext.transform (file:///Users/xueyan/Desktop/project/vite-react-template/node_modules/vite/dist/node/chunks/dep-c842e491.js:44494:55)
    at async Object.transform (file:///Users/xueyan/Desktop/project/vite-react-template/node_modules/vite/dist/node/chunks/dep-c842e491.js:41421:30)
    at async loadAndTransform (file:///Users/xueyan/Desktop/project/vite-react-template/node_modules/vite/dist/node/chunks/dep-c842e491.js:37808:29)
00:27:05 [vite] Internal server error: Preprocessor dependency "less" not found. Did you install it?

```

执行

```
npm i less@4.1.3 -D
```

### 2.0.0 版本 更换了方法,需要安装

https://github.com/vbenjs/vite-plugin-style-import

```
npm install vite-plugin-style-import@2.0.0 -D
npm i consola -D
```

```
import { createStyleImportPlugin, VantResolve } from 'vite-plugin-style-import';

 createStyleImportPlugin({
      resolves:[
        VantResolve()
      ]
    })
```

# 九、React 路由设置

```
npm i react-router-dom
```

## 1.旧版本

创建 router.tsx

```
const baseRoute = () => (
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}></Route>
      <Route path="/home" element={<Home />}></Route>
      <Route path="/mine" element={<Mine />}></Route>
    </Routes>
  </BrowserRouter>
)

export default baseRoute
```

在 mian 文件中显示

```
import  Router  from './router/index-old'


ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <Router />
  </React.StrictMode>
)
```

## 2.新版本

```
// 对象的写法
import Home from '@/pages/index/Index'
import Mine from '@/pages/mine/Index'

//Navigate重定向组件
import { Navigate } from 'react-router-dom'

const routes = [
  {
    path: '/',
    element: (<Navigate to='/home'/>)
  },
  {
    path: '/home',
    element: <Home />
  },
  {
    path: '/mine',
    element: <Mine />
  }
]

export default routes
```

main 文件

```
import { HashRouter } from 'react-router-dom'

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <HashRouter>
        <App />
    </HashRouter>
  </React.StrictMode>
)

```

在 App 文件中，使用 useRoutes

```
import { useRoutes } from 'react-router-dom'
import Router1 from './router/index'
function App() {
  const outlet =  useRoutes(Router1)
  return (
    <div className={styles.content}>
      {outlet}
    </div>
  )
}

export default App
```

## 3.路由懒加载

使用 lazy

```
const Mine = lazy(()=>(
  import ('@/pages/mine/Index')
))
```

// 懒加载的模式，需要添加一个 loadding 组件

```
 {
  path: '/mine',
  element: <React.Suspense fallback={<div>Loadding</div>}>
    <Mine />
  </React.Suspense>
}
```

# 十、侧边栏设置
1. 展开、搜索
2. 菜单的设置。MainMenu
```
defaultSelectedKeys；设置为currentRoute.pathname
```

# 十一、登录页面设置
Login


# 状态管理
1. 安装
npm i redux react-redux --save

```
 const store = legacy_createStore(reducer)
```
为了浏览器能使用 redux-dev-tools
window.__REDUX_DEVTOOLS_EXTENSION__ && __REDUX_DEVTOOLS_EXTENSION__()

# 2. 异步操作
市面上有 redux-saga、 redux-thunk, redux-promise等

```
npm i redux-thunk
```
在store 中 
```
 import reduxThunk from "redux-thunk"
```
store 中 
```
const store = legacy_createStore(reducers,composeEnhancers(applyMiddleware(reduxThunk))); 
```

# 十二 axios封装和api抽取

1. 安装
```
npm i axios
```
2. 使用jsontots插件
shift + control + option + v

3. 登录路由拦截
在app.tsx中做判断 BeforeRouterEnter