react配置 less antd

react配置 less antd

一、react脚手架安装

1. 全局安装

npm install -g create-react-app

1. 创建react app

create-react-app 项目名称

二、安装 yarn

npm install -g yarn

yarn使用:

• yarn init
• yarn add
• yarn remove
• yarn install

react生命周期

getDefaultProps 
getInitialState 
componentWillMount 
render
componentDidMount
componentReceiveProps 
shouldComponentUpdate
componentWilUpdate
componentDidUpdate
componentWilUnmount

三、安装所需插件

• 安装React-Router 、Axios、less-loader

yarn add react-router-dom axios less less-loader

• 配置less

  • 暴露webpack

  • yarn eject

  • 修改config目录下的webpack.config.dev.js和webpack.config.prod.js文件

  • 

  • 快速定位:查找这两个文件的use数组,在数组里面添加添加,

  • //上面的css改为
    test: /\.(css|less)$/,
    
    //use数组后面添加
    {
        loader: require.resolve('less-loader'),
        //antd主题设置
        options: {
            modules:false,
            modifyVars:{
            "@primary-color":"#f9c700"
            }
         }
    }

    在use数组上面css改为

    test: /\.(css|less)$/,

    webpack.config.dev.js和webpack.config.prod.js两个文件的配置一样

四、安装antd

yarn add antd

安装babel插件

yarn add babel-plugin-import --dev

按需加载antd组件,快速定位: 查找limit或10000,在下面的options对象添加

plugins:[
          ['import',[{libraryName:'antd',style:true}]]
        ],
        //因为要修改源码样式,这里的style配置为true

webpack.config.prod.js修改

可能会报错

• 降低less版本

yarn add less@^2.7.3

yarn add moment --save

安装jsonp

yarn add jsonp --save

遇到的坑

• 状态吗不能用全等
• 表格必须有一个key值,通过map循环获取

data.map((item,index)=>{
  item.key=index
})

申请百度地图key

http://lbsyun.baidu.com/

地图实现步骤

• 创建ak，加载百度地图SDK

• 地图初始化

  • public文件夹中index.html头部引入

  •  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Gs85rFwmAsGUDGoe4GUkhrKl6FpPqbTM"></script>

• 添加地图控件

• 绘制用户行驶路线

• 绘制服务区地图

项目工程化