Umi+Landing 搭建网站首页

发表于 更新于 分类于
本文字数： 1.2k 阅读时长 ≈ 1 分钟

本文将使用Umi 3.x和Landing搭建网站首页。

文档地址：

0. 配置Umi

0.0 安装node.js保证其版本 ≥ 10.13

下载地址：https://nodejs.org/zh-cn/download/releases/

注意：建议不要安装过新的node.js，可能会出现未知问题。

0.1 使用yarn管理npm依赖

1
2
$ npm i yarn tyarn -g
$ tyarn -v

为了保证速度这里使用的是国内源，在运行yarn相关指令时需将yarn替换为tyarn

例如：

✖️ yarn create @umijs/umi-app

✔ tyarn create @umijs/umi-app

0.2 新建空目录并切换到该目录

1
$ mkdir myapp && cd myapp

0.3 通过官方工具创建项目

1
$ tyarn create @umijs/umi-app

0.4 安装依赖

1
$ tyarn

0.5 启动项目

1
$ tyarn start

启动项目

如果出现上述界面代表Umi配置完成。

1. 配置Landing

1.0 在Landing页面下载相关模板

1.0.0 打开页面并下翻

模板网站：https://landing.ant.design/index-cn

1.0.1 点击编辑

网站模板

1.0.2 下载代码

下载代码

1.0.3 下载的文件为文件名为Home的压缩文件，解压之后预留备用

1.1 本地配置Landing模板

1.1.0 创建一个空文件目录，并在文件目录中创建src文件夹

1
2
main
│── src

1.1.1 安装全局Umi

1
2
$ tyarn global add umi
$ umi -v
  • yarn global add umi：安装全局umi
  • umi -v：查看umi版本

疑难解答：

如果出现’umi’ 不是内部或外部命令，也不是可运行的程序或批处理文件，是因为环境变量出现问题。

解决方案：

在终端中输入tyarn global bin获取bin目录，把获取到的global bin添加到系统环境变量PATH中。

获取bin目录

  • 添加环境变量：右键此电脑 -> 单击属性 -> 单击 高级系统设置 -> 单击环境变量 -> 双击 系统变量 中的 Path -> 新建 -> 将复制的环境变量 粘贴 -> 确定
  • 备注：如果设置完成之后vscode等编译器仍然报错，可以尝试重启。

1.1.2 使用Umi初始化index页面

1
$ umi generate page index

1.1.3 将下载的Home包粘贴至src目录中

1
2
3
4
5
6
7
8
9
main
│── src
│ │── Home 
│    │── less
│    │── index.js
│    └── ...
│ └── pages     
│    │── index.js
│    │── index.less

1.1.4 安装react和react-dom

1
2
$ npm init -y
$ npm install react react-dom --save

如果在vscode终端中使用npm报权限错误可以先使用在管理员权限打开的cmd中重新执行指令，如果还是无法解决可以安装cnpm用cnpm指令尝试解决。

疑难解答：

npm错误

解决方案：

在终端中输入npm init -y初始化目录。

1.1.5 安装必要组件依赖

1
$ npm install antd enquire-js rc-queue-anim rc-scroll-anim rc-tween-one --save

如果用的是多屏滑动型的 banner，加上这条:

1
$ npm install rc-banner-anim --save

如果使用了 Content7 模块，请加上这条:

1
$ npm install @ant-design/compatible --save

1.1.6 安装插件

1
2
$ npm i @umijs/preset-react --save-dev
$ npm i umi --save

1.1.7 修改入口文件

更改刚才创建的index页面，打开index.js，引入Home包并渲染。

1
2
3
4
5
6
7
8
9
10
11
- import styles from './index.css';
+ import Home from '../Home';

export default function() {
  return (
-   <div className={styles.normal}>
-     <h1>Page index</h1>
-   </div>
+   <Home />
  );
}

1.1.8 本地运行项目

1
$ umi dev