ant design pro 新增頁(yè)面

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

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

ant design pro 新增頁(yè)面

ps:參考資料
1.ant design pro

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

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

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

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

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

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

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

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

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

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

2.將剛剛寫(xiě)的組件注冊(cè)到路由里面，修改 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:"新頁(yè)面",
    icon: "table",
    path:"newPage",
  },

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

src/common/menu.js

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94614.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

zhunjiee 2019-08-23 15:44 評(píng)論0 收藏0