<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                [TOC] >[success] # 環境搭建 ![](https://img.kancloud.cn/e4/03/e40358e475a820b93da4832f2fa9595c_1268x618.png) 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 然后執行指令進行下載 ![](https://img.kancloud.cn/87/73/8773287ae4bd233ab9788a0fa8e925ad_1634x850.png) 全局安裝: ~~~ 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) 安裝成功后會這樣顯示 ![](https://img.kancloud.cn/16/06/16062fc8affc4d00a5a301dfdb305d41_993x519.png) 這里要注意,**angular cli** 的 **版本號** 一定要跟下面對應的類庫版本保持一致,不然會報錯 ![](https://img.kancloud.cn/a5/c7/a5c79a48a3fb1118c1bfbe2a7f38837a_993x519.png) >[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** ![](https://img.kancloud.cn/c2/00/c20071e147f9f0e04d035a061b09c655_727x136.png) 3. 選擇一個**css 預處理器** ,這里我們先簡單選個 **css** ![](https://img.kancloud.cn/6d/13/6d139fbf87c5f40108b5e5e2a3b326ee_716x222.png) 4. 此時會出現一長串下載的命令,然后下載好慢,如圖: ![](https://img.kancloud.cn/a5/d2/a5d25d1e0f6ea06aa8ed9fe7c9844f52_613x503.png) 這種情況如何解決呢?我們可以使用 `ng new pinduoduo --skip-install --style css --routing false` ,這句指令的意思是,我們只創建項目生成文件,不要下載安裝 node 包,**樣式用 css ,不用路由** ,然后執行之后就會直接生成出來了項目文件目錄如下圖: ![](https://img.kancloud.cn/7a/80/7a807599c636e30fb2571c786204528d_748x522.png) 項目文件結構: ![](https://img.kancloud.cn/1c/07/1c0793ae877387bb42de76eb427608c5_1139x615.png) 此時可以在項目文件夾中使用 `npm install` 或者 `cnpm install` ,進行依賴包的下載 5. **然后啟動項目** 執行 `ng serve` ,運行成功后會編輯器上會出現,一個 `http://localhost:4200/` 的一個域名地址 ![](https://img.kancloud.cn/ed/fd/edfd734c3e9feacfbd2cb663b8d9a3ad_1095x435.png) 然后到瀏覽器訪問這個域名 ![](https://img.kancloud.cn/b1/bc/b1bccdd09bb3287297e3a98003f8e1d3_1645x824.png) 這樣就成功創建項目了 >[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 // 針對測試時的配置 ~~~ ![](https://img.kancloud.cn/d3/9d/d39d30bfdd7441a7609fe84d43192a4d_1169x551.png) >[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** 中這些插件的版本號 ![](https://img.kancloud.cn/43/23/43231f2da5b32d93aa06000395212fe6_1000x903.png) **版本號由 3 段組成**,如上圖中框選的,`~13.3.1` ,前面的 **13** 代表 **大版本號**,中間的 **3** 代表 **小版本號**,后面的 **1** 代表 **補丁版本號**。 **我們還會發現版本號前面還會有一個波浪線(~)或者 ^ 這個符號** 【~】:~意思是 **鎖定前面2個版本的版本號(大版本與小版本)** ,也就是鎖定 **13.3** ,后面的補丁版本號會自動安裝最新的 【^】: ^意思是 **鎖定大版本版本號**,也就是鎖定 **13** ,小版本號與補丁版本號會自動安裝最新的,即使你寫 `^13.3.1` ,最新版本是 **14.5.1** ,它就會安裝 `13.9.9`,它只會鎖住你的大版本 【不寫任何符號,直接寫版本號】:還有一種是直接寫版本號,例如:**13.3.1** ,這個意思是嚴格要求就要這個版本,不要其他版本。 >[success] ## 關鍵配置 下面是一些關鍵的文件配置 ![](https://img.kancloud.cn/fe/06/fe064f8bb199592cb510e1844a57fc8a_1076x600.png) ![](https://img.kancloud.cn/e7/aa/e7aa753e4fad87f9d844fa0f593dfe19_1098x574.png) >[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** ![](https://img.kancloud.cn/a3/10/a310898101d7073485ab06e8be075d76_343x134.png) 1. app.component.css:代表該頁面的css都寫到這里 2. app.component.html:該頁面的html都寫到這里 3. app.component.spec.ts:該頁面的測試文件 4. app.component.ts:該頁面的js邏輯都寫在這里 **app.component.ts** ![](https://img.kancloud.cn/ab/53/ab537a367a8bf46fd6dbdd2f31aa5f0e_1002x369.png) 然后最終輸出到 **index.html** 中作為展示,組件名叫做 **app-root** ![](https://img.kancloud.cn/98/5f/985fc3f47ecb12bebd78e93f56f12d33_822x372.png) 5. app.module.ts:模塊的導入導出都在這里寫 **app.module.ts** ![](https://img.kancloud.cn/78/d1/78d14dbe2d701efd7b68500d74af4440_859x480.png) >[success] # main.ts **main.ts** 是整個應用的入口,也就是說在程序引導的時候,它會去引導程序進入我們的 **根模塊** ,**根模塊** 中去引導 **跟組件** ![](https://img.kancloud.cn/fe/0a/fe0afa8c0dd641912149f5fd62d64422_803x376.png) >[success] # 注意 那剛才在創建項目時候我們使用了 ~~~ ng new pinduoduo --skip-install --style css --routing false ~~~ 那么我們也不知道除了 **--style** ,還有哪些指令,我們可以輸入 `ng new --help` ,就可以看到了我們可以使用的指令,每個指令是什么地下都有一個解釋 ![](https://img.kancloud.cn/9f/4e/9f4e580247164e80e7439e756b3e15b6_902x775.png) 那么 **ng** 下面又有哪些子命令呢? 執行指令 `ng help` ,就可以看到下面圖片中,不僅僅只有 **ng new** 還有其他的 ![](https://img.kancloud.cn/28/0b/280b81fc0492117de42726c31c95089d_1379x492.png)
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看