一、安裝
1、安裝node.js
從官網下載需要的版本,直接安裝即可,安裝完成後,在命令行輸入node -v查看安裝的版本,有顯示即安裝成功
2、安裝typescript
必須先安裝typescript,因爲angular是用typescript寫的
npm install -g typescript typings
安裝完成後 tsc -v查看版本
3、安裝angular
npm install cnpm -g --registry=https://registry.npm.taobao.org:安裝淘寶npm鏡像。
再安裝angular
npm install -g @angular/cli
安裝完成後 ng version 進行版本查看
二、創建第一個項目
1、ng new myAngularApp --style less
--style less要加這個,否則項目需要支持less還需要手動改配置
創建完成後ng serve 啓動項目瀏覽器localhost:4200訪問項目
2、引入ng-zorro框架
ng add ng-zorro-antd --theme
https://ng.ant.design/docs/getting-started/zh
這是ng-zorro中文官網,上面也有引入教程
3、引入jquery
jquery很多開源庫都需要依賴jquery。所以咱們先一步把他引入儘量。
npm install --save jquery
npm install @types/jquery --save
angular.json 文件裏面添加jquery對應的js依賴。「node_modules/jquery/dist/jquery.min.js」
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. 統一樣式
統一樣式,目的也是方便樣式的統一管理,比如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裏面的順序,倒數第一個styles.less、倒數第二個index.less,倒數第三個theme.less
theme.less文件統一放置我們整個應用的樣式變量。比如menu高度,標題欄高度,字體顏色等等。index.less裏面放置咱們整個應用的通用樣式。
angular.json文件內容對應jquery、echarts、layer引入添加的js、css截圖如下。
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; } ———————————————— 版權聲明:本文爲CSDN博主「tuacy」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。 原文鏈接:https://blog.csdn.net/wuyuxing24/java/article/details/82730838