uniapp初心者ガイド
序文
uni-app は、Vue.js (新しいウィンドウが開きます) を使用してすべてのフロントエンド アプリケーションを開発するフレームワークです。開発者は、14 のプラットフォームに公開できる一連のコードを作成します。非常に強力だと思いますか?フロントエンド開発は後ほど行います。この技術スタックを理解する必要があります。この記事により、Mengxin をすぐに車両に導入できます。
開発ツール
uni-app を開発する前に、公式開発ツール HBuilderX をダウンロードする必要があります。この開発ツールには関連環境が組み込まれており、nodejs を設定せずにすぐに使用できます。
ここにポータルを貼り付け、クリックして HBuilderX をダウンロードします
迅速な早期導入者 - ユニアプリ プロジェクトを作成する
HBuilderX のダウンロードが完了したら、HBuilderX を開きます。最初のユニアプリ プロジェクトの作成方法を説明します。
- ファイル - 新規 - プロジェクト
-
ユニアプリ プロジェクトを選択し、プロジェクト名とパスを入力して、右下隅にある [プロジェクトの作成] をクリックします。
-
プロジェクトを作成したら、それを実行できます。
ボタンをクリックし、ブラウザで実行して
実行結果を表示することを選択します。このようにして、ユニアプリ プロジェクトの構築が完了しました。
プロジェクト基本ディレクトリの紹介
ユニアプリプロジェクトの基本的な構造と各ファイルの役割を紹介します
新しく作成したファイルディレクトリを開きます ファイルの数は多くありません 一つずつ紹介していきます
- ページ フォルダーには、名前が示すとおり、ページが保存されます。デフォルトでは、インデックス フォルダーと以下の Index.vue ページが含まれています。
- 静的フォルダー。画像などの静的リソースが保存されます。
- App.vue はプロジェクトのエントリ ファイルです
- main.js は vue2 の内容に似ており、vue インスタンスをマウントします
- manifest.json ファイルには、他の小さなプログラムへのパッケージ化に関するいくつかの構成が含まれています
- Pages.json はページの構成、上のページはページ、下の globalStyle はグローバル スタイルです。
- uni.scss には、uni-app に組み込まれた共通のスタイル変数が含まれています
やっと
この記事では、uni-app プロジェクトを自分でビルドしてみることができます。
今後もユニアプリのエントリー開発から実際の開発までの内容をお届けしていきますので、ご興味のある方はぜひフォロー＆購読して更新を続けてください～