You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
# 新建一个空的文件夹作为项目目录,并在目录下执行:
yarn create umi
# 选择`ant-design-pro`
Select the boilerplate type (Use arrow keys)
❯ ant-design-pro - Create project with an layout-only ant-design-pro boilerplate, use together with umi block.
app - Create project with a simple boilerplate, support typescript.
block - Create a umi block.
library - Create a library with umi.
plugin - Create a umi plugin.
// config/proxy.ts/** * 在生产环境 代理是无法生效的,所以这里没有生产环境的配置 * The agent cannot take effect in the production environment * so there is no configuration of the production environment * For details, please see * https://pro.ant.design/docs/deploy */exportdefault{dev: {'/api/': {target: 'http://***.**.***.**',changeOrigin: true,pathRewrite: {'^': ''},},},};
这里要说的是ant design的
vue
版和react
版本的使用。这里不考虑到两种框架vue
和react
的底层。vue ant design 项目
这是一个测试平台的项目。
因为使用的是整套的框架,那么我们按照vue ant design流程走一波。
推荐使用
yarn
进行安装~之后我们就直接在
main.js
文件中全局引入使用
axios
操作接口。我们可以根据实际情况进行处理:那么我们来考虑下对接口的管理:
# api目录 - api - basic_config - device.js - ... - index.js
上面是api的基本管理的目录,这里呈现
device.js
和index.js入口
文件。接下来我们在原型上挂载接口:
之后,调整下要代理地址:
完成上面的配置和修改后,那么我们可以搬砖了...
以刚才配置的
bc_device
接口为例:可以愉快地在搭建好的框架里面添加东西了。
react ant design 项目
使用
react ant design
开发的项目是一个信息配置后台系统。这里直接使用Ant Design Pro开发的。
这里的安装方法根据官网执行:
我这里结合了
typescript
来开发,推荐使用。我们使用集成的
umi-request
处理接口请求:
在执行api请求操作之前,我们配置下代理~
那么我们来实现下分配端口的列表数据请求:
好了,可以安静地打代码了。
后话
嗯~
根据实际情况增加功能,比如图表展示你要选啥实现:echart, bizchart...等等
在使用
vue
和react
版本的ant design
开发后台系统,自己还是比较偏向使用react ant design
来开发,当然,这是根据团队和业务实际情况来选择。对了,typescript
真的挺好用的,都2020年了,可以考虑在项目中引入使用。The text was updated successfully, but these errors were encountered: