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那些低版本浏览器,而是对主流的标 ...
随机推荐
- SpringBoot初始教程之Servlet、Filter、Listener配置(七)
1.介绍 通过之前的文章来看,SpringBoot涵盖了很多配置,但是往往一些配置是采用原生的Servlet进行的,但是在SpringBoot中不需要配置web.xml的 因为有可能打包之后是一个ja ...
- jpa多条件查询
首先继承JpaSpecificationExecutor<T>接口 需要用到JpaSpecificationExecutor<T>中的Page<T> findAll ...
- 内存修改之IOS版ce
开源工具,算法全部在内存中完成,速度比bmsq,igg快,直接搜索0也是无压力.使用c++编写,有一定的扩展能力,可以自己扩展value type和comparator. 项目地址: https:// ...
- java 编写小工具 尝试 学习(四)
1.在新建 的窗口上 ,添加了一个按钮后 ,给 按钮添加一个事件 ,意思就是 点击按钮后 发生什么事情!不废话 贴图 贴 代码! package jFrameDemo; import java.aw ...
- Oracle创建序列,Oracle创建序列语法
-- Oracle创建序列 Create sequence CREATE SEQUENCE SEQ_SINGER -- 序列名称 START WITH 2 -- 开始数字 MAXVALUE 999 ...
- Oracle常用内置函数
转换函数 to_char(d|n,fmt):把日期和数字转换为指定格式的字符串: to_number(x,fmt):把一个字符串转换为一个指定格式的数字: 判空函数 nvl(x,value):如果 ...
- Cocopods Search失败的坑
最近看了下如何使用cocopods来制作自己的公有库,然后果断的按照教程做了一遍,然后提交审核.完成之后意外的发现使用pod search xxx的时候报了一大堆的日志出来,pod的其他功能可以使用, ...
- python学习——面对对象进阶
一.isinstance和issubclass isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo: pass a = Foo() print(isins ...
- JAVA基础 - 自定义异常类
自定义异常类,代码还不是很明白,先存着以后参考. package week6; class ScoreException extends Exception { private static fina ...
- python 查找元素 获取元素信息 元素交互操作 执行JavaScript
from selenium import webdriver browser = webdriver.Firefox() browser.get("https://tieba.baidu.c ...