react整合Ant Design Landing[首页模板集]

安装nodejs

请自行百度

安装create-react-app

请自行百度

实用create-react-app 初始化

create-react-app demo

E:\AllWorkspace\react>create-react-app demo

Creating a new React app in E:\AllWorkspace\react\demo.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

removed 1 package in 8.364s

Created git commit.

Success! Created uml-test at E:\AllWorkspace\react\demo
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd demo
  npm start

Happy hacking!

进入目录并启动 cd demo & npm start

安装完成后，目录结构:

├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
│── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js

E:\AllWorkspace\react>cd demo

E:\AllWorkspace\react\uml-test>npm start

> [email protected] start E:\AllWorkspace\react\demo
> react-scripts start

i ｢wds｣: Project is running at http://192.168.31.27/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from E:\AllWorkspace\react\demo\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Compiled successfully!

You can now view uml-test in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.31.27:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

页面访问

下载设计后下载文档

设计编辑页面Ant Design Landing入口

下载后的文档Home.zip目录和整合进demo项目

我们直接将从 Landing 上下载的 Ho##me 文件夹直接拷贝到 src 文件包里;

├── README.md
├── ...
├── public
│   ├── ...
│── src
+   ├── Home
+   │    ├── less
+   │    ├── index.js
+   │    ├── ...
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js

安装依赖

我们依赖 ant design 的相关组件，动效依赖 ant motion 里相关动效组件，具体查看以下：

基本必要组件依赖

npm install antd enquire-js rc-queue-anim rc-scroll-anim rc-tween-one --save
npm install rc-banner-anim --save
npm install @ant-design/compatible --save
npm install babel-plugin-import --save-dev

• npm install rc-banner-anim --save;// 如果用的是多屏滑动型的 banner，加上这条;
• npm install @ant-design/compatible --save;// 如果使用了 Content7 模块，请加上这条;
• npm install babel-plugin-import --save-dev; //按需加载 ant design ;umi 或 ant design pro 无需安装此项;

less 加载

安装依赖

npm install react-app-rewired customize-cra less less-loader

配置加载 less

安装完 less 加载 后， 我们还需要修改 package.json 里的启动配置。

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}

创建 config-overrides.js

然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。

├── README.md
├── node_modules
├── package.json
├── .gitignore
+── config-overrides.js
├── public
│   ├── ...
│── src
│   ├── Home
│   └── ...

config-overrides.js文件配置如下：

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  // 按需加载 antd
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  // 添加加载 less 的 javascriptEnabled 和 antd 的主题配置。
  addLessLoader({
  	lessOptions: {
    	javascriptEnabled: true,
    	modifyVars: { '@primary-color': '#1DA57A' },
    }
  }),
);

修改入口文件

更改的 src 里的 index.js 页面，打开 index.js，引入 Home 文件包并渲染。

• import App from ‘./App’; 改成 + import App from ‘./Home’;

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
//- import App from './App';
import App from './Home';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

完成

完成以上步骤之后，我们再启动 npm start 即可查看在 landing 上下载的模板。

常见错误

错误一：Error: Cannot find module ‘babel-plugin-import’ from ‘E:\AllWorkspace\react\demo’

E:\AllWorkspace\react\uml-test>npm start

> [email protected] start E:\AllWorkspace\react\uml-test
> react-app-rewired start

i ｢wds｣: Project is running at http://192.168.31.27/
i ｢wds｣: webpack output is served from
i ｢wds｣: Content not from webpack is served from E:\AllWorkspace\react\uml-test\public
i ｢wds｣: 404s will fallback to /
Starting the development server...
Failed to compile.

./src/index.js
Error: Cannot find module 'babel-plugin-import' from 'E:\AllWorkspace\react\uml-test'
    at Array.map ()

原因：没有安装less依赖
解决：安装less依赖即可

npm install babel-plugin-import --save-dev

错误二：options has an unknown property ‘modifyVars’. These properties are valid:

原因：主要是babel-plugin-import插件版本差异导致，新版本需要增加 官网之外的东西，增加配置文件 lessOptions: {}

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  // 按需加载 antd
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  // 添加加载 less 的 javascriptEnabled 和 antd 的主题配置。
  addLessLoader({
  	lessOptions: {
    	javascriptEnabled: true,
    	modifyVars: { '@primary-color': '#1DA57A' },
    }
  }),
);