ionic 3 0 專案搭建執行

2021-08-02 16:10:32 字數 2346 閱讀 4054

在寫這篇文章的時候,ionic版本已經更新到3.4.0。手頭上有一大堆ionic1.x版本的專案,也在這個基礎上開發了許多第三方的外掛程式。實在是按捺不住迭代重構的想法,終於開始了3.x的公升級。文中的內容都是在實踐的過程編寫的,注意請不要著急公升級版本。
先看下公升級後最新的環境輸出資訊

全域性公升級了cordova和ionic的版本,分別是7.0.1和3.4.0。輸出ionic info 列印出最新的環境配置資訊。這裡要特殊指出的是ionic cli。ionic和ionic cli是不一樣的東西。ionic cli是基於nodejs的工具腳手架,開發ionic應用程式過程中使用的主要工具。更新了最新的ionic版本後,該工具也隨之公升級。當我們用ionic cli提供的命令去執行打包專案時,顯示如圖示。

為什麼會出現如上圖所示的情況。在官博相關資料中有介紹,ionic團隊為了提高其效能和使用者體驗,重寫了cli。更新後的其中乙個變化就是和cordova cli互動相關的所有命令,都需要將cordova作為命令的一部分。以前我們是執行以下命令

ionic platform add android

ionic run/build android

在v3 cli命令則是

ionic cordova platform add android

ionic cordova run/build android

第一次在專案中執行該命令,會彈出如下提示,是因為ionic cli的cordova功能已被移植到乙個外掛程式中,當檢測到沒有該外掛程式時,會提示使用者安裝。

看下cli-plugin-cordova 安裝前後的命令對比

現在,執行ionic cordova run/build android就可以進行除錯打包了。再回到ionic 1.x專案的除錯打包問題,不管新舊專案,第一次執行命令,也是會提示按照相應的外掛程式,和v3略有不同。

再說起cordova,其實以上命令也都是基於cordova cli,那麼,如果用cordova cli提供的命令來打包,是不是也是可以執行。這當然可以,只是新的工具提供了更多的命令,比如ionic generate(簡寫: ionic g),可以更加高效的構建專案。拿官博提供的乙個例子說下。

? what should the

name be? mytab

? how many tabs? 4

? name of this tab: home

? name of this tab: maps

? name of this tab: contacts

? name of this tab: more

[ok] generated a tabs named mytab!

再比如ionic g page mypage、ionic g provider mydata,都可以快速的為我們構建模組化、結構化的目錄。工具的作用就是提高我們的開發效率,具體怎麼使用,見仁見智了。如果習慣了依舊可以使用cordova,但為了往後面的版本靠攏,公升級也無可厚非。

npm uninstall -g ionic

npm cache clean

npm install -g ionic@2

ionic start myproject blank

此時我的環境是這樣子的

官方在1.x的時候提供了blank/sidemenu/tabs 三種demo模板,開發時可以根據不同的需求學習或使用對應的模板。在3.x之後,新增了super和tutorial兩種模板。

ionic start myionicproject tutorial

建立ionic3專案

一 前言 要想建立乙個ionic3的專案的環境配置 1 安裝nodejs 官網 2 npm或 cnpm 由於npm的伺服器在國外,所以安裝依賴的時候速度可能會很慢,這時候可以用 cnpm 來代替 安裝 映象命令 npm install g cnpm registry 二 建立乙個ionic3專案 1...

建立ionic4專案

一 搭建ionic環境,建立ionic專案 1 必須安裝nodejs 最新穩定版本 2 npm i g cordova ionic cnpm i g cordova ionic node v 12.18.2 npm v 6.14.5 cordova v 8.1.1 ionic v 4.10.2 安裝...

2 專案搭建

1.開發專案,我們先的搭建乙個專案目錄,基本的專案目錄很簡單,就乙個index.html檔案 css js images資料夾。2.在實際開發中,我們基本遇到的也是這三個資料夾。index是專案的主要檔案,也是入口檔案。公司實際開發中也是這個樣子的。這三個資料夾是做什麼用的呢。css是層疊樣式表,也...