ant-design学习准备_1
在学习ant-desin过程中,发现很多知识都不清楚,从现在开始,每天将自己学习到的知识进行一个总结记录,前端大佬勿扰勿喷。先介绍几个基础概念和一些常用命令:
1、什么是脚手架
我们经常在各个博客论坛下看到脚手架这个名词,那什么是脚手架呢。看到很多前辈们的说法之后,脚手架就相当于预定义的一套模板环境,后续的项目开发可以直接应用这套环境,不用再重复的去搭建。
脚手架”是一种元编程的方法,用于构建基于数据库的应用。许多MVC框架都有运用这种思想。
程序员编写一份specification(规格说明书),来描述怎样去使用数据库;而由(脚手架的)编译器来根据这份specification生成相应的代码,进行增、删、改、查数据库的操作。我们把这种模式称为"脚手架",在脚手架上面去更高效的建造出强大的应用!
脚手架的作用.:脚手架就可以帮你减少这些 为减少重复性工作而做的重复性工作. 脚手架一个命令,目录结构、gulp脚本、babel配置、空的测试文件都帮你搞好了. 直接写核心业务代码,不做重复性工作。
2、什么是npm
npm,顾名思义:npm(node package manager)node的包管理工具。也就是在服务器上搭建了一个共享文件管理中心,可以通过npm命令直接获取文件。
npm 的发展是跟 Node.js 的发展相辅相成的。
Node.js 是由一个在德国工作的美国程序员 Ryan Dahl 写的。他写了 Node.js,但是 Node.js 缺少一个包管理器,于是他和 npm 的作者一拍即合、抱团取暖,最终 Node.js 内置了 npm。
后来的事情大家都知道,Node.js 火了。
随着 Node.js 的火爆,大家开始用 npm 来共享 JS 代码了,于是 jQuery 作者也将 jQuery 发布到 npm 了。
所以现在,你可以使用 npm install jquery 来下载 jQuery 代码。
现在用 npm 来分享代码已经成了前端的标配。
3、现在找一个脚手架地址,进行一些常用命令练习:
ant-design脚手架市场:http://scaffold.ant.design/#/;找到某款脚手架github地址:https://github.com/yezihaohao/react-admin,我们先获取代码内容,直接通过git clone获取(要使用git 必须配置安装git并配置环境变量,请自行百度git下载安装):
cmd定位到代码想放置的一个目录:(这里我放置目录为:E:\Projects\antdesign)
①执行命令:git clone --depth=1 https://github.com/yezihaohao/react-admin.git react_admin
最后的名字自己随便取,执行完之后会在当前目录下创建react_admin文件夹,代码就全部获取在了该目录下:


②、cmd执行命令:cd react_admin

③安装该脚手架的环境依赖,这里依旧通过命令行安装:
cmd 执行:npm install
(注:npm需要自行搭建环境,这里我是直接安装NodeJs,nodejs前端也是必须要学习了解的,其中集成了npm,建议直接安装nodejs即可。这里我使用的是node-v10.13.0-x64.msi)
开始获取所依赖的文件了,这里需要等待一段时间,大概几分钟时间就可以了


④依赖环境安装完了之后,可以运行起来看一下脚手架的内容了。
cmd命令:npm start
打开了一个新的cmd窗口:

可以看到在浏览器中:

⑤如果项目需要发布的话,可以打包项目:
cmd命令:npm run build

编译出来的js/css 文件应该是可以直接用于项目中了。
ant-design学习准备_1的更多相关文章
- Ant Design 的一个练习小Demo
		
Ant Design 由蚂蚁金服团队出品, 基于 React 的组件化开发模式,封装了一套丰富而实用的 UI 组件库. 在这个练习Demo 中,按照 Ant Design 官网的教程示例,尝试使用 A ...
 - 实现Ant Design 自定义表单组件
		
Ant Design 组件提供了Input,InputNumber,Radio,Select,uplod等表单组件,但实际开发中这是不能满足需求,同时我们希望可以继续使用Form提供的验证和提示等方法 ...
 - Ant Design UI组件
		
Ant Design 是面向中台的 UI 设计语言. http://ant.design/
 - Ant Design Pro+Electron+electron-builder实现React应用脱离浏览器,桌面安装运行
		
ant-design-pro ----> version :2.3.1 由于网上Ant Design Pro+Electron的资料太少,我就贡献一点经验 最近需要讲AntD Pro项目(以 ...
 - button样式篇一(ant Design React)
		
这篇来介绍button中elementUi.iview.ant中样式结构 ant Design react ant-react中button分两个文件less: mixins.less:根据butto ...
 - elementUi、iview、ant Design源码button结构篇
		
在看elementUI的button组件的时候,一起和iview.ant Design的button组件比 较功能.样式.代码结构,看他们的一些不同点,不同的写法哪种会好些,button的对外开放的功 ...
 - 使用selenium操作ant design前端的页面,感觉页面没加载完
		
因需要收集页面数据,遂准备使用selenium爬取瓦斯阅读页面, 瓦斯网站使用的是ant design,元素定位非常困难,页面元素都没有ID,现在还只是能做到操作登录,不能自动打开订阅,查询某公众号, ...
 - 使用Ant Design的select组件时placeholder不生效/不起作用的解决办法
		
先来说说使用Ant Design和Element-ui的感觉吧. 公司的项目开发中用的是vue+element-ui,使用了一通下来后,觉得element-ui虽然也有一些问题或坑,但这些小问题或坑凭 ...
 - React+Ant Design设置左侧菜单导航路由的显示与隐藏(与权限无关)
		
最近在学习react时,用到了很流行的UI框架Ant Design,也了解了一下Ant Design Pro,发现它们都有导航组件,Ant Design框架的导航菜单在这里,Ant Design Pr ...
 - Ant Design of React 框架使用总结1
		
一. 为什么要用UI 框架 统一了样式交互动画 . Ui框架会对样式,交互动画进行统一,保证了系统风格完整统一,不像拼凑起来的. 兼容性 ,不是去兼容IE 6 7 8那些低版本浏览器,而是对主流的标 ...
 
随机推荐
- sendmail启动报错
			
sendmail启动不了,报错如下: 解决方法: 在/etc/mail/sendmail.cf 配置文件中查找 Dj$w,并在此行下面增加这一行. Dj$w. 在/etc/hosts 增加一行 192 ...
 - [LuoguP3195] [HNOI2008]玩具装箱TOY
			
[HNOI2008]玩具装箱(Link) 题目描述 \(P\)教授要去看奥运,但是他舍不下他的玩具,于是他决定把所有的玩具运到北京.他使用自己的压缩器进行压缩,其可以将任意物品变成一堆,再放到一种特殊 ...
 - Linux -- 用户篇
			
Linux -- 用户与用户组 1.Linux 系统中有三种角色:所有者(用户),用户组与其他人,一张图可以说明用户与用户组的关系. 如图,某公司相当于一个用户组,该用户组下有A,B两个用户,用户拥有 ...
 - 多用户OFDM系统资源分配研究
			
首先,OFDMA 是什么? OFDM 技术的基本原理是将无线信道划分为若干互相正交的子信道,把高速串行数据流转化为低速并行子数据流,低速并行子数据流在子信道上独立传输. OFDMA 是LTE的下行多址 ...
 - 用Python代码实现微信跳一跳作弊器
			
最近随着微信版本的更新,在进入界面有个跳一跳的小游戏,在网上看到技术篇教你用Python来玩微信跳一跳 ( 转载自 " 工科给事中的技术博客 " ) 本文旨在总结,技术全靠大神完成 ...
 - Python入门 —— 04字符串解析
			
字符串 -字符串是 Python 中最常用的数据类型.(可以说是大多数语言都常用) 1. 创建字符串 ( '' 或 "" 和 '''''')(单,双和三引号)(字符串可以为空) - ...
 - 「PHP」工厂方法模式
			
引言 所属:创建型模式,常用设计模式之一 工厂模式分为:简单工厂模式.工厂方法模式.静态工厂模式.抽象工厂模式. 下面为工厂方法模式. 参考资料: <大话设计模式>程杰 模式概述 ...
 - Jquery无刷新上传单个文件
			
function ajax_photo(photo_type){ $(document).on('change','#sitephoto',function(){ ...
 - 第8章  ZooKeeper操作
			
目录 8.1 集群环境搭建 1.上传ZooKeeper安装文件 2.编写配置文件 3.拷贝ZooKeeper安装信息到其它节点 4.修改其它节点配置 5.启动ZooKeeper 6.查看启动状态 7. ...
 - Python学习 :函数
			
函数 函数(Functions) 是指可重复使用的程序片段.它们允许你为某个代码块赋予名字,允许你通过这一特殊的名字在你的程序任何地方来运行代码块,并可重复任何次数.这就是调用(Calling)函数. ...