## 一、搭建项目 ### 1.1 项目脚手架 > 参考[脚手架市场](http://scaffold.ant.design/#/),搜索更多好用的脚手架 #### **1. 官方脚手架 create-react-app** > create-react-app 是官方推出的一款脚手架，目录结构简单，默认不支持less，scss。如果需要在项目中使用scss，可以参考README.md的548行，其中有对加入scss的说明。 > 在不支持less,scss之类预编译工具时，其实可以使用Koala ``` |__ build //打包后文件夹 |__ node_modules |__ public //公共静态资源 |__ src //主开发目录 |__ component //组件目录 |__ static //图片，css等 |__ index.js // 入口文件 |__ package.json |__ yarn.lock |__ README.md ``` #### **2、dva-cli** >*dva 是对 redux 的一层浅封装*。 dva-cli是dva的命令行工具，用于创建一个项目。其可以快速创建一个react，redux技术栈项目 ``` # 安装 npm i -g dva-cli # 创建新应用(--demo用于创建简单的demo级项目，正常项目不加这个参数) dva new myApp --demo ``` #### **3、antd官方脚手架antd-design-pro** > antd-design-pro：开箱即用的中后台前端/设计解决方案。结合react,antd,dva的一套上手即用的脚手架 ``` # 安装集成化cli工具 npm i -g ant-design-pro-cli -g # 创建项目 mkdir pro-demo && cd pro-demo pro new ``` > NaNundefined1、在React中引入本地图片的问题 ``` # 无效 <img src='./static/imgs/img_tishi.png'/> # 有效 <img src={require('./static/imgs/img_tishi.png')} alt='tishi'/> ```