發佈 ng-alain Beta 版本

時間 2020-01-22

標籤發佈 alain beta 版本简体版

原文原文鏈接

ng-alain 基於 ng-zorro-antd 的企業管理後臺腳手架。react

從開始我一直把它定位在一個 Angular 企業管理後臺最佳實踐，同時，在公司內部也開始正式基於此模板開發。git

她包括幾個特性：github

基於 ng-zorro-antd
響應式
國際化
ACL訪問控制npm
- 基於角色
- 路由守衛
延遲加載及良好的啓用畫面
良好的UI路由設計
十種顏色版本
SCSS預編譯json
- 增長排印、顏色、若干小插件
良好的目錄組織結構
簡單升級
模塊熱替換

雖然時間只有短短3周，但上述性也是基於項目經驗的一次整合。bash

1、如何下載？

ng-alain 自己並不是組件，只是一個單純的企業後臺模板，你能夠直接克隆到你的本地，而後當即進入實際開發。antd

# clone ng-alain repo
# --depth 1 removes all but one .git commit history
git clone --depth 1 https://github.com/cipchk/ng-alain.git

# change directory
cd ng-alain

# install npm package
# in china please use cnpm （https://github.com/cnpm/cnpm）
npm install

# start the serve
npm start

# use HMR
npm run serve:hmr

2、如何開發？

ng-alain 會一直與 ng-zorro-antd 保持同步更新，但這不表明你須要從新克隆 ng-alain。app

注：完整的項目會包括不少示例代碼、第三方依賴包等，後續會維護一個簡化版本。框架

一、目錄結構

項目是經過 ng new 來構建的，就如同你平時要建立項目同樣，所以，當你克隆 ng-alain 到你本地後，只須要執行 npm install，那麼就至關構建好一個新項目。工具

如下是一個完整的大概結構：

_documents (容許刪除)
_screenshot (容許刪除)
src
    app
        core
            preloader
            settings
            translator (可選：國際化)
            acl (可選：國際化)
            net (可選：HTTP攔截器)
        layout
        routes
        shared
            directives (可選：若干自定義的指令)
            pipes
            styles
    assets
        i18n (可選：國際化)
        img  (可選：一些圖片資源)
.angular-cli.json
package.json

對於可選的文件夾，容許你直接刪除，但可能會因爲一些依賴倒置編譯失敗，能夠根據編譯結果自行調整並刪除相關語句。

core

core文件夾包括菜單配置、佈局配置、顏色主題、國際化（可選）；我建議若是企業後臺無須國際化容許刪除它。而其餘建議保留。

layout

頁面總體佈局結構，包括：頭部、左邊菜單，除非在更新日誌中明確提醒不然該目錄不太會變更。

routes

具體業務頁面能夠所有放在該目錄下面。有關文件結構，能夠參考裏面的風格。這裏的內容對於後續的升級不會有任何是影響。

shared/styles

核心文件，除非你知道你在幹什麼，不然不建議你去調整它們。

.angular-cli.json

scripts 節點包括第三方類庫包引用配置，能夠放心移除。