【React】AntD组件---极客园--01.项目前置准备

项目搭建

基于CRA创建项目

CRA是一个底层基于webpack快速创建React项目的脚手架工具

# 使用npx创建项目
npx create-react-app react-jike# 进入到项
cd react-jike# 启动项目
npm start

调整项目目录结构

-src-apis           项目接口函数-assets         项目资源文件，比如，图片等-components     通用组件-pages          页面组件-store          集中状态管理-utils          工具，比如，token、axios 的封装等-App.js         根组件-index.css      全局样式-index.js       项目入口

src/index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import './App.js'ReactDOM.createRoot(document.getElementById('root')).render(<React.StrictMode><App/></React.StrictMode>
)

src/App.js

const App = () => {return <div>this is app</div>
}export default App

使用scss预处理器

SASS 是一种预编译的 CSS，支持一些比较高级的语法，可以提高编写样式的效率，CRA接入scss非常简单只需要我们装一个sass工具

实现步骤

1. 安装解析 sass 的包：npm i sass -D
2. 创建全局样式文件：index.scss

body {margin: 0;div {color: blue;}
}

组件库antd使用

我们的项目是一个传统的PC管理后台，有现成的组件库可以使用，帮助我们提升开发效率，其中使用最广的就是antD

Ant Design of React - Ant Design
实现步骤

1. 安装 antd 组件库：npm i antd
2. 导入 Button 组件
3. 在 Login 页面渲染 Button 组件进行测试

测试Button
pages/Login/index.jsx

import { Button } from 'antd'const Login = () => {return <div>this is login<Button type='primary'>test</Button></div>
}
export default Login

配置基础路由

单页应用需要对应的路由支持，我们使用 react-router-dom 最新版本

实现步骤

1. 安装路由包 npm i react-router-dom
2. 准备 Layout和 Login俩个基础组件
3. 配置路由

代码实现
pages/Layout/index.js

const Layout = () => {return <div>this is layout</div>
}
export default Layout

pages/Login/index.js

const Login = () => {return <div>this is login</div>
}
export default Login

router/index.js

import { createBrowserRouter } from 'react-router-dom'import Login from '../pages/Login'
import Layout from '../pages/Layout'const router = createBrowserRouter([{path: '/',element: <Layout />,},{path: '/login',element: <Login />,},
])export default router

index.js

import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import router from './router'
import { RouterProvider } from 'react-router-dom'ReactDOM.createRoot(document.getElementById('root')).render(<RouterProvider router={router} />
)

配置别名路径

项目背景：在业务开发过程中文件夹的嵌套层级可能会比较深，通过传统的路径选择会比较麻烦也容易出错，设置路径别名可以简化这个过程

路径编译配置

1. 安装 craco 工具包
2. 增加 craco.config.js 配置文件
3. 修改 scripts 命令
4. 测试是否生效

npm i @craco/craco -D

const path = require('path')module.exports = {// webpack 配置webpack: {// 配置别名alias: {// 约定：使用 @ 表示 src 文件所在路径'@': path.resolve(__dirname, 'src')}}
}

"scripts": {"start": "craco start","build": "craco build","test": "craco test","eject": "react-scripts eject"
}

import { createBrowserRouter } from 'react-router-dom'import Login from '@/pages/Login'
import Layout from '@/pages/Layout'const router = createBrowserRouter([{path: '/',element: <Layout />,},{path: '/login',element: <Login />,},
])export default router

VsCode提示配置

实现步骤

1. 在项目根目录创建 jsconfig.json 配置文件
2. 在配置文件中添加以下配置

代码实现

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

:::warning
说明：VSCode会自动读取jsconfig.json 中的配置，让vscode知道@就是src目录
:::

使用gitee管理项目