react 创建新页面_从零开始创建一个React(Umi+AntD)项目

最新推荐文章于 2024-02-11 01:09:16 发布

strustis

最新推荐文章于 2024-02-11 01:09:16 发布

阅读量635

点赞数

文章标签： react 创建新页面

本文链接：https://blog.csdn.net/weixin_35988178/article/details/112832745

版权

介绍

Umi

整合常用组件、插件的前端应用框架。开箱即用，有封装好的布局可以直接应用。

AntD

丰富的组件库。

初始化环境与代码

本文以 Ubuntu 18.04 为例

初始化 Node 环境

Umi3 要求安装 NodeJS 10.13+

下载 NodeJS 压缩包：

wget https://npm.taobao.org/mirrors/node/v10.21.0/node-v10.21.0-linux-x64.tar.gz

复制代码

解压到 /usr/local/lib/ 目录下(或其他目录，则自行修改下面命令中的路径)：

tar -zxvf node-v10.21.0-linux-x64.tar.gz -C /usr/local/lib

复制代码可能需要管理员权限，添加 sudo

软连接执行命令：

NODE_PATH=/usr/local/lib/node-v10.21.0-linux-x64/bin

BIN_PATH=/usr/local/bin

ln -s $NODE_PATH/node $BIN_PATH/node

ln -s $NODE_PATH/npm $BIN_PATH/npm

ln -s $NODE_PATH/npx $BIN_PATH/npx

复制代码可能需要管理员权限，添加 sudo

验证配置完成：

node -v

npm -v

复制代码

输出版本信息表示 NodeJS 安装成功。

初始化 Umi 项目

创建并进入项目文件夹：<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

strustis

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 创建新页面_从零开始创建一个React(Umi+AntD)项目

介绍Umi整合常用组件、插件的前端应用框架。开箱即用，有封装好的布局可以直接应用。AntD丰富的组件库。初始化环境与代码本文以 Ubuntu 18.04 为例初始化 Node 环境Umi3 要求安装 NodeJS 10.13+下载 NodeJS 压缩包：wget https://npm.taobao.org/mirrors/node/v10.21.0/node-v10.21.0-linux-x64...
复制链接

扫一扫

Umi + React + Ant Design Pro 项目实践（一）—— 项目搭建

且听风吟的博客

03-07

2182

Umi + React + Ant Design Pro 项目实践（一）—— 项目搭建

【React进阶-1】从0搭建一个完整的React项目（入门篇）

热门推荐

jsjxxx的博客

06-29

1万+

这篇文章带领大家从零开始手动撸一个React项目的基础框架，集成React全家桶。万字长文，请各位有足够的时间时再来阅读和学习。概述平时工作中一直在用React提供的脚手架工具搭建React项目，一行命令全都搞定，自己只管做需求开发即可，从来没仔细研究过各个模块代码怎么去配置，相互之间怎么去进行交互。这周正好有时间，所以决定仔细研究下React项目中的各个功能模块，所以我们来讲解下如何从零搭建一个完整的React项目。目录项目初始化安装NodeJS环境和初始化项目安装webpack新建项目目录和文件

参与评论您还未登录，请先登录后发表或查看评论

react-antd:使用react＆antd建立个人电脑网站

05-02

技术栈 react@16.0 + redux@3.7.2 + react-router@3.2.0 + webpack@3.10.0 + fetch@2.0.3 + less@2.7.1 + antd@3.1.3 npm install (安装依赖包) npm start (运行本地开发环境) npm run build (打包) 另开启一个命令窗口启动node的本地json数据代理服务 npm run mock 想要体验聊天室功能先开启socket服务运行命令 npm run chat 服务端返回数据结构格式 { data: { totalCount: 100, currentPage: 1, pageSize: 10, 'list': [ ], }, msg: '', status: 1, } 所有异步请求返回都会经过u

后端程序员快速入门React+Antd进行开发

LT19990304的博客

05-08

1855

到这里我们的React+antd+axios+router的学习就就结束了，欢迎分享给有需要的小伙伴！配置webpack.config.js,在 //style files regexes 最下面配置less。如何创建index.less 和index.scss并引用，重新启动项目。配置封装 /http/request.ts。如图我们就已经搭建好了一个react项目雏形。请求api 封装 /api/user.ts。配置 /http/index.ts。在大约530行左右配置。安装yarn包管理器。

Ant Design Pro从0-1创建一个项目

前端小白成长记

11-16

3891

创建 $ yarn create umi my-app Select the boilerplate type: 选择 Ant Design Pro ❯ ant-design-pro Which language do you want to use? 选择你使用的语言 ❯ TypeScript JavaScript $ cd my-app $ yarn $ yarn start # 打开浏览器访问 http://localhost:8000 移除语言国际化 yarn run i18n-re

Ant Design Pro 从零到一（总结）

sirwsl

05-26

1867

全网唯一Ant Design Pro快速入门教程适合0基础3天入门教程，快速掌握React、AntDesign Ant Design0基础入门

从零搭建React+Ant Desing前端项目

最新发布

weixin_43041894的博客

02-11

2150

Antd自带了很多Icon，非常方便直接使用。但在项目中遇到Antd没有的图标怎么办？当然，前提要求是自己构建的图标也能支持随时改变颜色和大小等样式。例如针对切换亮色/暗色主题功能，Antd没有提供“太阳”“月亮”“主题色”的Icon。第一个方法是在iconfont网站()上制作自己的iconfont字体，然后以字体文件的方式应用到项目中。这种方式相信从事前端开发的同学都很熟悉了，不再赘述。

基于umi+antd-mobile的移动端项目模板

02-22

在开始新项目时，开发者只需在此基础上根据自己的业务需求进行扩展和定制，避免从零开始创建项目结构。总的来说，"基于umi+antd-mobile的移动端项目模板"是一个强大且高效的移动端开发起点，它整合了umi的高级特性...

umi+react+antd 增删改查

10-20

总的来说，“umi+react+antd 增删改查”是一个典型的前端开发实践，它涵盖了现代Web开发中的主要技术和操作，通过这三个强大的工具，开发者可以高效地构建出功能完备、交互良好的数据管理应用。在这个过程中，理解并...

react-利用react全家桶以及蚂蚁金服antdmobile开发H5页面

08-15

在本项目中，我们主要探讨如何使用React全栈工具集，即"react全家桶"，配合蚂蚁金服的移动端UI库antd-mobile来开发H5页面。React作为一个强大的JavaScript库，被广泛用于构建用户界面，尤其是单页应用。而antd-...

react-web-pro::rainbow: 基于 webpack5.0 从零搭建的 React 中后台项目框架模板。:rocket:包括Webpack4.0配置及打包优化、React全家桶使用（React + React-router + Axios + Mobx + Antd）

04-15

:rainbow: :rocket: 基于 webpack4.0 从零搭建的 React 中后台项目框架模板。:rocket: 说明本项目为 React 中后台项目框架模板，方便快速进行具体项目开发。包括 Webpack4.0 配置及打包优化、React 全家桶使用...

基于 umi + dva + antd-mobile 快速构建H5 APP 应用。.zip

02-08

然后，通过运行 `npm init` 创建一个新的项目，并安装 `umi`、`dva` 和 `antd-mobile` 作为项目依赖。 2. **初始化 umi 项目**：运行 `umi init` 命令创建一个基本的 umi 项目结构。在这个过程中，可以选择默认的...

创建一个React - Ant Design 项目

weixin_73473804的博客

02-17

229

react空白项目

01【React再造之旅】从0搭建一个完整的React项目（初稿）

X北辰北的博客

03-07

880

概述平时工作中一直在用React提供的脚手架工具搭建React项目，一行命令全都搞定，自己只管做需求开发即可，从来没仔细研究过各个模块代码怎么去配置，相互之间怎么去进行交互。这周正好有时间，所以决定仔细研究下React项目中的各个功能模块，所以我们来讲解下如何从零搭建一个完整的React项目。本文篇幅较长，请你耐心阅读~ 目录概述目录操作步骤一、项目初始化 1、安...

使用react的Ant Design组件库的简单流程

weixin_68560422的博客

05-05

597

5.按需加载：如果你只需要使用Ant Design库的一部分组件，可以使用按需加载的方式减少打包体积。Ant Design是一个非常流行的UI组件库，它提供了丰富的React组件和样式库。注意：直接使用npm install antd 下载的是最新版本，引入antd.css文件的时候会提示找不到，解决方法：下载的时候指定版本，例如：npm install antd@4.24.2。

从0到1搭建react 工程化前端项目

04-21

859

带小白从0到1手把手搭建react项目

从零开始使用react+Ant Design撸一个后台管理系统(一)

weixin_45745641的博客

03-21

3905

文章目录前言1.先来搭个架子—创建项目2.准备工作—装些工具路由和axiosCSS预处理器SCSS安装Ant Design3.开始写项目定义项目文件结构app.js进行布局nav侧边导航前言从本篇开始，教大家从零开始使用react+Ant Design做一个后台管理系统，系列文章持续更新，完成之后会把代码发给大家学习参考，话不多说，直接开冲如果react基础不太好的同学，可以看一下我的react专栏文章回顾一下基础知识：从零入门react系列 1.先来搭个架子—创建项目这里使用react脚手架搭建项

React+Ant.design 从零开始搭建个人博客实战教程04 —— 配置json-server 提供虚拟数据

div_ma的博客

06-05

1万+

这是一个从零开始的react ant-desgin教程详细记录从零开始搭建个站的过程；学习react 学习框架学习ant-desgin 前端的学习是无止境的愿我们在以后的道路一帆风顺加入QQ群734585334 让我们一起学习分享记录吹水快乐的一起变老，广州或深圳有前端工作可以联系我微：webmxj

react-从0到1新建react项目

weixin_40220492的博客

10-02

1322

1.阅读官方文档2.跟着下面开始敲代码1. 脚手架创建项目1.node -v2.npm install -g create-react-app 安装脚手架运行成功。

react + antd创建一个项目

05-27

好的，以下是创建 React + Ant Design (Antd) 的项目所需的步骤： 1. 首先，安装 Node.js 和 npm（如果您还没有安装的话）。 2. 打开命令行工具，创建一个新的 React 应用程序。在命令行中输入以下命令： ``` npx create-react-app my-app ``` 这将创建一个名为 "my-app" 的新的 React 应用程序。 3. 进入新创建的 "my-app" 目录： ``` cd my-app ``` 4. 安装 Ant Design (Antd)： ``` npm install antd ``` 5. 在 "src/index.js" 文件中，引入 Antd 的样式和组件： ``` import 'antd/dist/antd.css'; import { Button } from 'antd'; ``` 6. 使用 Antd 的组件： ``` function App() { return ( <div className="App"> <Button type="primary">Button</Button> </div> ); } ``` 7. 运行应用程序： ``` npm start ``` 运行后，在浏览器中访问 "http://localhost:3000"，即可看到一个带有 Antd 按钮的 React 应用程序。希望这些步骤可以帮助您创建 React + Antd 项目。