ant design pro 新增頁面

asoren 發(fā)布于2019-08-22 16:44 / 3318人閱讀

摘要：新增頁面參考資料由于版本升級到所以重新做了一個分享，下面是目錄地址一項目初始化二新增頁面三設(shè)置代理四與服務(wù)端交互在下面的任意一個文件夾下面創(chuàng)建一個頁面填寫如下內(nèi)容內(nèi)容這是新頁面內(nèi)容將剛剛寫的組件注冊到路由里面，修改文件內(nèi)容內(nèi)容新頁面添加后的

ant design pro 新增頁面

ps:參考資料
1.ant design pro

2.由于pro版本升級到2.0,所以重新做了一個分享，下面是目錄地址

Ant Desing Pro2.0(一)項目初始化

Ant Desing Pro2.0(二)新增頁面

Ant Desing Pro2.0(三)設(shè)置代理

Ant Desing Pro2.0(四)與服務(wù)端交互

1.在 src/routes/ 下面的任意一個文件夾下面創(chuàng)建一個頁面

// 填寫如下內(nèi)容

/** NewPage.js內(nèi)容 */
import React, { Component } from "react";

export default class NewPage extends Component {
  render() {
    return (
      
        這是新頁面
      
    )
  }
}

/** NewPage.less內(nèi)容 */
@import "~antd/lib/style/themes/default.less";

2.將剛剛寫的組件注冊到路由里面，修改 src/common/router.js文件

/** src/common/router.js內(nèi)容 */
 "/newPage":{
      component:dynamicWrapper(app,["monitor"],()=> import("../routes/User/NewPage")),
  },


/** src/common/menu.js內(nèi)容*/
  {
    name:"新頁面",
    icon: "table",
    path:"newPage",
  },

添加后的效果
src/common/router.js

src/common/menu.js

3.運(yùn)行結(jié)果

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94614.html

相關(guān)文章

Ant Desing Pro2.0(二)新增頁面

摘要：配置路由在行新增如下內(nèi)容這行是新增的內(nèi)容做完如上步驟其實(shí)功能是完成了，但是版本中加入了菜單國際化中。所以你剛剛的頁面如下這不是我們想要的效果，讓我在進(jìn)行修改修改在行新增如下內(nèi)容新增菜單新增頁面查看效果運(yùn)行效果讓我做一道連線題把 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant Desing...

vboy1010 2019-08-23 15:41 評論0 收藏0
Ant Desing Pro2.0(一)項目初始化

摘要：寫在前面最近做畢設(shè)的時候發(fā)現(xiàn)網(wǎng)絡(luò)上關(guān)于版本的基礎(chǔ)入門資料太少，我一個后端開發(fā)人員當(dāng)時入門也是跌跌撞撞，現(xiàn)在我將我所學(xué)的分享出來，避免大家少走一些彎路。 1.寫在前面最近做畢設(shè)的時候發(fā)現(xiàn)網(wǎng)絡(luò)上關(guān)于ant designpro2.0版本的基礎(chǔ)入門資料太少，我一個后端開發(fā)人員當(dāng)時入門也是跌跌撞撞，現(xiàn)在我將我所學(xué)的分享出來，避免大家少走一些彎路。 2.開發(fā)環(huán)境你的本地環(huán)境需要安裝 node ...

BigNerdCoding 2019-08-23 15:41 評論0 收藏0
Ant Desing Pro2.0(三)設(shè)置代理

摘要：參考資料參考參考目錄地址一項目初始化二新增頁面三設(shè)置代理四與服務(wù)端交互修改文件在將行和行的注釋打開代理前綴，請求格式資源地址將所有以開頭的所有路由都代理到目標(biāo)地址代理目標(biāo)地址是否跨域訪問最終請求時候忽略掉舉個例子吧有個接口請求之后會返回 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant D...

Lycheeee 2019-08-23 15:42 評論0 收藏0
Ant Design Pro - 實(shí)踐React Hooks - 頁面

摘要：背景目前是社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項目中實(shí)踐一下技術(shù)。我們的項目使用的腳手架是，初步想法是把現(xiàn)有的一個有狀態(tài)頁面組件重構(gòu)成函數(shù)組件。存放表單值的狀態(tài)是聲明在列表組件，傳給表單組件。背景 React Hooks目前是React社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項目中實(shí)踐一下Hooks技術(shù)。我們的項目使用的腳手架是Ant Design P...

wangbjun 2019-08-26 10:30 評論0 收藏0
Ant Desing Pro2.0(四)與服務(wù)端交互

摘要：創(chuàng)建在新建文件填入以下代碼導(dǎo)入接口文件，并采用解構(gòu)的方式，將的文件里面的賦值給這里的是儲存數(shù)據(jù)的地方，收到以后，會更新數(shù)據(jù)。我的理解其實(shí)是支付寶的框架傳送門 1.參考資料參考ant design pro 參考DvaJs 2.目錄地址 Ant Desing Pro2.0(一)項目初始化 Ant Desing Pro2.0(二)新增頁面 Ant Desing Pro2.0(三)...

zhunjiee 2019-08-23 15:44 評論0 收藏0