2.Ant Design Pro的第一個選單
準備
正式開發前需要準備一個IDE,如果是用純記事本的大神請忽略
可以選Sublime和VsCode等,找個自己用過的順手的
反正我都沒用過,跟隨我軟的指令碼我就選VsCode把
在VSCode裡新增一個工程,選定上一章克隆下來的工程資料夾目錄
然後再儲存下工程檔案
開始
Ant Design Pro的前端框架是阿里自己弄的UmiJS
選單配置可以看下官方的文件
它 的選單配置在config的router.config.js資料夾下面
然後我們照著模版配置一個自己的選單
首先需要在src\pages底下建立好目錄所在指向的頁面,至於為什麼必須這樣做
人家UmiJS這麼定義好了目錄的,放別的地方人家打包不認怎麼辦
我新建了一個ConfigManage的資料夾和一個ConfigUpload.js的檔案
react不會,裡面程式碼不會寫,我直接從別的頁面拷貝了一份,去掉了那些看著用不著的
留下了感覺應該用得上的
import React, { PureComponent } from 'react'; class ConfigUpload extends PureComponent { render() { return ( <div> HelloWorld </div> ); } } export default ConfigUpload;
在前面提到的router.config.js資料夾裡增加上對應的選單
不會寫?一個字,抄~
還有比我還小白的前端小白嗎?
{ path: '/configmanage', name: 'configmanage', icon: 'dashboard', routes: [ { path: '/configmanage/configupload', name: 'configupload', component: './ConfigManage/ConfigUpload', }, ], },
圖示icon儲存在哪裡還不知道,先用一個已存在的
儲存下,然後在pages/.umi/router.js的檔案裡你會發現umi自動幫我們根據配置生成了選單配置資訊
{
"path": "/configmanage",
"name": "configmanage",
"icon": "dashboard",
"routes": [
{
"path": "/configmanage/configupload",
"name": "configupload",
"component": dynamic({ loader: () => import('../ConfigManage/ConfigUpload'), loading: require('D:/1.Work/1.TFS/你自己的專案/src/components/PageLoading/index').default }),
"exact": true
},
{
"component": () => React.createElement(require('D:/1.Work/1.TFS/你自己的專案/node_modules/umi/node_modules/umi-build-dev/lib/plugins/404/NotFound.js').default, { pagesPath: 'src/pages', hasRoutesInConfig: true })
}
]
},
然後在VScode的根目錄資料夾上右鍵,開啟終端
npm start
把專案跑起來
太棒了,一次成功,我都佩服我自己了
為啥顯示的選單和我們寫的Name不一樣?這是阿里為了適應global,所以選單其實是有語言包的
這個就很明顯了,一箇中文一個英文,配一下~
export default {
'navbar.lang': '中文',
'menu.home': 'Home',
'menu.configmanage': 'ConfigManage',
'menu.configmanage.configupload': 'ConfigUpload',
export default {
'navbar.lang': 'English',
'menu.home': '首頁',
'menu.configmanage': '配置管理',
'menu.configmanage.configupload': '配置上傳',
嗯,然後完美的報錯了。。。。。
原來是我只儲存了一個配置檔案,英文的沒儲存,看樣子這是要配對存在的,這個校驗很機智啊,不會漏了某種語言
2個語言配置檔案都儲存後就正常了,噔噔~蹬蹬~
這官方文件介紹選單的部分竟然不告訴我icon在哪裡新增....
也沒告訴我icon有哪些可用。。。。。不開心
看樣子ant design 和ant design pro的文件要結合一起看,誰讓pro是ant design的模版呢~