uni-app

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

咔咔

Nov 28, 2020 pm 06:46 PM

uni-app

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

まえがき

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

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

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

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

#node.js のインストール

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

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 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キャッシュをクリア
”

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

#"
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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/688/326/924/1606560315116393.png?x-oss-process=image/resize,p_40" class="lazy" title="1606560315116393.png" alt="スキャフォールディングを使用してユニアプリプロジェクトを作成する"><figcaption style="max-width:90%">プロジェクトディレクトリ</figcaption></figure>WeChat 開発者ツールにインポートする必要があるプロジェクトパスは、下の図で丸で囲まれた場所です。 <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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/912/761/743/1606560319651578.png?x-oss-process=image/resize,p_40" class="lazy" title="1606560319651578.png" alt="スキャフォールディングを使用してユニアプリプロジェクトを作成する"> <figcaption style="max-width:90%">WeChat 開発者ツールプロジェクトディレクトリのインポート</figcaption></figure> WeChat 開発プラットフォームにプロジェクトをインポートする方法を自分で学習してください。下の図は Kaka 操作の表示です。 <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="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/553/840/166/1606560323232021.png?x-oss-process=image/resize,p_40" class="lazy" 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;"> 概要 </h1>上記はvueのスキャフォールディングを使用したKakaの全プロセスですユニアプリプロジェクトプロセスを作成します。 vue に触れるのは初めてですし、uni-app に触って小さなプログラムを開発するのも初めてなので、コマンドの実行や何かおかしなところがあれば、記事内の問題解決方法については、ご指摘いただければ幸いです。 この作成プロセスでは、Kaka は他の技術記事も段階的にフォローしました。最後にまとめられた記事は、私のような初心者に役立つものでもあります。 <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;">「学習の継続、ブログの継続、共有の継続は、カカがそのキャリア以来常に支持してきた信念です。巨大なインターネット上のカカの記事がそうであることを願っています」 Silk のお手伝いをします。私の名前はカカです。また次回お会いしましょう。” </blockquote>

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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。