react：react + dva + router + roadhog 基础项目搭建

一、脚手架安装

第一步：全局安装 dva，这里有个条件，node 版本要 >= 6.5 且 dva-cli 版本要在 0.7x。

npm install dva-cli -g

第二步：查看版本号

dva -v

二、创建一个 dva 的 demo

dva new reactbase

cd myapp

npm start

本地生成的目录结构如下：

注）如果 npm install 安装报错，改成 cnpm install

第一步：生成的目录结构如下：

第二步：了解下 roadhog 的配置

链接地址：https://github.com/sorrycc/roadhog

三､配置 antd 、babel-plugin-import

babel-plugin-import 主要是用来引和 antd 的js 和 css 文件，打包出来的文件不会太大。

通过 npm 安装 antd 和 babel-plugin-import。babel-plugin-import 是用来按需加载 antd 的脚本和样式的，

cnpm install antd babel-plugin-import --save

四、安装 react-router-dom

cnpm install react-router-dom --save-dev

五、在 .webpackrc 文件下配置：webpack 插件对 antd 按需加载

"extraBabelPlugins": [

[

"import",

{

"libraryName": "antd",

"libraryDirectory": "es",

"style": "css"

}

]

六、在 .webpackrc 文件下继续：配置代理

// 配置一下代理

"proxy": {

"/api": {

"target": "http://jsonplaceholder.typicode.com/",

"changeOrigin": true,

"pathRewrite": {

"^/api": ""

}

最终五和六合成的代码是：

七、项目构建

页面运行（npm start）后的界面如下：

1､配置入口页面：

默认：

修改后：

2､配置路由：./src/router.js

默认：

修改后：

3､添加主界面页：新增 App.js

新增的文件可以理解为：首页

代码如下：

效果图如下：

4､添加组件：./src/components 下新增菜单组件，调用 antd 组件化。

默认的组件化格式如下：

修改成：

下面新建菜单文件：用 antd 的 Menu 菜单。

省略：参照官方文档：https://ant.design/components/menu-cn/

在 App.js 中调用 Menus 组件

此时页面效果如下：

注）布局自行优化。可以用 Layout 布局。

5､安装 less 或者 sass

cnpm install less less-loader --save-dev

或

cnpm install sass sass-loader --save-dev

本项目中遇到一个问题：less 文件引入的时候第一种方法生效，第二种方法不生效（如下图）？

原因是因为 dva 中开启了 css modules。antd 的样式覆盖了样式。

解决方法如下：

:global {

// 写据需样式

}

6､路由配置

简单来说就是点击左侧菜单，右边内容改变。

方法一：

配置：App.js

配置：router.js

配置：Menu.js

方法二：

配置：index.js (入口文件）

配置：App.js

配置：router.js

7､效果出来了

六､模块分析

初始化的 dva , 参考链接：https://www.jianshu.com/p/69f13e9123d9

1､const app = dva()

2､app.use

用来加载插件，reduce 第三方这种

3､app.model

用来接收发送的 action

4､app.router

在这里面进行所有页面初始化的路由设置

1､添加路由

2､添加 model

3､添加service

4､添加界面

参考链接：https://blog.whezh.com/dva-basic-usage/

https://www.cnblogs.com/Chasel-Chen/p/8984073.html

https://github.com/sorrycc/roadhog

框架搭建：

http://que01.github.io/2016/11/20/dva-react/

react + dva + router + roadhog 基础项目搭建

react：react + dva + router + roadhog 基础项目搭建相关推荐

超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
React初级篇————基础项目搭建以及环境配置
今日起,开始学习web前端的三大框架之最看好的主流框架React.React用于搭建响应式的前端页面,一切皆为js的思想,具有最高的自由度.这里不作太多介绍,首先先来搭建配置相应的环境. 安装的方式方 ...
react项目搭建，步骤最全，附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)
企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...
react项目搭建（基础学习笔记）
react项目搭建(基础学习) 安装局部安装 1.npm init -y或yarn init -y初始化项目 2.全局安装creact-react-app.使用npm install -D crea ...
typescript+react+antd基础环境搭建
typescript+react+antd基础环境搭建(包含样式定制) tsconfig.json 配置 // 具体配置可以看上面的链接这里module moduleResolution的配置都会影 ...
React+TypeScript+webpack4多入口项目搭建
资源 React-16.8.* react-router-dom-4.3.* TypeScript-3.5.* webpack-4.* eslint-5.16.* 项目目录 ├── dist # 打包 ...
【React+ts】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd（保姆式教学）
前提你需要准备好node.js版本不低于6.14.8 和 git 文章内容比较长(保姆级别教程),全是干货,请耐心看完通过create-react-app脚手架搭建项目 1.第一步注: 项目名称 ...
react项目实战 1 项目介绍、项目搭建
目录一项目介绍二项目搭建 2.1 本地接口部署 1 创建并导入数据 2 启动接口 3 测试接口 2.2 初始化项目 1 创建项目 2 整理项目的目录一项目介绍名称: 好客租房形式: 移 ...
React项目搭建与Echars工具使用
React项目搭建与Echars工具使用一.React项目快速搭建 1.新建文件夹 2.直接在对应目录输入 cmd ,打开终端 3.执行指令完成React应用建立二.React项目结构和分析 1. ...

react：react + dva + router + roadhog 基础项目搭建

react：react + dva + router + roadhog 基础项目搭建相关推荐

最新文章

热门文章