# helloLanding

**Repository Path**: hammercui/helloLanding

## Basic Information

- **Project Name**: helloLanding
- **Description**: 使用antd-landing实现官网主页的教程
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-12-06
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Antd-Landing的使用说明

>[antd-ladning](https://landing.ant.design/index-cn),是一套遵循了antd设计美学的首页解决方案，基于react实现

## 流程

1.打开ide[编辑页面](https://landing.ant.design/edit/#uid=5bfcdfd344d904005f1f17a1),进行页面设计

2.点击下载图标，下载页面jsx相关的压缩包。

3.新建文件夹myApp，进入myApp执行`yarn create umi`生成umi工程。解压缩导入umi生成的工程中。

4 目录如下
```
myApp/
	src/
		Home/
		pages/
			index
		global.less
	
```

## FAQ

#### 1 启动项目样式不可用

原因：umi默认是开启了css module，而自动生成的页面less没有使用css modul,因此解决方案如下：


方案1： 禁用css module:
```
export default {
  disableCSSModules: true, //禁用css module
  plugins: [
    // ref: https://umijs.org/plugin/umi-plugin-react.html
    ['umi-plugin-react', {
      antd: true,
      dva: false,
      dynamicImport: false,
      title: 'helloLanding',
      dll: false,
      routes: {
        exclude: [],
      },
      hardSource: false,
    }],
  ],
}

```

方案2：使用css module

1.在`global.less`引入`antMotionStyle.less`,`@import './Home/less/antMotionStyle.less';
`

2.同时`antMotionStyle.less`增加global标识

```
:global {
  @import './common.less';
  @import './custom.less';
  @import './content.less';
  @import './nav0.less';
  @import './banner0.less';
  @import './content0.less';
  @import './content1.less';
  @import './content3.less';
  @import './footer0.less';
  @import './edit.less';
}

```
考虑官网项目，不需要手动编写很多代码，建议暂时关闭css module

#### 2 输出多页面
配置文件增加，如果是多页面，就不能使用hash模式的history，使用系统默认的browerHistory

```
// history: 'hash', //当开启static时这个就不能开启了
  exportStatic:true
```

#### 3 按需加载

需要配置在插件`umi-plugin-react`里，即提供一个页面加载之前的进度条

```
	//实现路由级的动态加载（code splitting），可按需指定哪一级的按需加载。
	dynamicImport: {
					webpackChunkName: true, //是否通过 webpackChunkName 实现有意义的异步文件名
					loadingComponent: './components/PageLoading/index'
	}
```

推荐使用`nprogress`进度条，来替换PageLoading，当页面一部加载时，起到占位作用