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那些低版本浏览器,而是对主流的标 ...
随机推荐
- MyBatis动态sql语句归纳
1.删除数据(假删除)并修改时间 <!--根据id删除学生信息(多条)--> <update id="updateStuStatus" parameterType ...
- sqoop 1.99.7 安装及配置
一 下载sqoop 1.99.7 http://mirror.bit.edu.cn/apache/sqoop/1.99.7/ 二 解压安装文件 三 配置Sqoop 环境变量 最后把mysql的驱动j ...
- HashMap和Hashtable的详细区别
1.Hashtable是线程安全,HashMap是非线程安全 HashMap的性能会高于Hashtable,我们平时使用时若无特殊需求建议使用HashMap,在多线程环境下若使用HashMap需要使用 ...
- [LuoguP2900] [USACO08MAR]土地征用(Land Acquisition)
土地征用 (Link) 约翰准备扩大他的农场,眼前他正在考虑购买N块长方形的土地.如果约翰单买一块土 地,价格就是土地的面积.但他可以选择并购一组土地,并购的价格为这些土地中最大的长 乘以最大的宽.比 ...
- java soa接口测试,可以使用http协议调用
post调用url:“接口url”+/rpc post调用参数body: { "ver": "接口版本号", "soa":{"re ...
- HDU 2897 邂逅明下 ( bash 博弈变形
HDU 2897 邂逅明下 ( bash 博弈变形 题目大意 有三个数字n,p,q,表示一堆硬币一共有n枚,从这个硬币堆里取硬币,一次最少取p枚,最多q枚,如果剩下少于p枚就要一次取完.两人轮流取,直 ...
- localtunnel内网服务器暴露至公网
摘自@scarlex 1.安装 npm install -g localtunnel 2.运行 lt --port 8080 (your url is: http://xxxx.localtun ...
- C# 5.0中使用CallerMemberName、CallerFilePath和CallerLineNumber获取代码的调用方信息(转载)
很多时候,我们需要在运行过程中记录一些调测的日志信息,如下所示: public void DoProcessing() { TraceMessage("DoProcessing()被XXX调 ...
- react系列(五)在React中使用Redux
上一篇展示了Redux的基本使用,可以看到Redux非常简单易用,不限于React,也可以在Angular.Vue等框架中使用,只要需要Redux的设计思想的地方,就可以使用它. 这篇主要讲解在Rea ...
- 初学pygame
#Author:cljimport pygamepygame.display.set_mode((640,480),0,32)#设置窗口大小 返回的也是一个surface对象,resolution可以 ...