[TOC] >[success] # 環境搭建  1. 到 **nodejs 官網** 安裝 **LTS** 版本即可 2. 一般建議能用 npm 就用 npm ，因為cnpm 容易下載到舊版本的依賴包 npm 升[在組件類中引用模版（類似vue 的 ref）](%E5%9C%A8%E7%BB%84%E4%BB%B6%E7%B1%BB%E4%B8%AD%E5%BC%95%E7%94%A8%E6%A8%A1%E7%89%88%EF%BC%88%E7%B1%BB%E4%BC%BCvue%20%E7%9A%84%20ref%EF%BC%89.md)級指令 ~~~ // 這樣代表升級自己 npm install -g npm ~~~ 3. 安裝 **angular cli** 到npm上找到angular cli 然后執行指令進行下載  全局安裝： ~~~ npm install -g @angular/cli ~~~ 可以使用 `npm root -g` 查看全局安裝目錄。 本地安裝： ~~~ npm i @angular/cli ~~~ 我們進行 **全局安裝** ，安裝完成后執行 `ng version` 查看是否安裝成功，如果遇到安裝失敗請查看 [ng version 'ng' 不是內部或外部命令](https://www.cnblogs.com/Can-daydayup/p/14167181.html) 安裝成功后會這樣顯示  這里要注意，**angular cli** 的 **版本號** 一定要跟下面對應的類庫版本保持一致，不然會報錯  >[success] # 項目創建 1. 首先在我們要創建項目的文件夾中 打開 **PowerShell** ，然后輸入如下指令創建項目 ~~~ // ng new 項目名稱 ng new pinduoduo ~~~ 如果遇到了 **ng : 無法加載文件 C:\Users\用戶名\AppData\Roaming\npm\ng.ps1，** [點擊這里](https://blog.csdn.net/df981011512/article/details/105663996)， 2. 如果沒有問題的話會彈出下面的圖片內容，問我們是否需要在創建項目時就把路由添加上，這里我們選擇 **no** ，如果有需要的話也可以選擇 **yes**  3. 選擇一個**css 預處理器** ，這里我們先簡單選個 **css**  4. 此時會出現一長串下載的命令，然后下載好慢，如圖：  這種情況如何解決呢？我們可以使用 `ng new pinduoduo --skip-install --style css --routing false` ，這句指令的意思是，我們只創建項目生成文件，不要下載安裝 node 包，**樣式用 css ，不用路由** ，然后執行之后就會直接生成出來了項目文件目錄如下圖：  項目文件結構：  此時可以在項目文件夾中使用 `npm install` 或者 `cnpm install` ，進行依賴包的下載 5. **然后啟動項目** 執行 `ng serve` ，運行成功后會編輯器上會出現，一個 `http://localhost:4200/` 的一個域名地址  然后到瀏覽器訪問這個域名  這樣就成功創建項目了 >[success] # 項目目錄結構講解 ~~~ pinduoduo // 項目名稱 |__ e2e // 測試目錄，項目中不會去用（angular 8 中有這個目錄，其他版本不知道有沒有） |__ node_modules // 項目中的node依賴包 | |__ src // 項目主文件 | |__ app // 項目代碼 | |__ assets // 靜態資源（圖片、字體圖標文件） | |__ environments // 環境配置 | | |__ environment.prod.ts // 線上環境 | | |__ environment.ts // 開發環境 | |__ favicon.ico // 標簽欄的小圖標 | |__ index.html // 模板文件，最后打包后的index.html模板就是這個文件 | |__ main.ts // 項目入口文件（項目引入全局插件都在這里引入） | |__ polyfills.ts // 用于不同瀏覽器的兼容腳本加載，js腳本的兼容處理 | |__ styles.css // 整個項目的全局css | |__ test.ts // 測試入口 | |__ .browserslistrc // 瀏覽器兼容給css添加前綴例如 -webkit-等 |__ .editorconfig // 編譯器配置文件，不同的編輯器可以使用共同的風格，例如代碼縮進都是2個控空格 |__ .gitignore // git提交的忽略文件 |__ angular.json // angular支持多項目，可以配置多個項目，以及項目打包后的生成文件的地址都可以進行配置 |__ karma.conf.js // 單元測試的配置文件，這里不會講解 |__ package-lock.json // 鎖定安裝時的包的版本號，并且需要上傳到git，以保證其他人在npm install時大家的依賴能保證一致，這里實際上是package.json中的依賴包依賴的一些其他依賴，怕他們依賴的依賴包有沖突，所以在這里細分管理 |__ package.json // 項目名稱、項目版本、項目描述、項目運行的一些腳本（依賴） |__ README.md // 中文版項目說明 |__ tsconfig.app.json // 繼承自 tsconfig.json 的一些 ts配置，針對項目開發的一些配置 |__ tsconfig.json // 全局的ts配置，例如最終打包生成的js版本是es5還是什么版本 |__ tsconfig.spec.json // 針對測試時的配置 ~~~  >[success] ## package.json 這里著重講解一下 **package.json** ，它里面包含 **2 個 依賴** 1. **dependencies** ：運行時的依賴 2. **devDependencies**：開發階段使用的依賴包，就例如 **ts** 在開發階段使用，后續打包后會生成 **js**文件，所以生產環境是不需要這個依賴的， 3. 安裝依賴：`npm i -S 插件名` 4. 安裝開發依賴：`npm install --save-dev` ，貌似`npm install 插件名 -D` 也可以 5. 這里講一下版本號，下面圖片中我們可以看到，**package.json** 中這些插件的版本號  **版本號由 3 段組成**，如上圖中框選的，`~13.3.1` ，前面的 **13** 代表 **大版本號**，中間的 **3** 代表 **小版本號**，后面的 **1** 代表 **補丁版本號**。 **我們還會發現版本號前面還會有一個波浪線（~）或者 ^ 這個符號** 【~】：~意思是 **鎖定前面2個版本的版本號（大版本與小版本）** ，也就是鎖定 **13.3** ，后面的補丁版本號會自動安裝最新的 【^】： ^意思是 **鎖定大版本版本號**，也就是鎖定 **13** ，小版本號與補丁版本號會自動安裝最新的，即使你寫 `^13.3.1` ，最新版本是 **14.5.1** ，它就會安裝 `13.9.9`，它只會鎖住你的大版本 【不寫任何符號，直接寫版本號】：還有一種是直接寫版本號，例如：**13.3.1** ，這個意思是嚴格要求就要這個版本，不要其他版本。 >[success] ## 關鍵配置 下面是一些關鍵的文件配置   >[success] # 環境變量配置 1. 只需要在 **src\environments\environment.prod.ts** 文件中添加一個 **baseUrl** ，然后寫上后端的服務地址即可，代碼如下： **environment.prod.ts** ~~~ export const environment = { production: true, baseUrl: 'http://localhost:8080/api' }; ~~~ 打包： 開發環境：只需要執行 `ng build` 線上環境：執行 `ng build --prod` >[success] # 頁面組件講解 這個app文件夾有點像 **vue** 中的 **app.vue**  1. app.component.css：代表該頁面的css都寫到這里 2. app.component.html：該頁面的html都寫到這里 3. app.component.spec.ts：該頁面的測試文件 4. app.component.ts：該頁面的js邏輯都寫在這里 **app.component.ts**  然后最終輸出到 **index.html** 中作為展示，組件名叫做 **app-root**  5. app.module.ts：模塊的導入導出都在這里寫 **app.module.ts**  >[success] # main.ts **main.ts** 是整個應用的入口，也就是說在程序引導的時候，它會去引導程序進入我們的 **根模塊** ，**根模塊** 中去引導 **跟組件**  >[success] # 注意 那剛才在創建項目時候我們使用了 ~~~ ng new pinduoduo --skip-install --style css --routing false ~~~ 那么我們也不知道除了 **--style** ，還有哪些指令，我們可以輸入 `ng new --help` ，就可以看到了我們可以使用的指令，每個指令是什么地下都有一個解釋  那么 **ng** 下面又有哪些子命令呢？ 執行指令 `ng help` ，就可以看到下面圖片中，不僅僅只有 **ng new** 還有其他的