# dancegit-case-ReactHotel

**Repository Path**: dancegit/dancegit-case-react-hotel

## Basic Information

- **Project Name**: dancegit-case-ReactHotel
- **Description**: ReactHotel酒店预约
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-07-24
- **Last Updated**: 2024-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

创建脚手架命令
yarn create react-app hotel --template typescript

执行安装包命令
yarn install

第三方的增强脚手架配置文件:craco
yarn add @craco/craco

对package.json 运行命令进行修改
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },

创建第三方增加脚手架的配置文件 craco.config.js


安装react-router路由
yarn add react-router-dom

安装@types/webpack-env 环境配置
yarn add @types/webpack-env


封装路由形式
<BrowserRouter>
    <Router.Routes>
        <React.Router.Route path='/'></React.Router.Route>

        <React.Router.Route path='/business/index'></React.Router.Route>
        <React.Router.Route path='/business/login'></React.Router.Route>
        <React.Router.Route path='/business/profile'></React.Router.Route>

        <React.Router.Route path="/business">
            <React.Router.Route path='index'></React.Router.Route>
            <React.Router.AuthRoute>自定义路由结构，然后进行判断</React.Router.AuthRoute>
            <React.Router.Route path='login'></React.Router.Route>
            <React.Router.Route path='profile'></React.Router.Route>
        </React.Router.Route>
    </Router.Routes>
</BrowserRouter>

Vue
export default createRouter({
    mode: createWebHash(),
    routes: [
        {},
        {},
        .....
    ]
})


装UI框架  挂载到全局
yarn add antd-mobile
yarn add antd-mobile-icons

Vue <router-link>
React

vue data 数据
react state


封装接口请求
yarn add axios


安装cookie
yarn add react-cookies