スキャフォールディングを使用してユニアプリ プロジェクトを作成する

“

小さなプログラムを書くことがないので、uni-app フレームワークを使用して実装したいと思います。この記事では、作成手順を詳しく説明します.

”

まえがき

この記事では主に の作成について紹介します。小さなプログラム フレームワーク uni-app. もしあなたが初心者でも、Kaka のリズムに従うことができます。

1.node.js をインストールします

公式 Web サイトを開いて、丸で囲んだバージョンをインストールします。

#node.js のインストール

インストールが完了したら、node -V を使用してインストールが成功したかどうかを確認します

node.js が正常にインストールされているかどうかを確認する

node.js をインストールする必要がある理由 Kaka のようなバックエンドを作成する多くの人は、それを理解できないと推定されます。

node.js ソフトウェアには npm が組み込まれているため、Windows システムに nodejs をインストールした後、cmd を開いて npm を使用してリソースをダウンロードできます。ここでは Linux についてはしばらく話しません。

npm (正式名は [node package Management]) は、nodejs の組み込みパッケージ マネージャーであり、node.js がインストールされる理由です。

2. npm を使用して vue Scaffolding をインストールします

オンラインで調べたところ、最初の手順のほとんどは次のコマンドを実行することでしたnpm install -g @vue/cli

ただし、インストールされている vue-cli のバージョンは 2.9 ですが、uni-app プロジェクトを作成するときに create コマンドを使用する必要があるため、より高いバージョンが必要です。必須。

ここもカカが踏んだ穴なので絶対に踏まないでください！

インストールされている場合は、npm uninstall -g vue-cli コマンドを使用してアンインストールできます。

#「

次に、コマンド npm install -g cnpm.

」## を実行します。 #一部の人がオンラインで使用しているタオバオの

を見てください。npm install -g cnpm --registry=http://registry.npm.taabao.org タオバオの cnpm

をインストールします。 カカが理解しているのは鏡ですが、カカはアーティファクトを持っているので、タオバオを使わずに直接インストールしました。

インストールが成功すると、次の図のようになります。

cnpm インストールの成功のデモ

次に、vue Scaffolding を再度インストールし、コマンドを実行します。

#「

cnpm install -g @vue/cli

」

@vue-cli を再度インストールします

下の図はインストール プロセスを示していますが、プロセスはまだ完了していません。

インストール プロセス

インストールが完了したら、vue -V を使用して、バージョンが 4.5.9 以降であることを確認します。 3.

#新しいバージョン

3. プロジェクトの作成上記の無害なインストールの後、次のステップはウィンドウ指向の cmd を入力することです:

“

vue create -p dcloudio/uni-preset-vue

プロジェクト名；”

プロジェクトの作成

初めて作成する場合は、プロンプトが表示されるので、デフォルトを選択し、Enter キーを押して選択します。

プロジェクトの作成

プロジェクトの作成時に次の問題が発生するかどうかはわかりませんが、ここに問題があります。Kaka が解決します。この問題の発生と解決策を書き留めます。

遭遇した場合はここをフォローしてください、遭遇しなかった場合はスキップしてください。

下の図は、インストール プロセス中に発生したエラーを示しています。

#エラーのデモ

解決策

管理者モードを使用してコマンド ラインを開きます

”コマンドを実行

npm cache clean -fキャッシュをクリア

”

管理者として実行 コマンドline

キャッシュをクリアした後、最新バージョンのノード ヘルパーをインストールします:

#"

npm install -g n

"

次に、次のコマンドを実行します

"

npm install -g n --force

"

最後に実行します

「

npm install

」

以上です。

その後、プロジェクトの作成を再実行します`

#”

vue create -p dcloudio/uni-preset-vueらしさ

#”

以下を参照してください。画像が丸で囲まれている場合は、正常に作成されたことを意味します。

プロジェクトの作成

4. WeChat 開発者ツールでプロジェクトを実行します

プロジェクトが正常に作成されたら、それを実行する必要があります。

プロジェクト ディレクトリに移動して、コマンドを実行します。

"

npm run dev:mp -weixin

”

下の図のプロンプトを見てください。

プロジェクトを実行します

実行後、プロジェクト ディレクトリに次の構造が表示され、追加の

dist## が存在します。 #ディレクトリ<figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; overflow: hidden;"><img src="https://img.php.cn/upload/image/688/326/924/1606560315116393.png" title="1606560315116393.png" alt="スキャフォールディングを使用してユニアプリ プロジェクトを作成する"><figcaption style="max-width:90%">プロジェクト ディレクトリ</figcaption></figure><p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 1.75; margin-top: 0.8em; margin-bottom: 0.8em;">WeChat 開発者ツールにインポートする必要があるプロジェクト パスは、下の図で丸で囲まれた場所です。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; overflow: hidden;"><img src="https://img.php.cn/upload/image/912/761/743/1606560319651578.png" title="1606560319651578.png" alt="スキャフォールディングを使用してユニアプリ プロジェクトを作成する"> <figcaption style="max-width:90%">WeChat 開発者ツール プロジェクト ディレクトリのインポート</figcaption></figure><p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 1.75; margin-top: 0.8em; margin-bottom: 0.8em;"> WeChat 開発プラットフォームにプロジェクトをインポートする方法を自分で学習してください。下の図は Kaka 操作の表示です。</p> <figure data-tool="mdnice编辑器" style="margin: 0; margin-top: 10px; margin-bottom: 10px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 16px; overflow: hidden;"><img src="https://img.php.cn/upload/image/553/840/166/1606560323232021.png" title="1606560323232021.png" alt="スキャフォールディングを使用してユニアプリ プロジェクトを作成する"> #操作結果 図<figcaption style="max-width:90%"></figcaption></figure><h1 data-tool="mdnice编辑器" style="margin-top: 30px; margin-bottom: 15px; padding: 0px; color: black; border-top: 2px solid rgb(248, 57, 41); text-align: center; font-size: 1.3em;"> <span class="prefix" style="display: none;"></span>概要<span class="content" style="display: inline-block; font-weight: normal; background: rgb(248, 57, 41); color: #ffffff; padding: 3px 10px 1px; border-radius: 0 0 13px 13px;"></span><span class="suffix"></span> </h1>上記はvueのスキャフォールディングを使用したKakaの全プロセスですユニアプリプロジェクトプロセスを作成します。 <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 1.75; margin-top: 0.8em; margin-bottom: 0.8em;"></p>vue に触れるのは初めてですし、uni-app に触って小さなプログラムを開発するのも初めてなので、コマンドの実行や何かおかしなところがあれば、記事内の問題解決方法については、ご指摘いただければ幸いです。 <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 1.75; margin-top: 0.8em; margin-bottom: 0.8em;"></p>この作成プロセスでは、Kaka は他の技術記事も段階的にフォローしました。最後にまとめられた記事は、私のような初心者に役立つものでもあります。 <p data-tool="mdnice编辑器" style="padding-top: 8px; padding-bottom: 8px; line-height: 1.75; margin-top: 0.8em; margin-bottom: 0.8em;"></p> <blockquote class="multiquote-1" data-tool="mdnice编辑器" style="border: none; font-size: 0.9em; overflow: auto; margin-bottom: 20px; margin-top: 20px; padding: 15px 10px; line-height: 1.75; border-radius: 13px; color: rgb(53, 53, 53); background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial;">「<span style="display: block; font-size: 2em; color: rgb(248, 57, 41); font-family: Arial, serif; line-height: 1em; font-weight: 700;"></span>学習の継続、ブログの継続、共有の継続は、カカがそのキャリア以来常に支持してきた信念です。巨大なインターネット上のカカの記事がそうであることを願っています」 Silk のお手伝いをします。私の名前はカカです。また次回お会いしましょう。<p style="padding-top: 8px; padding-bottom: 8px; line-height: 26px; font-size: 16px; margin: 0px 10px;"></p>”<span style="float: right; display: block; font-size: 2em; color: rgb(248, 57, 41); font-family: Arial, serif; line-height: 1em; font-weight: 700;"></span> </blockquote>

以上がスキャフォールディングを使用してユニアプリ プロジェクトを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。