父老鄉親們看官老爺們，大家好，作為一個半年更的公眾號😂，是時候給大家來兌現自己立的flag了！廢話不多說，本期給大家帶來的是一個船新的東西，是作者本人近期重構並開源的一個中後臺前端開發框架，雖然這個公眾號前期關注的粉絲大部分為後端開發，但是不用擔心，掌握這個高效率的中後臺前端開發框架，能讓你非常快速的實現一個後臺管理系統，即使後端開發人員也能輕鬆上手，一起來看看吧。
tip：由於項目的文檔正在努力補充中，本篇主要是對這個框架進行一個介紹(後期會有實戰篇)，先讓大家初步了解下，如果現在就想嘗試一下，又有使用上的疑惑，可以加入文末微信群或QQ群，卑微的作者會在線幫你解答問題。
項目地址：https://github.com/yiptsangkin/near-admin-vue 歡迎給個star哈哈～
面向A端開發的前端工程師在整個前端開發工程師群體中絕對不佔小數，然而在實際開發過程中，總有一項你逃不過的工作項目，那就是配置路由。無論是ant-design-pro還是vue-element-admin，這些在github上面的高star項目都是用路由的方式去實現菜單、頁面等功能，兩年前，作者也面臨這同樣的問題，寫完文件結構，還要寫路由結構，尤其還要絞盡腦汁去為每一個路由確定層級、命名，是一件非常痛苦的事情，那麼有沒有辦法不用配置路由呢？Near-Admin這個項目的起源就源於這次思考。
Near-Admin是Near-Admin是一個基於 vue 、antd和typescript的中後臺開發框架，支持多頁多路由打包，內置了多頁打包自定義配置，優化打包vendor，全局快捷鍵，i18n國際化解決方案（帶機翻功能），全局字典，本地mock，動態路由，權限驗證等功能。開發模式上只需要遵循框架約定的動態組件上開發即可，專注於單個組件的開發。這是一個專注於開發者體驗和用戶體驗的中後臺開發框架，希望能夠有效提高使用者的工作效率。
一、下載安裝
# clone the project from githubgit clone https://github.com/yiptsangkin/near-admin-vue.git
# enter the project directorycd near-admin-vue
# install dependencynpm install
# run application with all pagesnpm run serve
# run application with single page and pick target entrynpmr run single:serve
? Pick target entry › ◯ auth◯ manage成功拉取項目代碼後，進入到項目文件，使用npm install安裝項目依賴（如果網速比較慢，請使用cnpm進行安裝），項目有兩種在本地運行的模式，一種是所有頁面一起運行，另外一種是可以自己選擇想要運行的獨立頁面。運行成功後，點擊控制臺的地址就能直接跳轉到對應的頁面啦（默認跳轉到登陸頁）。
本地運行成功功能點介紹：
1、多頁運行、打包
由於現實生產項目中，如果隨著一個應用的複雜程度上升，單頁應用的整體體積將會變得越來越大，導致頁面白屏加載時間越來越長，而單獨拆分項目，也面臨的多次打包，多次運行的麻煩，Near-Admin從項目打包配置本身就解決了這個問題，支持多入口打包，支持自定義哪些單頁打包在一起，可以讓你在一個項目裡面就可以管理多個小項目，有點類似微前端的概念。
項目基本結構（1）打包全部頁面
# prod環境npm run prod:build
# uat環境npm run uat:build
# dev環境npm run dev:build打包完可以看到，打包成功的dist文件夾中包含了auth.html和manage.html兩個入口。
整體打包（2）打包單獨頁面
如果大家涉及到只想打包或者發布多頁項目中的其中一個，可以嘗試單頁打包（比方某個頁面中的一些小的需求修改，不想要整體發布）# 單個打包（其實支持選擇多個，因此可以自由的合併要打包哪些內容）npm run single:build
# 需要按照步驟選擇# 1、選擇要打包的頁面? Pick target entry › ◯ auth◯ manage# 2、選擇要打包環境? Pick target environment › - Use arrow-keys. Return to submit.❯ prod uat dev# 3、選擇是否清空dist文件夾，為什麼要有這個選項？# 分步打包的時候可以按照自己的需求來打包，不會清空之前已經打包的內容。? Pick clean dist or not › - Use arrow-keys. Return to submit.❯ yes no這裡單獨選擇了打包auth這個應用，可以看到，打包完成後可以看到dist文件夾中只有auth.html一個文件。
單獨打包
Q & A
（1）選擇打包環境有什麼區別呢？
不同的打包環境，引用的apiConfig不一樣，也就是最終大家請求的api的host會不一樣，具體邏輯在build/utils.js這個打包腳本中有體現。switch (process.env.BUILD_ENV) { case 'prod': baseConfig.externals.apiconfig.url = [`/static/js/apiConfigProd.js`] break case 'uat': baseConfig.externals.apiconfig.url = [`/static/js/apiConfigUat.js`] break case 'dev': baseConfig.externals.apiconfig.url = [`/static/js/apiConfigDev.js`] break default: // default dev api config baseConfig.externals.apiconfig.url = [`/static/js/apiConfigDev.js`]}（2）整體打包一整個項目和單獨分別打包所有的頁面有什麼區別？
整體打包，webpack會智能的幫你合併vendor和分包，對於兩個頁面公共的部分會打包成一個整體，例如，auth和manage兩個頁面都使用了antd，那麼將會被抽成一個公共的vendor引用，對於整體打包來說，二者引入的是同一個js，在訪問完auth之後，這個js會被瀏覽器緩存，因此訪問manage的時候速度會很快，如果單獨打包，那麼各自的依賴都屬於各自的vendor，訪問auth後，並不能緩存manage的vendor，因此每個頁面相當於是完全獨立。所以，不同的打包模式要根據實際情況來考慮，像auth和manage二者的關聯性非常大，那麼可以考慮合併兩者的打包，如果多了一個c端的用戶頁面，跟auth和manage關聯不大，那麼他完全可以自己獨立打包。
（3）對於單獨的頁面想要用url模式引入自定義js和css怎麼做？
Near-Admin在每個單頁應用的目錄下配置了一個page.config.json的文件，用戶可以按照約定的模式寫入js和css，打包後將自動引入到對應的html文件中。
{ "title": "Near-Admin", "externals": { "polyfill": { "type": "js", "url": [ "/static/js/near.polyfill.js" ] }, "apiconfig": { "type": "js", "url": [] } }}<!-- 打包內容自動插入了這個url的js，樣式同理，type為css --><!DOCTYPE html><html><head><!-- ... --><script src=/static/js/near.polyfill.js></script><!-- ... --></body></html>從上面的代碼中，我們可以看到，引入了polyfill和apiconfig兩個js，js也支持列表引入，比較靈活。
2、管理後臺自帶功能
（1）頁面需要配置路由？no！
Near-Admin在頁面管理部分使用動態組件的方案去實現，避免了開發者需要進行非常繁複的路由配置工作，在緩存方面從框架層面就直接考慮了，這裡就拿一個小小的🌰來說明一下如何在Near-Admin配置一個菜單，並打開一個標籤（詳細的開發使用會在後期的文章中說明）
首先我們在pages/manage/view中添加一個文件（所有的頁面組件都需要放在對應頁面的view目錄下面），然後在菜單中配置於view的相對路徑即可，如這裡的home/HomePage，我在只需要在菜單中配置或者調用$newpage的指令即可完成打開一個新標籤頁的操作：
/* 菜單配置 */{ name: 'menuObj.childMenu.1-0-0', path: 'home/HomePage', icon: ''}/* 指令打開新頁面 */this.$newpage({ title: '首頁', component: 'home/HomePage'})就這樣子你就完成了一個新的標籤頁的打開操作，不需要任何的路由配置。想要打開url怎麼樣呢？你只需要在path裡面配上url地址即可，框架會自動判斷你這個組件地址是否是網絡地址，如果是的話會默認調用框架內的webview組件，在標籤頁內顯示你的外鏈。
框架還支持標籤頁攜帶參數、而且自動幫你處理好同名組件的緩存問題，這部分等我們後面文章我們再仔細介紹下。
（2）全局快捷鍵
框架本身提供了全局快捷鍵的功能，能夠支持你在配置文件中配置你在不同頁面中不同快捷鍵組合觸發的事件內容，配置文件在src/assets/ts/custom/hotkeyconfig.ts
import {HotKeyConfig} from '@corets/type'
const hotkeyconfig: HotKeyConfig = { 'ctrl+e': { // page component path means the hot key config will effect only equal to current page component path // if you use wildcard, write the method in custom/base.ts // if you don't use wildcard but page path, write the method in page component SFC 'logline/Logline': [ { name: `Logline 'Ctrl+e' event`, method: 'exportLog' } ], '*': [ ] }}
export default hotkeyconfig從上圖的配置中可以看到，在logline/Logline頁面下，按ctrl+e會觸發一個exportLog的function，實際效果如下圖所示：
除此之外，還支持通配符，如在*中配置的會在所有的頁面中都觸發，也支持觸發多個事件，在對應頁面下面的數組配置好事件順序即可。
（3）國際化Near-Admin內置了國際化功能，同時也為開發者們做了一個簡單又貼心的機器翻譯腳本，支持google translate所支持的所有語種，而開發者只需要根據自己的母語配置一個locale_BASE.ts的文件，運行腳本就可以一次性翻譯多個版本。
# 運行npm run translate，選擇需要翻譯的目標語言npm run translate? Pick target language › ◯ ar_EG◯ bg_BG◯ ca_ES◯ cs_CZ◯ da_DK◯ de_DE◯ el_GR◯ en_US◯ es_ES◯ ↓ et_EE翻譯完成後可以在語言目錄下面看到輸出的內容
export default { locale: 'ja', country: 'JP', sysInfo: { sysIntro: 'Vueとアリのデザインに基づく使いやすいフロントエンド開発フレームワーク' }, loginForm: { byAccountBtn: 'アカウントパスワードログイン', byPhoneBtn: '電話番號ログイン', accountPlaceholder: 'ユーザー名を入力してください', passwordPlaceholder: 'パスワードを入力してください', autoLogin: '自動ログイン', forgetBtn: 'パスワードを忘れた', loginBtn: 'ログインする', byAccountTip: { emptyErr: 'アカウントを空にすることはできません' }, byPasswordTip: { emptyErr: 'パスワードは空白にできません' }, byValidTip: { emptyErr: '確認コードを入力する必要があります' }, sendMsg: { repeatErr: '繰り返し送信しないでください', success: '成功する', codeTip: '確認コードは' }, phonePlaceholder: '電話番號を入力してください', validPlaceholder: 'キャプチャ', validBtn: '確認コードを取得', loginSuccess: 'ログイン成功' }, requestInfo: { withoutUrl: 'リクエストアドレスは空にできません', networkErr: 'ネットワークリクエストが失敗しました。しばらくしてからもう一度お試しください' }, localeMap: { ar: 'アラビア語', bg: 'ブルガリア人', ca: 'カタロニア語', cs: 'チェコ人', da: 'デンマーク語', de: 'ドイツ人', el: 'ギリシャ人', 'en-gb': '英語', en: '英語', es: 'スペイン語', et: 'エストニア語', fa: 'ペルシア語', fi: 'フィンランド人', fr: 'フランス語', he: 'ヘブライ語', hi: 'ヒンディー語', hr: 'クロアチア語', hu: 'ハンガリー人', hy: 'アルメニア人', id: 'インドネシア語', is: 'アイスランド語', it: 'イタリアの ', ja: '日本語', kn: 'カンナダ語', ko: '韓國語', 'ku-iq': '中央クルド語', lv: '中央クルド語', mk: 'マケドニアの', 'mn-mn': 'モンゴル語', 'ms-my': 'マレー語', nb: 'ノルウェー語', 'ne-np': 'ネパール語', 'nl-be': 'フラマン語', nl: 'オランダの', pl: '研磨', 'pt-br': 'ブラジルポルトガル語', pt: '歐州ポルトガル語', ro: 'ルーマニア語', ru: 'ロシア語', sk: 'スロバキア', sl: 'スロベニア語', sr: 'セルビア語', sv: 'スウェーデンの', ta: 'タミル語', th: 'タイ人', tr: 'トルコ語', uk: 'ウクライナ語', vi: 'ベトナム人', 'zh-cn': '簡體字中國語', 'zh-tw': '繁體字中國語' }, menuObj: { basicFeature: '基本能力', cpUse: 'コンポーネントの使用', childMenu: { 0: '基本的なフレームワーク', 1: '基本能力', '0-0': 'Vue', '0-1': 'Ant Design', '1-0': 'フレーム機能', '1-0-0': 'プロジェクト構成', '1-0-1': 'フロントエンドログ', '1-0-2': 'ローカルモック', '1-0-3': 'グローバリゼーション', '1-0-4': 'データ辭書', '1-0-5': 'EventBus', '1-0-6': 'ツールセット', '1-0-7': 'アクセス制御', '1-0-8': 'ホットキー', '1-1': 'ページ機能', '1-1-0': 'コンポーネントページ', '1-1-1': 'URLページ', '1-1-2': '許可ページなし', '1-1-3': '404ページ' }, defaultMenu: { home: 'ホーム' }, errorTip: { notfoundTip: 'このパスの下にコンポーネントが見つかりません', emptyErr: 'コンポーネントパスが構成されていません' } }, tagObj: { closeAll: 'すべてのタブを閉じる', closeCur: '現在のタブを閉じる', closeOther: '他のタグを閉じる', closeRight: '右のラベルを閉じる', singlePage: '獨立したページ', refreshPage: 'ページの更新', affixPage: '固定ページ', cancelAffixPage: '固定を解除', errorTip: { homePageCloseError: 'ホームページを閉じることはできません', affixPageCloseError: '固定ページは閉じることができません', homePageAffixError: 'ホームページの固定を解除できません' }, checkSave: 'ページを閉じますか？（赤いラベルページのコンテンツが保存されていることを確認してください）', cancelClose: 'クローズドオペレーションがキャンセルされました' }, personalCenter: { frontendLog: 'フロントエンドログ', customSetting: 'パーソナライズ設定', logout: 'サインアウト' }, errorPage: { errorTip: { notfoundTip: 'アクセスしたページは存在しません', notrightTip: 'このページにアクセスする権限がありません', noserviceTip: 'サーバーで問題が発生しました。しばらくしてからもう一度お試しください' }, btnText: 'ページを閉じる' }}頁面上的語言選擇組件也自動根據你翻譯的語種處理好了可選語言，osx下面還能看到不同國家的小旗子😂
切換語種效果圖
對於一些翻譯準確度不需要非常精確但是又希望引入國際化的朋友，相信這會是一個極其方便的工具。
（4）其他
框架內部還集成了前端日誌、權限指令（支持「非」操作）、本地mock以及封裝好的一些工具集等多種功能，由於目前我還沒有完善好demo示例沒辦法截圖給大家看，所以這裡就只是提一下，如果大家感興趣或者有疑問的話可以加到群裡問我，我會即時給大家反饋。
總的來說呢，框架方面做了很多細節的考慮，如標籤這塊，右鍵會支持多種功能，包括關閉類的操作呀、獨立頁面、刷新頁面、固定頁面等，出現滾動條右側還會有一個下拉菜單按鈕，點擊標籤會自動定位到最開始的位置，方便用戶知道自己點了哪個標籤。全局狀態部分也為大家預設好了一些action、getters，能夠讓開發者更快的上手。
右鍵菜單
後續公眾號會陸續為大家分享使用教程、也希望有感興趣的朋友可以參與到這個項目中來，畢竟一個人的能力也有限，時間上也不大允許會影響進度。
目前項目也有一個js版本的，一位同事在維護中，地址是：https://github.com/Kim1am/near-admin-vue-vtype 不過可能進度沒有主分支這麼快，歡迎大家貢獻代碼。
最後是答疑環節：
1、為什麼是antd而不是element？
實不相瞞，near-admin-vue在2年前最初的版本確實是element，但是由於element在組件的豐富度上還有ui的設計上確實是不及antd（僅代表個人觀點），因此在vue版本的antd出來之後，作者便開始考慮使用antd來重構這個中後臺的開發框架，如果你希望有一個element版本的話，那麼可以來這個Issue#1下面發表下你的意見，我會視人數來考慮是否重構，或者有感興趣希望成為貢獻者的話也可以參與進來，因為切換的成本不會特別高，但是需要花一定的時間去實現。
2、為什麼near-admin-vue是這樣子的開發模式？
從一開始，作者對於後臺管理需要配置路由就是非常的反感，因此從一開始類似的基於路由的框架基本不在我的考慮範圍，因此我才想開始自己製作一個框架，用於滿足自己的開發需求，near-admin-vue從初始化項目之後，你可以專注於每個組件的開發，而不需要再去搭理路由，配置等任何東西，會有效的提高你的開發效率。
3、為什麼near-admin-vue使用的是多頁的打包模式？
嚴格意義上，near-admin-vue是一個可以打包多頁多路由的框架，本質上相當於在一個項目中可以打包多個單頁應用，於此同時，作者還增加了靈活的打包腳本，允許你可以在打包過程中只選擇一個或者多個單頁應用打包，發布應用的時候更加的靈活，不需要整體的打包，利用的好的話你可以輕鬆的實現微前端架構。
4、框架本身內置了這麼多種語言版本嗎？
框架本身帶有機器翻譯的腳本（Google Translate），因此使用者只需要維護一個版本的國際化文檔內容，就可以直接快速的通過機器翻譯出多個版本，對於一些翻譯準確度沒有非常高的國際化系統，非常的方便。
接下來是QQ群還有微信群的二維碼