本文将使用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 安装依赖
0.5 启动项目
如果出现上述界面代表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.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
中。
- 添加环境变量:右键
此电脑
-> 单击属性
-> 单击 高级系统设置
-> 单击环境变量
-> 双击 系统变量
中的 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 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 本地运行项目