介绍
Umi
整合常用组件、插件的前端应用框架。开箱即用,有封装好的布局可以直接应用。
官方文档:umijs.org/zh-CN/docs
AntD
丰富的组件库。
初始化环境与代码
本文以 Ubuntu 18.04 为例
初始化 Node 环境
Umi3 要求安装 NodeJS 10.13+
下载 NodeJS 压缩包:
wget https://npm.taobao.org/mirrors/node/v10.21.0/node-v10.21.0-linux-x64.tar.gz
解压到 /usr/local/lib/
目录下(或其他目录,则自行修改下面命令中的路径):
tar -zxvf node-v10.21.0-linux-x64.tar.gz -C /usr/local/lib
可能需要管理员权限,添加
sudo
软连接执行命令:
NODE_PATH=/usr/local/lib/node-v10.21.0-linux-x64/bin
BIN_PATH=/usr/local/bin
ln -s $NODE_PATH/node $BIN_PATH/node
ln -s $NODE_PATH/npm $BIN_PATH/npm
ln -s $NODE_PATH/npx $BIN_PATH/npx
可能需要管理员权限,添加
sudo
验证配置完成:
node -v
npm -v
输出版本信息表示 NodeJS 安装成功。
初始化 Umi 项目
创建并进入项目文件夹:
mkdir myapp && cd myapp
初始化 Umi 项目:
npx @umijs/create-umi-app
会在文件夹中生成 package.json
等文件,Umi 项目的依赖、启动命令等都已配置完成。
安装 node 依赖:
npm i
启动服务:
npm start
通过 http://localhost:8000
(具体端口参考实际启动后的提示) 访问项目初始页面:
安装 Umi UI
工具
Umi UI 支持在网页上为应用添加现成的模版、启停前端服务等功能。
安装:
npm i @umijs/preset-ui
修改 .umirc.ts
文件,启用 dva
与 antd
:
export default defineConfig({
... // 忽略其他配置
dva: {},
antd: {}
});
再次启动项目即可看到网页右下角出现一个图标,点开即可开始探索 Umi UI
。
使用 Umi UI 创建一个模版页面
打开 Umi UI,选择一个模版添加到项目中:
自定义配置,例如配置新页面的路由与代码文件位置:
确定后访问 http://localhost:8000/apps
即可看到这个没写一行代码创建好的页面。
接下来,修改代码来增删改对应的组件与配置即可!