? ? ? ?分享一個最近在做的一個前端項目，前端選型Angular，組件庫選擇的是ng-zorro(官網(wǎng)：http://ng.ant.design/docs/introduce/zh)。項目結(jié)構(gòu)以及項目里面用到的一些通用庫比如路由復用標簽、路由守衛(wèi)控制等等參考的是ng-alain(官網(wǎng)：https://ng-alain.com/zh，https://github.com/ng-alain/delon)。
ng-zorro和ng-alain都來自阿里巴巴公司。感謝。
一、項目構(gòu)建
? ? ? ?大概說下項目的生成步驟。ng less工程、ng-zorro的引入、jquery的引入、echarts的引入、layer的引入等等。
1.1、angular 創(chuàng)建工程(less)
- ng new xxx --style less
ng 命令創(chuàng)建工程，xxx是項目的名字，注意這里樣式我們采用了less的方式。因為less是完全兼容css的。less里面可以直接寫css的格式。
1.2.、nz-zorro 引入(--theme 把主題參數(shù)引入進來方便修改zorro樣式)
- ng add ng-zorro-antd --theme
會在 src 目錄下自動生成 theme.less。后續(xù)咱們要是需要修改zorro默認樣式直接在這里面修改。可以參考http://ng.ant.design/docs/customize-theme/zh里面的內(nèi)容。
1.3、jquery 引入
? ? ? ?jquery很多開源庫都需要依賴jquery。所以咱們先一步把他引入盡量。
- npm install --save jquery
- npm install @types/jquery --save
- angular.json 文件里面添加jquery對應的js依賴。"node_modules/jquery/dist/jquery.min.js"
1.4、echarts 引入(圖表控件)
? ? ? ? 我們項目中需要大量的用到圖標控件。而且我們組的其他兄弟對echarts比較熟悉。所以我們把echarts引入進來。
- npm install echarts --save
- npm install ngx-echarts --save
- angular.json 添加echarts對應的js依賴。 echarts.min.js依賴，"node_modules/echarts/dist/echarts.min.js"
5. layer 引入(彈窗控件)
? ? ? ? 整個項目的彈窗我們使用layer，所以我們把layer也引入進來。layer下載地址 https://layer.layui.com/ 選綠色版下載。
- layer下載之后解壓，拷貝 layer 文件到 assets 目錄下(注意哦是assets目錄下，如果目錄不同下面的angular.json里面引入css、js也要改成對應的路徑)。
- angular.json 添加 css依賴 "src/assets/layer/theme/default/layer.css"
- angular.json 添加 js依賴 "src/assets/layer/layer.js"
6. 統(tǒng)一樣式
? ? ? ?統(tǒng)一樣式，目的也是方便樣式的統(tǒng)一管理，比如menu的高度定義的太低了、item的高度啥啥的，
以后咱們只需要修改src/styles/theme.less文件就行。
- src/styles 目錄下新建 theme.less，同時在angular.json里面添加 "src/styles/theme.less"
- src/styles 目錄下新建 index.less，同時在angular.json里面添加 "src/styles/index.less"
需要注意styles文件在angular.json里面的順序，倒數(shù)第一個styles.less、倒數(shù)第二個index.less，倒數(shù)第三個theme.less
theme.less文件統(tǒng)一放置我們整個應用的樣式變量。比如menu高度，標題欄高度，字體顏色等等。index.less里面放置咱們整個應用的通用樣式。
angular.json文件內(nèi)容對應jquery、echarts、layer引入添加的js、css截圖如下。
8. 推薦項目結(jié)構(gòu)
? ? ? ?整個項目的目錄結(jié)構(gòu)完全參考的ng-alain的目錄結(jié)構(gòu)。更加詳細的內(nèi)容可以參考an-alain(https://ng-alain.com/zh)的介紹。
├── core
│ ├── net
│ │ ├── default.interceptor.ts(網(wǎng)絡(luò)攔截器)
│ │ ├── http-base.service.ts(對網(wǎng)絡(luò)請求的簡單封裝)
│ ├── startup
│ │ ├── startup.service.ts(保存用戶相關(guān)信息)
│
├── entity (實體類)
│ ├── request(request實體類)
│ │ ├── xx
│ │ │ ├── xx.ts
│ │ ├── xx
│ │ │ ├── xx.ts
│ ├── response(response實體類)
│ │ ├── xx
│ │ │ ├── xx.ts
│ │ ├── xx
│ │ │ ├── xx.ts
│ ├── xx
│ │ ├── xx.ts
│ ├── xx
│ │ ├── xx.ts
│
├── layout (通用布局)
│ ├── default(正常登入布局)
│ │ ├── xx.html
│ │ ├── xx.less
│ │ ├── xx.ts
│ │ ├── README.md
│
├── routes
│ ├── dire1
│ │ ├── index.html
│ │ ├── index.less
│ │ ├── index.ts
│ │ ├── README.md
│ ├── dire2
│ │ ├── index.html
│ │ ├── index.less
│ │ ├── index.ts
│ ├── routes.module.ts
│ ├── routes-routing.module.ts
│ ├── README.md
├── shared(所有子系統(tǒng)共享)
│ ├── components(公共組件)
│ │ ├── comp1
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ │ ├── comp2
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ ├── directives(公共指令)
│ │ ├── dire1
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ │ ├── dire2
│ │ │ ├── index.ts
│ │ │ ├── README.md
│ ├── shared.module.ts
│ ├── README.md
│
二、特別分享
2.1、nz-zorro組件庫樣式修改
? ? ? ?nz-zorro組件庫使用的時候修改nz-zorro對應的them.less文件還滿足不了我們的需求的時候。試試用:host ::ng-deep 或者只是用::ng-deep。如下代碼所示。
:host ::ng-deep .ant-input-affix-wrapper .ant-input:not(:first-child){
padding-left: 30px;
}
2.2、沒事瞧瞧ng-alain對應delon庫的代碼
? ? ? ?delon庫代碼地址https://github.com/ng-alain/delon 至少我們項目里面關(guān)于權(quán)限控制，路由服用標簽完全是參考的delon庫里面的代碼。
? ? ? ?這次的分享就這些。重點在項目的創(chuàng)建上。也是特別感謝阿里給出的nz-zorro組件庫和ng-alain腳手架。
