前端時間學習了ionic5+angular12，做一次學習記錄，對這階段學習做一個總結。

安裝ionic

本地全局安裝

npm install -g ionic
或
// 用tabobao鏡像裝會快些
cnpm install -g ionic

安裝完畢后，查看是否安裝成功。

ionic -v

xxxxMacBook-Pro:~ xxxx$ ionic -v
5.4.16

  ────────────────────────────────────────────────────────────

          Ionic CLI update available: 5.4.16 → 6.18.1
                                
     The package name has changed from ionic to @ionic/cli!
                                
             To update, run: npm uninstall -g ionic
                 Then run: npm i -g @ionic/cli

  ────────────────────────────────────────────────────────────

出現(xiàn)版本信息，即為安裝成功。

創(chuàng)建項目

執(zhí)行

ionic start myDemo

命令執(zhí)行截圖

如上，我在本地創(chuàng)建了一個ionic+angular的空白項目，項目名為myDemo，創(chuàng)建完畢會自動下載依賴。

注意

在執(zhí)行ionic start創(chuàng)建項目時可能會出現(xiàn)下面報錯：

[ERROR] Network connectivity error occurred, are you offline?
        
        If you are behind a firewall and need to configure proxy settings, see:
        https://ion.link/cli-proxy-docs
        
        Error: getaddrinfo ENOTFOUND d2ql0qc7j8u4b2.cloudfront.net
? Downloading and extracting blank starter 

在這里插入圖片描述

初步判斷原因：

可能是國內鏡像的原因

解決辦法：

用以下命令創(chuàng)建項目，不會下載依賴。

ionic start myDemo --no-deps

項目創(chuàng)建好后，再執(zhí)行下面命令下載依賴。

npm install
或
cnpm install

項目主要目錄介紹

在這里插入圖片描述

后綴名為.spec.ts的文件是自動生成的測試文件，我項目中用不到，一般都刪除了。

項目啟動命令

npm start
或
npm run start

瀏覽器出現(xiàn)以下頁面，則項目成功搭建了。

在這里插入圖片描述

開發(fā)快捷命令

新建頁面

 ionic g page 頁面名稱

新建組件

ionic g component components/組件名稱

新建路由守衛(wèi)

ng generate guard 文件名

或者

ionic g

在這里插入圖片描述

ionic或者angular cli構建的項目，目錄差不多。
如果之前有學過TS和vue的話，這個上手應該蠻快的。