Angular6 前端搭建

2021-08-30 21:59:43 字數 1288 閱讀 9076

本次開發使用angular6結合ng-zorro完成前端的開發。本次組內的前端由我來搭建。

本次搭建過程是在前輩的基礎上做的,所以有一些可以復用的功能為本次搭建節省了很多的時間,不過這個學習的過程還是很寶貴的。

(1)angular開發使用,目前實踐典型專案有itoo-pc端/physical-pc端。

(2)使用ng-zorro元件庫開發。

(3)樣式使用 .less檔案,less是一門向後相容的 css 擴充套件語言。

一、環境配置:

前端環境要求(node已經公升級到10.15.0版):

步驟:1.1檢查全域性環境

開啟cmd,輸入ng version,檢視本地的環境配置,如果滿足要求則可以直接搭建專案,生成的專案與本地環境一致。

如果本地環境不能滿足,則需要對本地的nodejs和腳手架公升級(也可不公升級全域性環境,生成專案後只公升級專案中的環境)。

環境公升級

1.1.1nodejs公升級到最新版本

清除快取(npm cache)

npm cache clean -f

安裝n模組

npm install -g n --force

解除安裝之前版本

npm uninstall @angular/cli -g

清除快取

npm cache verify

安裝6.2.4版本

npm install @angular/[email protected] -g

1.2搭建專案

生成專案

在目錄下開啟cmd命令,生成乙個名為test-cook的專案。

ng new test-cook,等待最後會提示successfully。

使用vs code 或 webstorm開啟專案

配置倉庫

npm config set refgistry

安裝全域性yarn

npm install yarn -g

如果已經安裝了yarn,可以跳過此步驟。

啟動專案

ng serve -o (-o會自動開啟網頁)

1.3建立workspace

1.4在workspace下建立各模組

根據各模組需求建立模組,配置路由。

1.5配置靜態資源、環境

angular6 表單驗證

按照官網執行 npm install g angular cli再執行ng serve open報錯 1.匯入formsmodule。2.把formsmodule新增到ngmodule裝飾器的imports列表中,這樣應用就能訪問模板驅動表單的所有特性,包括ngmodel。響應式表單 import ...

angular6 模板引用

模板引用變數 var 模板引用變數通常用來引用模板中的某個 dom 元素,它還可以引用 angular 元件或指令或web component。使用井號 來宣告引用變數 phone placeholder phone number click callphone phone.value callbu...

angular6入門之安裝angular cli

最近聽了大漠老師分享的angular6的講解 附個鏈結大漠老師課程 像是沙漠中發現了綠洲一樣,決定好好學習一番,於是準備開始動手擼起 來。首先需要做些準備安裝angular cli window環境下的安裝 的最新版本。1.由於之前安裝的是angular cli v1的版本,需要解除安裝了,安裝最新...