每个页面可能是由一些组件组成的,对于一些相对通用的组件,建议将该组件写入components文件夹中,并在routes文件夹中的文件引入来使用。 三、疑难杂症 1、css样式的处理 Ant Design Pro 默认使用 less 作为样式语言,建议在使用前或者遇到疑问时学习一下less的相关特性。 用less 写样式好像没什么改变,只是类名比较简单(...
Ant Design Pro 是基于Ant Design的一个开箱即用的,企业级中后台前端/设计解决方案。效果: 源码地址:https://github.com/ant-design/ant-design-pro 特性: 2、快速入门 2.1、部署安装 下载地址:https://github.com/ant-design/ant-design-pro 我们使用资料中提供的,已经下载好的文件:ant-design-pro-master.zi...
调用npm create umi命令后, 自动调用git clone https://github.com/ant-design/ant-design-pro --depth=1这个git命令 。 所以我们可以直接调用git命令,而不用安装 umi。 git clone https://github.com/ant-design/ant-design-pro --depth=1 是 JavaScript模式下的仓库,typescript模式下的仓库个人不用就不去...
选择模板后,会弹出选择版本,我们选择v5(v5默认是typescript版本,也是antd pro的最新开发模式,v4可以选择javascript/typescript两种版本,如果不想用typescript方式,可以选择v4,然后再选择javascript即可。 Ant Design Pro 脚手架将会自动安装... 运行Antd Pro(Ant Design Pro,下文简称Antd Pro) 安装教授架完毕后,执行命...
ant design pro 使用融云IM实现聊天功能 介绍:前台使用vue开发的单页面,后台使用ant design pro单页面,实现手机端和后台聊天功能。 效果如图(PC+移动):一、申请融云账号(token、appKey) 建议先看教程:sdk使用介绍 过一遍教程,接下来开始写 二、引入融云IM 如图: 三、可以正常使用RongIMLib其自带方法了 IM.js ...
1. 打开ant design pro的官网文档。找到构建与部署。 有过开发经验的朋友大概都懂,一般来说,开发我们需要使用命令 npm run start / npm run dev / npm run serve 这三种其中的某一个,如果还是不对,那就要打开项目根目录下的package.json 查看 script 字段看看里面是否有修改。
【国际化 - Ant Design Pro】 不详查看官方文档的,那就跟我一步一步的往下走。我们来给我们的Home 页面菜单添加上国际化(多语言切换)。 1. 首先我们需要打开 config/config.ts 文件,我们需要配置国际化。 2. 其次,我们需要在src/locales中增加相应的 国际化key。例如: ...
ant design pro最常用有两个命令: umi dev:本地模拟开发环境,可以使用mock数据,使用的开发环境的服务器是expressumi build:打包出静态文件,使用线上服务器进行运行,如果在本地模拟线上环境,可以通过插件serve,这时候用不了mock数据的(可以安装一个本地静态服务器:npm i serve ,然后通过serve -s dist,这时候就可...
官网使用了 npm i @ant-design/pro-cli -g安装脚手架,我使用了yarn add -g @ant-design/pro-cli全局安装。安装完成可以直接在全局文件夹中看到pro和pro.cmd。 全局安装的文件夹:npm config get prefix 或 yarn config get global-folder 2.3 创建项目 ...
创建antd pro项目 先在pity同级建立pityWeb项目, 然后进入pityWeb输入如下命令, 开始等待: yarn create umi 选择ant design pro并回车 选择pro v4并回车 选择JavaScript并回车 选择simple并回车 选择ant design 4并回车 安装成功截图 安装antd pro依赖包