你还在为创建react项目而发愁?大家好,我是大帅子,接下里给大家说一下react搭建一个基本框架的流程 1. 搭建项目

大家好,我是大帅子,接下里给大家说一下react搭建一个基本框架的流程

1. 搭建项目

使用 react Cli 搭建项目：npx create-react-app 项目名
进入项目根目录：cd 项目名
启动项目：npm run start

2.调整项目的目录结构

删除不必要的文件，并补充对应的文件夹

├── src
│   ├── assets         # 项目资源文件，比如，图片 等
│   ├── components     # 通用组件
│   ├── pages          # 页面
│   └── utils          # 工具，比如，token、axios 的封装等
│   ├── App.js         # 根组件
│   ├── index.css      # 全局样式
│   ├── index.js       # 项目入口
└── package-lock.json

3.安装路由

因为react脚手架并没有默认集成路由功能，需要单独安装。
安装路由：npm i react-router-dom@5.3.0 路由一定要指定版本号,因为6的版本大改版,写法完全变了
这时我们应该分析路由怎么划分,公司给排路由的工作叫做排期,这时我门该怎么区分,两个页面哪个是一级路由呢?哪个是二级呢?
页面A 和页面B 没有相同的部分，这两个页面就应该是一级路由
我这边的路由直接在App.js里面写的,我推荐大家一个页面建一个单独的文件夹,下面给大家看一下示例的代码:

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Login from './pages/Login/Login.jsx'
import Layout from './pages/Layout/Layout.jsx'
import NotFound from './pages/NotFound/NotFound.jsx'
export default function App() {
  return (
    <Router>
      <div className="app">
        <Switch>
          <Route path="/login" component={Login}></Route>
          <Route path="/layout" component={Layout}></Route>
          {/* 增加一个404 */}
          <Route component={NotFound}></Route>
        </Switch>
      </div>
    </Router>
  )
}

4.高级配置用craco来配置路径别名

配置了这个,在代码中，就可以通过 @ 来表示 src 目录的绝对路径,是不是非常巴适!

craco的使用步骤

安装包。npm i -D @craco/craco
在项目根目录下，创建配置文件：craco.config.js。

在配置文件中就可以做自定义的修改，例如：配置路径别名

// craco.config.js
const path = require('path')
module.exports = {
  webpack: {
    alias: {
      '@': path.join(__dirname, 'src') // 允许通过@符号来表示 src目录
    }
  }
}

修改 package.json 中的脚本命令 package.json 中：

// 将 start/build/test 三个命令修改为 craco 方式
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
},

重启项目，让配置生效

5. vscode识别@路径并给出路径提示

哈哈,这个时候你肯定在抱怨,@/链入路径的时候没有提示不方便,我直接一手安排!

步骤

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

jsconfig.json 中：

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

6.封装axios 的工具函数

安装axios

npm i axios

在utils下建立工具文件

utils/request.js

配置基地址；

配置基本的请求拦截器和响应拦截器

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://niuma/', // 基地址
  timeout: 5000, // 最长等待时间5秒。如果一个请求超过了5秒还没有返回，就认定失败
})

// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  function (response) {
    return response.data
  },
  function (error) {
    return Promise.reject(error)
  }
)

export default instance

测试

任意找个地方写下button和点击事件，在回调中使用

import request from 'utils/request.js'

test = () => {
  request({url: '/channels'})
}

好了,今天就到这结束,没有讲完,明天我们继续!!!关注点赞冲冲!!🐓🐸