好看的产品首页设计工具 ant-design-pro-landing-page 如何部署

现代的前端框架越来越复杂，一时半会儿没看懂怎么部署阿里的react 框架的ant-design-pro-landing模板，摸索了一会儿，把过程记录下来

安装 node.js

• 从官网下载，安装后配置下环境变量

安装create-react-app

先安装 yarn

    npm install -g yarn

安装后查询yarn版本，正常表示安装成功

    yarn --version

配置yarn源为淘宝的源，速度快一些

    yarn config set registry https://registry.npm.taobao.org -g 
    yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
```shell
### 创建项目
```shell
    $ yarn create react-app antd-demo

引入 antd

    yarn add antd

• 修改 src/App.js，引入 antd 的按钮组件。

    import React from 'react';
    import { Button } from 'antd';
    import './App.css';
    
    const App = () => (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
    
    export default App;

• 修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

    @import '~antd/dist/antd.css';

部署项目

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

安装依赖

基本必要组件依赖

npm install antd enquire-js rc-queue-anim rc-scroll-anim rc-tween-one --save;
npm install rc-banner-anim --save;// 如果用的是多屏滑动型的 banner，加上这条;
npm install @ant-design/compatible --save;// 如果使用了 Content7 模块，请加上这条;

按需加载 ant design

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

配置 html scale

为更好的响应无线端的使用，Landing 需要你在你的 html 文件的 head 里配置以下代码：

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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 用于修改默认配置。

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 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 上下载的模板。