本文へスキップ
バージョン：v8

Ionic Vueクイックスタート

Ionic Frameworkとは？​

まず初めに、初めての方、ようこそ！Ionic Frameworkは、iOS、Android、Electron、そしてウェブ上で動作するアプリを構築するための、無料でオープンソースのコンポーネントライブラリです。使い慣れた技術（HTML、CSS、JavaScript）を使用して一度アプリを作成し、どのプラットフォームにもデプロイできます。

UIコンポーネントに加えて、Ionic Frameworkは、新しいアプリの作成や、サポートするさまざまなプラットフォームへのデプロイを可能にするコマンドラインツールも提供しています。

このガイドでは、VueとIonic Frameworkの基礎、およびIonic Framework固有の機能について説明します。Vueに精通している場合は、このガイドをお楽しみいただき、Ionic Frameworkについて新しいことを学んでください。どちらにも精通していない場合でも、心配ありません！このガイドでは基礎を網羅し、アプリを稼働させるのに十分な情報を提供します。

Ionic CLIを使用したプロジェクトの作成​

開始するには、Ionic CLIの最新バージョンをインストールしましょう。

npm install -g @ionic/cli@latest

ここから、グローバルコマンド`ionic`を使用して、Ionic Frameworkとその他の依存関係を含むVueプロジェクトを作成できます。新しいプロジェクトを作成するには、次のコマンドを実行します。

ionic start myApp blank --type vue
cd myApp

ここから`ionic serve`を実行すると、プロジェクトがブラウザで実行されます。

TypeScriptまたはJavaScriptで構築する​

IonicではTypeScriptを愛用しており、スケーラブルなアプリ構築のための優れたツールだと考えています。とはいえ、Vueコミュニティがツール、言語などでシンプルさを重視していることも理解しています。実際、それがVueに惹かれた理由かもしれません。シンプルに始めて、必要に応じて拡張しましょう。

そのため、TypeScriptの代わりにJavaScriptを使用したい場合は、可能です。Ionic Vueアプリを生成した後、次の手順に従ってください。

  1. TypeScript依存関係の削除
npm uninstall --save typescript @types/jest @typescript-eslint/eslint-plugin @typescript-eslint/parser @vue/cli-plugin-typescript @vue/eslint-config-typescript vue-tsc

  1. すべての`.ts`ファイルを`.js`に変更します。空のIonic Vueアプリでは、これは`src/router/index.ts`と`src/main.ts`のみです。テストを使用している場合は、`tests`ディレクトリのファイルの拡張子も変更します。

  2. `index.html`で、インポートされた`