从零开始创建一个React(Umi+AntD)项目 |
您所在的位置:网站首页 › 安装umi › 从零开始创建一个React(Umi+AntD)项目 |
介绍
Umi
整合常用组件、插件的前端应用框架。开箱即用,有封装好的布局可以直接应用。 官方文档:umijs.org/zh-CN/docs AntD丰富的组件库。 官方文档:ant.design/docs/react/… 初始化环境与代码本文以 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 支持在网页上为应用添加现成的模版、启停前端服务等功能。 安装: npm i @umijs/preset-ui 复制代码修改 .umirc.ts 文件,启用 dva 与 antd: export default defineConfig({ ... // 忽略其他配置 dva: {}, antd: {} }); 复制代码再次启动项目即可看到网页右下角出现一个图标,点开即可开始探索 Umi UI。 打开 Umi UI,选择一个模版添加到项目中: 自定义配置,例如配置新页面的路由与代码文件位置: 确定后访问 http://localhost:8000/apps 即可看到这个没写一行代码创建好的页面。 接下来,修改代码来增删改对应的组件与配置即可! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |