react工程化项目搭建主流技术 umi3.0(或者<3.0版本)+ dva + antd构建项目流程

umi+ dva + antd构建react工程项目(组件化开发搭建项目)
1.官方网站安装node.js(并确保 node 版本是 10.13 或以上)
2.先确保安装成功npm或者yarn
3.npm i yarn tyarn -g (国内源)
4.如果你没有 npx,需要先安装它,用于执行 node_modules 下的命令 yarn global add npx
5.开始构建项目先区分版本:

umi 3.0后也就是目前最新版本

mkdir myapp && cd myapp (新建建个项目目录并进入项目目录)

yarn create @umijs/umi-app (通过官方工具创建项目)

yarn (安装依赖)

yarn start (启动项目)

默认的脚手架内置了 @umijs/preset-react,包含布局、权限、国际化、dva、简易数据流等常用功能。比如想要 ant-design-pro 的布局,编辑 .umirc.ts 配置 layout: {}

yarn build (构建) 部署发布--->把 dist 目录部署到服务器上

3.0以下的版本--->参考 https://umijs.org/zh-CN/docs/upgrade-to-umi-3 配置
Umi 2.x 版本升级到 Umi 3.x 版本

mkdir myapp && cd myapp

yarn create umi

选择 project ----> 选择是否使用 TypeScript ----> 然后,选择你需要的功能 antd dva 等

yarn (安装依赖)

yarn start (启动项目)

更多配置参考官网文档 https://umijs.org/zh-CN/docs/getting-started

 

原文地址:https://www.cnblogs.com/lhl66/p/12515943.html

时间: 2024-08-24 08:51:10

react工程化项目搭建主流技术 umi3.0(或者<3.0版本)+ dva + antd构建项目流程的相关文章

webpack 4 :从0配置到项目搭建

webpack4发布以来,我写项目都是用脚手架,即使再简单的项目,真的是really shame..虽然道听途说了很多 webpack4 的特性,却没有尝试过,因为它给人的感觉就是,em...很难.但是今天我从最简单的部分开始,一点点搭建起一个项目. 0配置,配置了什么 让我们从0开始,新建一个项目,在终端执行以下语句: mkdir webpack-4-quickstart && cd webpack-4-quickstart npm init -y npm i webpack --sav

Vue.js系列之项目搭建(vue2.0 + vue-cli + webpack )

1.安装node node.js环境(npm包管理器) cnpm npm的淘宝镜像 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装).安装完成之后,打开命令行工具,输入 node -v,如果出现相应的版本号,则说明安装成功. npm包管理器,是集成在node中的,所以,直接输入 npm -v就会显示出npm的版本信息. 2.安装cnpm 在命令行中输入 npm install -g cnpm --registry=http://registr

vue.js2.0:如何搭建开发环境及构建项目

1,安装node.js Node.js官网:https://nodejs.org/en/ 进入Node.js官网,选择下载并安装Node.js.安装过程只需要点击"下一步"即可, 如下图,非常简单. 验证Node.js是否安装好,在windows下,win+r召唤出运行窗口,输入cmd打开命令行窗口. 输入node -v即可得到对应的Node.js版本. npm包管理器是集成在Node.js中了,所以在安装Node.js的时候就已经自带了npm.输入npm -v可得到npm的版本. 注

从零开始搭建自己的前后端分离【 .NET Core2.0 Api + Vue 2.0 】框架之二 || 后端项目搭建

WHY 至于为什么要搭建.Net Core 平台,这个网上的解释以及铺天盖地,想了想,还是感觉重要的一点,跨平台,嗯!没错,而且比.Net 更容易搭建,速度也更快,所有的包均有Nuget提供,不再像以前的单纯引入组件,比如是这样的: 已经没有了之前的Assemblies和COM的引入,初次使用感觉会很别扭,不过使用多了,发现还是很方便的,所以你一定要会使用Nuget,真的很强大,这点儿设计思路感觉更像Linux了. HOW 说了从零开始,就得从零开始,老生常谈,开始. 当然,前提是你得安装.Ne

vue多页面项目搭建(vue-cli 4.0)

1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状态管理Vuex.CSS处理器等(可以根据自己需要进行选择) 这里选择yes(Y) 我这里选用sass 打开ESLint和常规的一些 静静等待安装完成就可以了! 2.运行项目并配置多页面 cd app yarn serve /npm run serve 一般生成的都是8080端口的,由于本地已经在跑一

【收藏用】--切勿转载Java处理XML的三种主流技术及介绍

原帖地址 : http://www.ibm.com/developerworks/cn/xml/dm-1208gub/ XML (eXtensible Markup Language) 意为可扩展标记语言,它已经是软件开发行业中大多数程序员和厂商用以选择作为数据传输的载体.本文作者对于 Java 处理 XML 的几种主流技术进行一些总结和介绍,希望帮助那些有不同需求的开发人员对于 XML 处理技术的作出最优的选择. 最初,XML 语言仅仅是意图用来作为 HTML 语言的替代品而出现的,但是随着该

计算机技术领域当前的主流技术及其社会需求调查报告

移动互联网 移动互联网是移动和互联网融合的产物,继承了移动随时随地随身和互联网分享.开放.互动的优势,是整合二者优势的"升级版本",即运营商提供无线接入,互联网企业提供各种成熟的应用.移动互联网被称为下一代互联网web3.0.比如dropbox,uDrop这类应用就是典型的移动互联网应用.移动互联网业务和应用包括移动环境下的网页浏览.文件下载.位置服务.在线游戏.视频浏览和下载等业务.随着宽带无线移动通信技术的进一步发展,移动互联网业务的发展将成为继宽带技术后互联网发展的又一个推动力,

Java 处理 XML 的三种主流技术及介绍

简介: XML (eXtensible Markup Language) 意为可扩展标记语言,它已经是软件开发行业中大多数程序员和厂商用以选择作为数据传输的载体.本文作者对于 Java 处理 XML 的几种主流技术进行一些总结和介绍,希望帮助那些有不同需求的开发人员对于 XML 处理技术的作出最优的选择. 最初,XML 语言仅仅是意图用来作为 HTML 语言的替代品而出现的,但是随着该语言的不断发展和完善,人们越来越发现它所具有的优点:例如标记语言可扩展,严格的语法规定,可使用有意义的标记,内容

Java处理XML的三种主流技术及介绍

Java处理XML的三种主流技术及介绍(1) 2012-08-15 10:44 顾彬/冯晨/乔彬 IBM developerWorks 我要评论(0) 字号:T | T XML (eXtensible Markup Language) 意为可扩展标记语言,它已经是软件开发行业中大多数程序员和厂商用以选择作为数据传输的载体.本文作者对于 Java 处理 XML 的几种主流技术进行一些总结和介绍,希望帮助那些有不同需求的开发人员对于 XML 处理技术的作出最优的选择. AD:51CTO 网+首届AP