2018-12-26

1367 ワード

最初のプロジェクトの作成
ionicアカウントの登録
ionic公式サイトに行ってアカウントを登録します
プロジェクトの作成
コマンドラインには、次のコマンドが順次入力されます.
ionic start  demo blank
n
n

インタフェースは次の図のように作成に成功しました.
image.png
プロジェクトの実行
WebStormを使用してプロジェクトを開く
WebStormがインストールされていない場合は、Terminalをダウンロードしてインストールするコマンドを実行します.
ionic serve

実行に成功すると、ブラウザが自動的に開き、次のようなインタフェースが表示されます.
image.png
プロジェクト構造解析
プロジェクトの完全なディレクトリ構造は次の図のとおりです.
image.png
node_modules
Node各種依存パッケージ
resources
Android/iosリソース(アイコンの交換とアニメーションの起動)
src
開発作業ディレクトリ、ページ、スタイル、スクリプト、画像をこのディレクトリの下に置きます.
app
app.components.ts:appのルートコンポーネント、主にapp起動時と起動後の操作に使用されますapp.html:ルートロードページapp.module.ts:appルートモジュール、一部のプラグインコンポーネントの参照はここで宣言する必要があります.appにapp.scssをどのように組み立てるかを教えます.app.htmlに対応するscss main.ts:エントリファイル
pages
ページファイル
providers
サービス格納ディレクトリ
pipes
パイプ保管ディレクトリ
directives
インストラクションストアディレクトリ
components
コンポーネント格納ディレクトリ
assets
プロジェクト静的リソース格納ディレクトリ
theme
テーマファイル保存ディレクトリ
www
生成された静的ファイルのコンパイル
platforms
Androidやiosなどのプラットフォーム関連コードで生成されるディレクトリ
plugins/
インストールされたcordovaプラグインを保存
config.xml
プロジェクトプロファイル、プロファイルID、プログラム名など.
package.json
npmモジュールのインストール時の根拠ファイル、プロジェクトのメタデータの構成、プロジェクトの管理に必要な依存
index.html
プログラムのエントリファイルは、一般的に動かない