如何搭建反应+蚂蚁设计开发环境 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要介绍如何搭建反应+蚂蚁设计开发环境,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

基础知识

1。使用脚手架创建项目并启动

1.1安装脚手架:

npm install -g create-react-app

1.2使用脚手架创建项目:

create-react-app antd-start-demo

antd-start-demo为项目名。

1.3启动

npm 开始

2. npm转换为纱

2.1安装纱:

npm install -g 纱线

2.2获取纱当前的镜像源:

yarn config get 注册

2.3设置为淘宝镜像:

yarn config set registry & # 39; https://registry.npm.taobao.org& # 39;

2.4常用命令:

yarn init ,,,,初始化　　yarn add ,,,,添加模块　　yarn remove ,,,删除模块　　yarn /yarn install ,,,安装项目中的依赖

项目搭建

2.1安装react-router 4.0, axios, less-loader

yarn add react-router-dom axios less-loader

2.2暴漏webpack配置

yarn 弹射

提示:如果运行纱逐出报错

如何搭建反应+蚂蚁设计开发环境”> 在我们修改了文件之后,在使用纱逐出命令时,会报以上错误,这是因为我们使用脚手架创建项目时,自动增加了.gitignore文件,而我们本地却没有仓库,这时候只需执行以下命令把项目添加到我们本地仓库,在执行即可。 解决办法: <pre类= git add 。　　git commit -m & # 39; init # 39; 　　yarn 弹射

然后运行纱弹射就可以了

如何搭建反应+蚂蚁设计开发环境”> webpack配置 2.3配置less-loader antd是基于少开发的,我们使用可少以方便的改变主题色等配置。 安少装模块:<代码>纱添加less@2.7.3 </代码> 打开配置/webpack.config.dev.js添加如下配置: <pre类= { 　　,,,,,测试:,/\ .less/美元, 　　,,,,,使用:,( 　　,,,,,,require.resolve (& # 39; style-loader& # 39;), 　　,,,,,,{ 　　,,,,,,,装载机:,require.resolve (& # 39; css-loader& # 39;), 　　,,,,,,,选择:,{,importLoaders: 1,}, 　　,,,,,,}, 　　,,,,,,{ 　　,,,,,,,//,Options for PostCSS as 参考文档我方表示歉意these Options 两次　　,,,,,,,//,Adds vendor prefixing based 提醒your specified browser support 在　　,,,,,,,//package.json 　　,,,,,,,装载机:,require.resolve (& # 39; postcss-loader& # 39;), 　　,,,,,,,选择:,{ 　　,,,,,,,,//,Necessary for external CSS imports 用工作　　,,,,,,,,//https://github.com/facebook/create-react-app/issues/2677 　　,,,,,,,,鉴别:,& # 39;postcss& # 39; 　　,,,,,,,,插件:,(),=祝辞,( 　　,,,,,,,,,需要(& # 39;postcss-flexbugs-fixes& # 39;), 　　,,,,,,,,,需要(& # 39;postcss-preset-env& # 39;) ({ 　　,,,,,,,,,,autoprefixer:, { 　　,,,,,,,,,,,flexbox:, & # 39;没有- 2009 & # 39; 　　,,,,,,,,,,}, 　　,,,,,,,,,,阶段:,3, 　　,,,,,,,,,}), 　　,,,,,,,,, 　　,,,,,,,}, 　　,,,,,,}, 　　,,,,,,{,装载机:require.resolve (& # 39; less-loader& # 39;),} 　　,,,,,, 　　},

到配置cssload同级如图所示

如何搭建反应+蚂蚁设计开发环境

图片示例
注意:在webpack.config.dev.js添加的配置部分,也需要在webpack.config.prod.js中做相同的配置。否则可能导致项目发布上线后,报错无法执行。

2.4安装antd

yarn add antd

2.5测试使用

import {, Button },得到“antd"; 　　import & # 39; antd/dist/antd.css& # 39;; 　　　　… 　　,使(){ 　　return 才能; 　　,,& lt; div> 　　,,,,& lt; Button> click 　　,,& lt;/div> 　　,,); 　　,} 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null