ReactJS单页面应用之项目搭建
初衷
因接手的项目前端采用reactjs+antd,为把控项目中的各个细节,所以想做一些整理,以免后期遗忘。
创建及启动项目
# 全局安装create-react-app
# 如果曾经安装过,可先移除: npm uninstall -g create-react-app
npm install -g create-react-app
# 创建项目sysmgmt
npx create-react-app sysmgmt --template typescript
# 进入项目目录
cd sysmgmt
# 启动
npm start
为项目增加路由功能
安装依赖
# 安装react-router-dom
npm install --save react-router-dom @types/react @types/react-dom @types/react-router
添加及修改相关文件
@/src/routes/index.tsx
import { lazy, LazyExoticComponent } from 'react';
export type RouterType = {
path: string,
component: LazyExoticComponent<() => JSX.Element>,
}[]
const Routers: RouterType = [{
path: 'home',
component: lazy(() => import ('../pages/Home'))
},{
path: 'details',
component: lazy(() => import ('../pages/Details'))
},]
export default Routers
@/src/App.tsx
import React, { Suspense } from 'react'
import './App.css';
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
import Routers from './routes';
import Loading from './components/Loading';
import BasicLayout from './layout/BasicLayout';
function App() {
return (
<BrowserRouter>
<Suspense fallback={<Loading />}>
<Routes>
<Route path='/' element={<BasicLayout />}>
{
Routers.map(router => {
return (
<Route
key={router.path}
path={router.path}
element={<router.component />}
>
</Route>
)
})
}
<Route path='' element={<Navigate to={'home'}/>}/>
</Route>
</Routes>
</Suspense>
</BrowserRouter>
);
}
export default App;
项目源码
参考资料
https://www.jianshu.com/p/727d836d1d47
https://cloud.tencent.com/developer/article/1842697
https://cloud.tencent.com/developer/article/2098078
ReactJS单页面应用之项目搭建的更多相关文章
- 单页面应用 之 项目中集成插件vue-router
\es6\my-complex-project>npm install vue-router -S (S 表示这个包下载到,当前的项目中) 导入写好的 router 这里尽量使用 @ ...
- vue如何将单页面改造成多页面应用
问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用.项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验. ...
- 建立多页面vue.js项目
介绍 根据需求,我们希望建立一个多页面的vue.js项目,如何改造单页面vue.js项目为多页面项目?跟着我的步伐看下去吧. 1.创建单页面vue.js项目 简单的记录一下创建步骤: --安装cnpm ...
- Vue-Router + Vuex 实现单页面应用
效果查看(一个食品安全网,大家也可以发布一些食品安全的见闻,尽举手之劳): 源代码:https://pan.baidu.com/s/1i43H3LV 如果想要服务器端代码可以在评论里说明一下 利用vu ...
- Vue - 使用命令行搭建单页面应用
使用命令行搭建单页面应用 我们来看一下最后完成的效果: 大纲 1. 下载 node, git, npm 2. 使用命令行安装一个项目 一. 下载工具 node , git 的下载大家可以去官网自行下 ...
- 基于laravel5.4 vue 和vue-element搭建的单页面后台CMS
介绍 该项目后台是基于vue和laravel搭建的单页面CMS系统,包含了文章管理,权限管理,用户管理等基本模块. 前台使用了传统web技术,laravel渲染搭建了个博客系统 github地址:ht ...
- phpcms-v9系统搭建wap网站及单页面
如需要绑定域名为wap.domain.com,作下如操作: 一.把wap.domain.com域名绑定到你的这个网站主机上. 二.在网站后台——模块——手机门户域名里面填写“http://wap.do ...
- Spring MVC 项目搭建 -4- spring security-添加自定义登录页面
Spring MVC 项目搭建 -4- spring security-添加自定义登录页面 修改配置文件 <!--spring-sample-security.xml--> <!-- ...
- Vue-cli创建项目从单页面到多页面
vue-cli创建项目从单页面到多页面 对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm i ...
- Vue-cli创建项目从单页面到多页面2-history模式
之前讲过怎样将vue-cli创建的项目改造成多页面(vue-cli创建项目从单页面到多页面),今天说一下怎样在多页面的前提下使用history模式. 如何使用history模式 因为vue默认的has ...
随机推荐
- spring boot 配置多套数据源
问题:需要在多个数据库中查询数据,不适用sql中的use语句. 导包 pom.xml <!-- mybatis,使用mybatis-plus也行,虽然plus的单表查询很强,在大部分情况下需要编 ...
- Qt中的多窗体编程
在某些应用中,会用到多窗体功能,这里就来讨论一下Qt下多窗体功能的实现.本例仍以qt4.8.7版本为例,并基于QtCreator4.6.2环境进行开发.在本例中,以一个能显示实时时钟的第二窗体为例进行 ...
- mysql 主次数据库搭建
准备工作:主192.168.200.51 从192.168.200.53 主从服务器需要有相同的初态 1.将主服务器要同步的数据库枷锁,避免同步时数据发生改变 mysql>use db; my ...
- Python算法教程_中文版书籍 程序员必备 免费下载
Python算法教程_中文版免费下载地址 提取码:55kh 内容简介 · · · · · · 本书用Python语言来讲解算法的分析和设计.本书主要关注经典的算法,但同时会为读者理解基本算法问题和解 ...
- linux 多级时间轮应用场景
参考链接: https://www.163.com/dy/article/GMGUO9UV05421U51.html
- element-ui upload自定义formdata上传文件和参数
<el-upload list-type="text" action="" :http-request="HandleHttpRequest ...
- vue学习 第三天css基础
1.emment语法(作用:提升html和css书写速度) 2. 复合选择器 1)由两个或多个基础选择器,通过不同的方式组合而成的,可以更准确.更高效的选择目标元素(标签) 2)后代选择器.子元素选择 ...
- oracle 导出导入表 不到出指定表
导出多个表 exp LSXYYSZHMRMS/******@PK99SERVICE file=d:\fuhcx.dmp tables=(fhcxgxxx,fhcxjcxx,fhcxlbxx,fhcx ...
- (已经成功部署)配置vue+nginx+uwsgi luffy项目
2019-9-16 21:16:17 由于超哥视频翻车,应该是先改api.js中的IP 再打包 然后按照原来一步一步部署vue uwsgi Nginx 然后就可以直接访问了!!! 昨天其实就完成,只 ...
- java SE01
目录 一.基础语言 1. 注释 a. 行内注释 b. 多行注释 c. 文档注释 2. 关键字 3. 数据类型 a.基本数据类型 b.引用数据类型 c. 类型转换 4. 变量类型 a. 类变量 b. 实 ...