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

vboy1010 發(fā)布于2019-08-23 15:41 / 1885人閱讀

摘要：配置路由在行新增如下內容這行是新增的內容做完如上步驟其實功能是完成了，但是版本中加入了菜單國際化中。所以你剛剛的頁面如下這不是我們想要的效果，讓我在進行修改修改在行新增如下內容新增菜單新增頁面查看效果運行效果讓我做一道連線題把

1.參考資料

參考ant design pro

參考DvaJs

2.目錄地址

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

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

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

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

1.新增頁面

1.1 在src->pages->『新建文件夾』NewPage->『新建js文件』NewPage.js 和 『新建less文件』NewPage.less

1.2填入如下代碼

// 這是NewPage.js內容
import React, { PureComponent } from "react";
//面包屑
import PageHeaderWrapper from "@/components/PageHeaderWrapper";
// 引入less
import styles from "./NewPage.less";

class NewPage extends PureComponent {
  render() {
    return (
      
        
          HELLO WORD!
        
      
    );
  }
}

export default NewPage;

// 這是NewPage.less內容
//樣式文件默認使用 CSS Modules，如果需要，你可以在樣式文件的頭部引入 antd 樣式變量文件：
//這樣可以很方便地獲取 antd 樣式變量并在你的文件里使用，有利于保持頁面的一致性，也方便實現定制主題。
@import "~antd/lib/style/themes/default.less";

2.配置路由

2.1 在config->router.config.js->『47行新增如下內容』

  // 這行是新增的內容
  {
    path: "/newPage",
    icon: "file",
    name: "newPage",
    routes: [
      {
        path: "/newPage/newPage",
        name: "newPage",
        component: "./NewPage/NewPage"
      }
    ],
  },
  ![clipboard.png](/img/bVbppqB)

2.2 做完如上步驟其實功能是完成了，但是pro 2.x版本中加入了菜單國際化中。所以你剛剛的頁面如下

這不是我們想要的效果，讓我在進行修改修改
在src->locales->zh-CN->menu.js->『11行新增如下內容』

"menu.newPage": "新增菜單",
"menu.newPage.newPage": "新增頁面",

3.查看效果

3.1運行效果

3.2讓我做一道連線題把

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

轉載請注明本文地址：http://systransis.cn/yun/102437.html

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

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

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

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

Lycheeee 2019-08-23 15:42 評論0 收藏0
ant design pro 新增頁面

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

asoren 2019-08-22 16:44 評論0 收藏0
Ant Desing Pro2.0(四)與服務端交互

摘要：創(chuàng)建在新建文件填入以下代碼導入接口文件，并采用解構的方式，將的文件里面的賦值給這里的是儲存數據的地方，收到以后，會更新數據。我的理解其實是支付寶的框架傳送門 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
Ant Design Pro用小烏龜版的git提交時報錯

摘要：提交報錯描述剛下載好的修改后，準備提交發(fā)現報如下錯誤，原因是引用做和腳本做和的語法糾正。 1.Ant Desing Pro git提交報錯 1.1. 描述：剛下載好的ant design pro修改后，準備提交發(fā)現報如下錯誤， 1.2. 原因：是Ant Desing Pro 引用eslint做和stylelintrc腳本做js和css的語法糾正。而在每次git提交的時候觸發(fā)這個腳本...

source 2019-08-22 16:42 評論0 收藏0