使用create-react-app搭建dva项目(一)

基于create-react-app的项目搭配dva 1 创建项目 create-react-app project 2 删除src目录下的所有文件,除了index.js,安装dva-loading npm install dva-loading --save 3 src目录下新建models文件夹,models下面新建list.js export default { namespace: "list", state:... 阅读详情


一、使用create-react-app

  1. 全局安装 create-react-app
npm install -g create-react-app
  1. 创建项目,项目名为“react-cli-demo”(这里的–template typescript是创建ts的项目,如果需要创建js的不加此后缀。)
create-react-app react-cli-demo —-template typescript

二、增加webpack配置

直接执行以下命令,放出了默认的webpack配置项(create-react-app这版将配置文件都统一到config文件夹里)

npm run eject

如果执行该命令报错

  • 原因:脚手架添加.gitgnore文件,但是却没有本地仓库。
  • 解决方式:先把代码commit一下之后执行npm run eject就可以了。

三、安装less和less-loader(看个人需要)

npm i less less-loader —save-dev
  1. 修改webpack.config.js里(将sass的配置复制一份为less)
            {
              test: lessRegex,
              exclude: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: { // 开启模块化
                    mode: "icss",
                  },
                },
                "less-loader"
              ),
              sideEffects: true,
            },
            {
              test: lessModuleRegex,
              use: getStyleLoaders(
                {
                  importLoaders: 3,
                  sourceMap: isEnvProduction
                    ? shouldUseSourceMap
                    : isEnvDevelopment,
                  modules: {
                    mode: "local",
                    getLocalIdent: getCSSModuleLocalIdent,
                  },
                },
                "less-loader"
              ),
            },
  1. 在react-app-env.d.ts文件里增加
declare module "*.module.less" {
  const classes: { readonly [key: string]: string };
  export default classes;
}

声明后引入less文件可使用
import styles from ‘./index.module.less’
这种形式

三、安装antd(看个人需要)

npm install antd

注意:antd5的dist没有antd.css这个文件,所以样式不可引入全局样式

四、安装dva和history(看个人需要)

npm i dva --save
npm i history

顺带改造项目结构为
在这里插入图片描述
到这后看下一篇文章
使用create-react-app搭建dva项目(二)

React最佳实践系列 —— 循序渐进理解 Dva中的model概念 Dva最佳实践 -- 循序渐进理解 dva中的model概念一. 序二. 在create-react-app中使用redux1. 开始2. 安装redux三.异步action四. Dva中的model五. subscriptions属性 作者: DocWhite白先生 一. 序 在dva框架中model的出现,帮助开发者不比在新建项目的时候每次都要一次安装配置和React-Router, R... 阅读详情

相关推荐

React+umi+dva 项⽬实战-lesson6

React+umi+dva 项⽬实战-lesson6

python183360的博客 1345

React--Umi和Dva

Umi 以路由为基础,解决了之前使用react-router-dom的时候使用路由的复杂度); ​ dva 是一个基于 redux 和 redux-saga 的数据流方案 ​

qq_44930306的博客 5200

create-react-app构建dva项目20180702

基于create-react-app官方脚手架搭建dva模式的项目;以react官方脚手架开启项目,安装采用dva方式的,构建项目,展示记录过程中遇到的各种点和Keng,若你也遇到类似问题,也许能帮上你 基于上一版本增加完善部分

react dva实现

dva dva是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva额外内置了react-router,fetch,可以激烈为一个轻量级的应用框架。 使用dva 定义一个模型,有点像redux-toolkit。 使用connect连接 像redux的connect一样连接。 启动。 然后如何派发action。 通过对应的指令找到对印的reducer,派发。 dva的基本操作就是这样,使用起来比较轻便。 实现dva ...

lin_fightin的博客 1930

3D视觉革命丨多相机协同拼接技术如何重塑工业检测边界

本文深入探讨了多相机协同拼接技术如何突破单台3D相机的物理局限,实现工业检测从“点面”到“立体”的无死角覆盖。通过拆解系统标定、同步融合等核心技术,并结合锂电池、长轴零件等实战案例,揭示了该技术如何以虚拟“超级视觉传感器”重塑检测边界,提升精度与效率。

weixin_29056865的博客 387

手把手教你用Keil5和Proteus8给51单片机跑个流水灯(附完整源码+安装包)

本文详细介绍了如何使用Keil5和Proteus8为51单片机实现流水灯效果,包括开发环境配置、汇编代码编写、电路设计及仿真调试。通过完整的源码和安装包,帮助初学者快速掌握C51单片机开发的核心流程,适合嵌入式开发入门学习。

weixin_42632434的博客 372

react如何使用dva

Dva” 是一个基于 Redux 和 Redux-saga 的状态管理框架,通常用于 React 应用程序。它帮助你更轻松地管理应用程序的状态、副作用和数据流。

秋来九月八 3172

【Pytorch】DCGAN实战(三):二次元动漫头像生成

文章目录1.实现效果2.环境配置2.1Python2.2Pytorch、CUDA2.3Python IDE3.具体实现3.1数据预处理(data.py)(1)导入包(2)定义数据类3.2模型Generator,Discriminator,权重初始化(model.py)(1)导入包(2)Generator(3)Discriminator(4)权重初始化3.3网络训练(net.py)(1)导入包(2)创建类3.4 主函数(main.py)(1)导入文件(2)定义超参数(3)实例化(4)进行训练4.训练过程4.1

qq_44031210的博客 4918

React系列文章之DVA

react中dva基本使用包含了dva脚手架、dva/router路由、models数据模型

hujiaxi222的博客 973

AltiumDesigner 高效封装库管理 -- samacsys插件实战指南

本文详细介绍了如何利用samacsys插件高效管理AltiumDesigner封装库。通过实战指南,指导用户完成插件安装、云端元件搜索与放置,并分享将海量资源整合为个人标准库的管理策略,从而大幅提升PCB设计效率与可靠性,杜绝封装错误。

weixin_28285943的博客 125

进阶01:Labview与OPC UA设备通信

LabVIEW通过OPC UA实现高效设备通信方案 本文介绍了使用LabVIEW与OPC UA设备通信的完整实施方案。OPC UA协议具有跨平台兼容、高安全性和高效数据交换等优势。实施步骤包括:1)安装NI OPC UA工具包;2)搭建模拟测试环境,使用OPC UA Simulation Server创建测试变量;3)编写LabVIEW程序,实现连接服务器、事件订阅、数据读写等功能。重点展示了通过用户事件实现设备主动触发的机制,当模拟变量值改变时自动触发LabVIEW事件处理。该方案验证了OPC UA在工业

weixin_38637405的博客 1404

基于create-react-app官方脚手架搭建dva模式的项目(一)

思索良久,决定还是记录下心得体会:一个基于create-react-app官方脚手架,搭建起来的dva开发模式的react项目。 当然现今的前端市场如此强大,你可以在网络上找到你想要的任何脚手架,并且很多可以开箱即用,不可否认它们很优秀,开发它们的人或团队更值得我们竖起大拇指,为他们点赞!比较适合国人还是阿里系的一套react开发脚手架,dva-cli,antd,Umi等,当然gitHub上也有...

小记心得 1万+

完整的 Python 数据分析案例:新能源汽车续航里程预测

随着新能源汽车的普及,续航里程成为消费者关注的重要指标。准确预测新能源汽车的续航里程,有助于车企优化电池管理系统、提升车辆性能,也能帮助消费者合理规划出行。本案例将基于新能源汽车的各项参数,如电池容量、行驶速度、环境温度等,构建续航里程预测模型。通过以上改进,可以提高数据处理的准确性、模型的性能和可视化的效果。

daqsdfas的博客 1588

使用create-react-app或者antd创建一个React项目

转载请注明出处:王亟亟的大牛之路 距离上一次提及React的内容差不多也快1年多了,然后这一年里平胸而论觉得进步不多,然后最近因为业务需要然后都在做一些前端的工作。 然后以前都是从npm init一路自己撸到配置package.json到写scripts那些,现在脚手架一行撸穿,还是感叹懒人的世界6666 老规矩开篇前先案例:https://github.com/ddwhan0123/U...

王亟亟的博客 4万+

HTML满屏跳动的爱心(完整代码)

HTML语言实现满屏跳动爱心的完整代码。

AIGC 12万+

SAP_SD模块更改销售订单定价简介

方式优点缺点适用场景MASS简单,无需开发不能触发重新定价逻辑修改特定字段BDC (VA02)可模拟人工操作维护复杂,速度慢少量订单批改稳定、安全需ABAP支持推荐用于批量重新定价VBOF标准重算返利仅适返利类条件返利更新通过本文,我们了解了 SAP 的[SAP_SD模块更改销售订单定价]的基本概念和应用方法。希望这些信息能帮助您在实际工作中更好地使用 SAP 系统,提高工作效率和管理水平。更多SAP文章请点击更多SAP文章更新,大家一起学习进步!!!

我小时候很黑的博客 715

dva与create-react-app的结合使用

  dva与我们的create-react-app创建的两款脚手架是我们写react项目的两款优秀框架,之前一种使用create-react-app这款脚手架进行开发。然后这个框架美中不足的是redux方面着实令人书写麻烦 然而dva框架就对其进行了封装改良 使其看起来vuex相似度十分高 下面给大家介绍下用这两个框架结合起来开发的步骤吧   首先利用create-react-app生...

陈强的博客 1757

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

create-react-app结合dva.js1-搭建项目整合dva.js

create-react-app结合dva使用 dva: dva 首先是一个基于redux和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。 dva数据流向图 创建项目 弹出配置npm run eject 导入dva.js 安装dva cnpm install dva --save 在src目录下新建views文件夹, 用来存放页面组件 在views文件夹下, 新建一个Page1.jsx文

wx1035589113的博客 878

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

改造create-react-app 引入dva和antd

改造create-react-app 引入dva和antd 脚手架搭建项目 先用脚手架把项目搭建 npx create-react-app my-react-a 项目结构 试一下跑起来项目 yarn start 暴露webpack 配置 npm run eject ​ 这边脚手架中的配置就完毕了 将项目改造为dva 引入dva库 npm install dva -D 改造项目 src目录下新建models,routes,services,utils文件夹 在routes中

weixin_42369612的博客 524

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

新手搭建第一个react脚手架项目 --基于create-react-app

1.安装create-react-app npm install create-app -g (-g 全局安装) 2.为项目命名 create-react-app demo-project (demo-project为项目名称) 3.一个可运行的项目就安装好了,可以运行了(默认端口3000) npm run start 4.如果要暴露所有配置 使用npm run eject,项目...

qq_32094783的博客 675

create-react-app项目所遇问题总结之引入dva

建议引入dva前,大家可以参照官方dva快速上手先用dva-cli脚手架先创建一个react+dva项目,先看看里面的目录结构,以及使用规则配置方式。 言归正传, 那么在我们用create-react-app搭建的项目中如何引用dva呢? 1. 引入依赖 yarn add dva -S 2. 改造目录和配置 嗯,就这样。 3. 如何在项目中使用ES7的修饰器@ 平时开发react项目中,引入ES7的修饰器可以帮助我们优化很多东西,比如说dva的connect连接函数,比如说click方法中的this绑定

阑珊伊人 511

创建react、umi项目时的坑

主要是记录平时自己练习时遇到的问题~~ 按照学习文档练习react、dva、umi项目创建并进行相关开发练习 一、使用create-react-app创建react项目 可以使用以下三种命令创建一个react项目,可以参考: https://github.com/facebook/create-react-app 1.npx create-react-app my-app //my-pp是一个项...

HZ_xhs的博客 8810

React.js + Dva初探

React.js React官网:https://react.docschina.org/ ES6学习:http://es6.ruanyifeng.com/ Ant Design蚂蚁家框架: https//ant.design/index-cn Redux状态管理器: https://www.redux.org.cn Dva脚手架: https://github.com/dvajs/dva 开...

托比大王 684
上一篇: 使用create-react-app搭建dva项目(二)
下一篇: 优化antd的select组件
Nancyeah
博客等级 码龄9年 2粉丝 10原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值