ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】
一、概述
1.1、脚手架概念
编程领域中的“脚手架(Scaffolding)”指的是能够快速搭建项目“骨架”的一类工具。例如大多数的React项目都有src,public,webpack配置文件等等,而src目录中又包含components目录等等。每次在新建项目时,手动创建这些固定的文件目录。脚手架的作用就是帮助你完成这些重复性的工作,包括一键生成主要的目录结构、安装依赖等等。
1.2、参考地址
ant design参看地址:https://ant.design/docs/react/introduce-cn
其中主要包含了各种插件及使用
ant design pro参看地址:https://pro.ant.design/docs/getting-started-cn
其中主要是一个企业级中后台前端/设计解决方案
二、准备工作
本地环境需要安装 node 和 git。技术栈基于 ES2015+、React、dva、g2 和 antd,提前了解和学习这些知识会非常有帮助。
三、安装
有两种方式进行安装:
方式一、直接 clone git 仓库
$ git clone --depth=1 https://github.com/ant-design/ant-design-pro.git my-project
$ cd my-project
方式二、使用命令行工具
你可以使用集成化的命令行工具 ant-design-pro-cli。
$ npm install ant-design-pro-cli -g
$ mkdir my-project && cd my-project
$ pro new # 安装脚手架
四、目录结构
此时已经为你生成了一个完整的开发框架,提供了涵盖中后台开发的各类功能和坑位,下面是整个项目的目录结构。
├── mock # 本地模拟数据
├── public
│ └── favicon.ico # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── common # 应用公用配置,如导航信息
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # dva model
│ ├── routes # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── g2.js # 可视化图形配置
│ ├── theme.js # 主题配置
│ ├── index.ejs # HTML 入口模板
│ ├── index.js # 应用入口
│ ├── index.less # 全局样式
│ └── router.js # 路由入口
├── tests # 测试工具
├── README.md
└── package.json
五、项目加载启动
方式一、使用原始npm启动
此时可以本地启动
$ npm install
$ npm start
启动过程
E:\work\antdesign\my-project>npm start> ant-design-pro@1.3.0 start E:\work\antdesign\my-project
> cross-env ESLINT=none roadhog devCompiled successfully!You can now view Your App in the browser.Local: http://localhost:8000/On Your Network: http://10.0.9.120:8000/Note that the development build is not optimized.
To create a production build, use npm run build.
启动完成后会自动打开浏览器访问 http://localhost:8000,你看到下面的页面就代表成功了。
方式二、使用idea插件
安装过程如 :http://www.cnblogs.com/bjlhx/p/8967531.html
使用过程:
1、在第三步使用git获取代码后,打开idea,使用File→Open打开项目目录即可
2、打开idea内嵌terminal,执行【其实此步骤可以直接拷贝其他项目下的node_modules文件】
npm install
3、在项目的package.json上右键,点击show npm scripts,出现如下图,如果找不到可以通过,View→tools windows→npm打开,
4、双击start执行即可
接下来你可以修改代码进行业务开发了,我们内建了典型业务模板、常用业务组件、模拟数据、HMR 实时预览、状态管理、国际化、全局路由等等各种实用的功能辅助开发,你可以继续阅读和探索左侧的其他文档。
ant design pro(一)安装、目录结构、项目加载启动【原始、以及idea开发】相关推荐
- 前端UI框架Ant Design Pro 依赖安装
前端UI框架Ant Design Pro 依赖安装 最近换了新工作,需要负责全栈开发,项目用到的前端框架是ant design, 蚂蚁金服基于react打造的一个服务于企业级产品的UI框架, 这边简单 ...
- 同样的环境同样的安装目录arx提示加载不上
本文迁移自本人网易博客,写于2015年4月15日,同样的环境同样的安装目录arx提示加载不上 - lysygyy的日志 - 网易博客 (163.com) 不知道什么原因,自定义的arx跑到了autoc ...
- ant design pro模板_Ant Design Pro入门教程,安装,运行(V5 Typescript版)
[前言] 找了很多Admin模板,最后还是看中了AntDesignPro这个阿里巴巴开源的Admin框架,长这样(还行吧,目前挺主流的): 该套模板是使用了React开发框架作为基础,AntDesig ...
- Ant Design Pro入门之部署安装
部署安装 下载地址:https://github.com/ant-design/ant-design-pro 我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zip ...
- Ant Design Pro入门教程 安装框架
介绍一下Ant Design Pro,说白了就是基于React的一套脚手架,UI是 Ant Design ,框架是 Ant Design Pro 脚手架安装完成,运行起来的样子: 下面我们来看看怎么安 ...
- 为什么我选择Ant Design Pro脚手架
为什么我选择Ant Design Pro脚手架 首先先来谈谈Ant Design Pro脚手架好处: 初始化操作简单! 启动脚手架方便! 任何一种语言和框架,满足以上两点,肯定会得到很好的推广(比较大 ...
- Ant Design Pro入门
目录 一:了解Ant Design Pro 二:快速入门 一:了解Ant Design Pro Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中 ...
- Ant Design Pro -- 02项目结构@20210331
一.项目的目录结构 ├── config # umi 配置,包含路由,构建等配置 ├── docker # 部署 ├── functions # ├── mock # 本地模拟数据 ├── publi ...
- ant design pro安装
一.过程安装 其中安装成功后出现404参考 第二个大导航 所有都需要安装最新版本的 包括装node(node 10.13.0,自带npm 版本6.4.1 ).yarn. 和 git(建议最新版本,否 ...
最新文章
- java 图片刷新页面_js修改img的src属性刷新图片时的图片缓存问题
- SpringMvc-HandlerExceptionResolver
- openstack nova后端使用ceph rbd(增加在线迁移live_migrate和快照snapshot功能)
- JAVA生成企业组织机构代码、营业执照代码、税务登记号码、统一社会信用代码并校验
- bootstrap table用法
- 财富管理技术服务商NewBanker完成千万级美元 Pre-C 轮融资...
- nfs linux 权限不够,nfs Permission denied 的一种情况
- 【camera】Mtk相机冷启动的拆解笔记
- 美通企业日报 | 阿迪达斯和碧昂丝达成标志性合作;万豪国际公布亚太区2020年发展愿景...
- 程序员们,高工资的你,是不是低社保的待遇?
- SVG滤镜波浪动画效果
- 学习设计模式之原型模式
- vb之msgbox用法(转)
- python批量删除微信好友_用 Python + Appium 的方式自动化清理微信僵尸好友
- 分布式基础-常见攻击技术与加密技术
- Linux网络编程(IP地址,端口,通信协议,网络字节序)
- vue3日历时间 vite + vue3 日历时间
- 小程序从开发到发部的完整流程(例:结婚请帖)
- 一起学Pandas系列基础篇---at和iat
- AUTOMATE THE BORING STUFF WITH PYTHON读书笔记 - 第6章:MANIPULATING STRINGS