Welcome everyone

Ant Design 和 脚手架

前端 汪明鑫 582浏览 0评论

Ant Design

Ant Design是蚂蚁金服推出来的基于React的组件库,有些常用组件不用再重复编写,可以使用Ant Design。
非常强大!

Ant Design的官网

 

提供了各种React组件

脚手架

简单来说,脚手架是一个能够帮我们快速搭建一个空项目的工具。

现在的前端应用大多基于webpack + ES6 + Vue 或 webpack + ES6 + React

而脚手架能帮我们快速搭建这样的一个项目,生成很多需要的配置文件,主页面,入口js文件等,方便了我们的开发,大大提升了前端应用的开发效率。

 

 

No Picture Say JB

上图来直观感受下脚手架

就好比工人用的一些梯子或辅助工具,帮助完成工程。

 

脚手架应用在React项目中:

 

创建项目并启动

 

1,npm install -g create-react-app    //需要安装这个包

 

,2,create-react-app  hello                 //使用脚手架创建项目,项目名为hello
3,cd hello                                         //进入工程目录
4,npm start                                      //启动,会自动弹出页面

 

自动弹出页面:

 

 

脚手架生成的项目结构:

 

所有的依赖都在这里

 

 

webpack的配置在这里

 

而build对应的是这个命令

 

npm run build是干嘛的呢?

 

我们先看看下stackoverflow上的一个问题,和一些解答。

 

然后看下facebook在github上的官方解释:

 

 

“start”: “react-scripts start”,这句话的意思就是当运行npm start 的时候去调用node_modules下的react-scripts 中的start.js文件
“build”: “react-scripts build”,这个命令的意思也是一样的同上,调用了build.js
注意:npm start不用加run但build的使用必须是npm run build

 

我们来实际操作下

 

项目生成了一个build的目录

 

我们来访问这个index.html,发现访问的内容为空,显示不了应用组件

 

那我们就用下,看干啥的

 

我们再来访问提示的路径,访问成功!

 

serve   -s build  意思是本地起一个server

转载请注明:汪明鑫的个人博客 » Ant Design 和 脚手架

喜欢 (1)

说点什么

您将是第一位评论人!

提醒
avatar
wpDiscuz