react整合Ant Design Landing[首页模板集]
- 安装nodejs
- 安装create-react-app
- 实用create-react-app 初始化
- create-react-app demo
- 进入目录并启动 cd demo & npm start
- 页面访问
- 下载设计后下载文档
- [设计编辑页面Ant Design Landing入口](https://landing.ant.design/edit/)
- 下载后的文档Home.zip目录和整合进demo项目
- 安装依赖
- 基本必要组件依赖
- less 加载
- 安装依赖
- 配置加载 less
- 创建 config-overrides.js
- 修改入口文件
- 完成
- 常见错误
- 错误一：Error: Cannot find module 'babel-plugin-import' from 'E:\AllWorkspace\react\demo'
- 错误二：options has an unknown property 'modifyVars'. These properties are valid:
安装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.jsE:\AllWorkspace\react>cd demo
E:\AllWorkspace\react\uml-test>npm start
> uml-test@0.1.0 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:///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
> uml-test@0.1.0 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 (<anonymous>)原因：没有安装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' },
}
}),
);
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
