VSCode 開発 UNI-APP 構成チュートリアルとプラグイン

VSCode 開発 UNI-APP 構成チュートリアルとプラグイン

前面に書かれた

uni-app は、Vue.js を使用してすべてのフロントエンド アプリケーションを開発するためのフレームワークです。開発者は一連のコードを記述し、iOS、Android、H5、さまざまなミニプログラム (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/Taobao)、クイック アプリケーションなどの複数のプラットフォームに公開します。 UNI-APP を開発するための最適なツールは HbuilderX ですが、だからといってなぜ VsCode で UNI-APP を開発する必要があるのか​​疑問に思う必要はありません。公式には、HBuilderX は Vue 専用に構築されたエディターなので、Vue でない場合はどうすればよいでしょうか。現時点では、他の製品を選択する必要がありますので、UNI-APP を他の製品に移行して開発してみてはいかがでしょうか。そこで、統合エディタの観点から、最近は VsCode が選択されました。

HBuildex は UNI-APP を開発するための最適なツールかもしれませんが、最も包括的なツールではありません。

  • VS Code を使用して UNI-APP を開発する前に、公式ガイド「When uni-app meets vscode」を読むことを強くお勧めします。もちろん、後でいくつかの重要な手順を再度強調します。そして公式チュートリアルvue-cli開発uni-appチュートリアル

予防

  • VsCodeはUNI-APPを開発する際にエディターとしてのみ機能します。プログラムのデバッグは対応する環境で実行する必要があります。たとえば、WeChatアプレットはWeChat開発者ツールでのみデバッグできます(これはHXと同じです)
  • VsCode では npm コマンドを使用して実行およびパッケージ化できますが、実機シミュレーターを直接呼び出すことはできません。また、APP パッケージ化などの機能も使用できません。そのようなニーズがある場合は、VSCode 環境でコードを編集してから HX を介してパッケージ化することしかできません。

開発環境構築

1. Vue-cli 3.x をグローバルにインストールします (すでにインストールされている場合はスキップしてください)

npm インストール -g @vue/cli

Taobaoミラーがインストールされている場合は、cnpmインストールを使用することをお勧めします。

cnpm インストール -g @vue/cli

2. CLI経由でユニアプリプロジェクトを作成する

vue create -p dcloudio/uni-preset-vue 私のプロジェクト

3. VsCodeを使用してプロジェクトを開く

4. Vue構文プロンプトプラグインをインストールする

Vscodeプラグインマーケットで構文プロンプトプラグインをインストールします。ここでは、実用的なプラグインをいくつか紹介します。

  • Vetur Vue 構文ヒントプラグイン
  • vue-helperはVeturと組み合わせて使用​​される別のVue構文プラグインです。
  • Auto Close Tag はタグの自動終了プラグインであり、外部コンポーネントを使用するときに非常に便利です。
  • 自動タグ名変更タグ名変更プラグイン。タグ名を変更する必要があるときに非常に便利です。
  • 一致するタグを強調表示 選択したタグを強調表示し、タグの始まりと終わりを素早く見つけます
  • TODOハイライト コード内のToDo項目をハイライト表示します
  • Todo TreeとTODO Highlightを組み合わせて、より完璧なToDo管理システムを構築します
  • koroFileHeaderはヘッダーコメントとコードコメントを素早く生成します

5. UNI-APP構文プロンプトをインストールする

npm および @dcloudio/uni-helper-json

6. HXカスタムコードブロックをインポートする

github から uni-app コード ブロックをダウンロードし、プロジェクト ディレクトリの下の .vscode ディレクトリに配置すると、HBuilderX と同じコード ブロックが作成されます。

.vscodeがない場合は、プロジェクトのルートディレクトリに新しいものを作成します。

よく使用するコードブロックをカスタマイズすることもできます

ここに画像の説明を挿入

7. プロジェクトの実行と公開VSCodeの左エクスプローラー/NPMスクリプトのクイックスタートコマンドからプロジェクトを実行および公開できます。

ここに画像の説明を挿入

プロジェクトを実行する

npm run dev:%プラットフォーム%

プロジェクトを公開する

npm 実行ビルド:%PLATFORM%

%PLATFORM% に指定できる値は次のとおりです。

価値プラットフォーム
h5 H5
mp-アリペイAlipayミニプログラム
mp-百度百度ミニプログラム
mp-ウェイシンWeChatミニプログラム
mp-toutiao Toutiaoミニプログラム
mp-qq qqミニプログラム

アプリを公開したい場合は、HXを通じてのみ行うことができます。

開発構成に関する注意事項

1. 通常、HXで新しいページを作成すると、同じ名前とルートのページがpages.jsonに自動的に登録されます。 VsCodeでは、ページルーティングは独自に登録する必要がある

「ページ」: [ 
		{
			"パス": "pages/home/home"
		}
	]

リリース構成の説明: HX でリリースするときに、視覚的な構成インターフェイスが提供されます。VSCode でのリリース構成は、 manifest.jsonで構成する必要があります。次の例では、WeChat アプレットの appid と H5 パッケージ パスの構成を例として示します。

// manifest.json は JSONC 形式で開く必要があります "mp-weixin": { /* WeChat アプレット固有の情報*/
		"appid": " your_wx_apid ", /* WeChat アプリ ID */
		「設定」: {
			"urlCheck": false /* 安全なドメイン名と TLS バージョンをチェックするかどうか */
		},
		"usingComponents": true /* カスタム コンポーネント モードを有効にするかどうか */
	},


 	"h5" : { /* H5関連 */
			「ルーター」:{
					"base" : "/basePath/" /* プロジェクトのベースパス */
			},
			"domain" : " your_domin ", /* ドメイン名 */
			"最適化" : {
					「木を揺らす」: {
							"enable" : true /* ツリーシェイクの最適化を有効にするかどうか */
					}
			}
		}

詳細な構成については、uni-app 構成項目リストを参照してください。

3. グローバル CSS ファイルは、 APP.vueスタイル タグに導入できます。 SCSSファイルはuni.scssファイルにインポートして他のページでのみ使用できます。

// アプリ.vue 
<スタイル lang="scss">
	/*各ページに共通のCSS */
	@import url("./common/iconfont.css");
</スタイル>
// uni.scss 
@import 'uview-ui/theme.scss';

easycomルールを設定する

easycomルールリテラシー記事については、easycomモード、UNI-APPコンポーネント開発と呼び出しに習得する必要がある実践スキルを参照してください。

Easycomルールはpages.jsonファイルで設定されます。カスタム設定の例は次のとおりです。

// ページ.json
	"イージーコム": {
		"my-(.*)":"@/my-ui-components/my-$1.vue"
	},
	「ページ」:[...]

構成の説明: ディレクトリmy-ui-components内のプレフィックスがmy-であるすべての.vueファイルに easycom ルールを適用します。 (したがって、理解を容易にするために、 $1プレースホルダーまたはワイルドカードとして考えることができます)

VSCode開発UNI-APP設定チュートリアルとプラグインに関するこの記事はこれで終わりです。より関連性の高いVSCode開発UNI-APPコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。皆様の今後の123WORDPRESS.COMへのご支援をお待ちしております。

以下もご興味があるかもしれません:
  • uni-app インストールからアンインストールまでの入門チュートリアル
  • uni-appは、複数の端末のサードパーティマップポジショニングをサポートします
  • uni-appで増分更新機能を実装する方法
  • uni-app コンポーネントで要素の幅と高さを取得する実装
  • VUE ユニアプリコア知識の簡単な紹介

<<:  MySQL ストアド プロシージャのエラー処理例の詳細な説明

>>:  Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します

推薦する

Docker Nginxコンテナの制作と展開の実装方法

クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...

jQueryはシャトルボックス効果を実現します

この記事では、シャトルボックス効果を実現するためのjQueryの具体的なコードを参考までに紹介します...

仮想マシンに Windows Server 2008 オペレーティング システムをインストールする

この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...

HTML テーブル マークアップ チュートリアル (39): ヘッダーの明るい境界線の色属性 BORDERCOLORLIGHT

テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...

NginxにおけるRewriteのリダイレクト設定と実践の詳しい解説

1: アドレス書き換えとア​​ドレス転送の意味を理解する。アドレス書き換えとア​​ドレス転送は異なる...

Nginx 構成の場所の一致ルールの例の説明

nginx の設定命令のスコープは、main、server、location の 3 種類に分けられ...

Centos7 に yum 経由で MySQL をインストールする方法

1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...

Ubuntu Linuxシステムをインストールするときにハードディスクをパーティション分割する最も合理的な方法の詳細な説明

Windows または Linux オペレーティング システムをインストールするかどうかに関係なく、...

Centos 7 mysql-8.0.19-1.el7.x86_64.rpm-bundle.tar の簡単な分析

Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...

JavaScript スネーク実装コード

この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...

CSS3で実装された3Dトンネル効果

達成された効果実装コードhtml <div class="scene"&g...

SQL 最適化チュートリアル: IN クエリと RANGE クエリ

序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...

ウェブページ作成の基本宣言文書型記述(DTD

CSS レイアウトを使用して WEB 標準に準拠した Web ページを作成することは、jb51.ne...

Viteプロジェクトを作成する手順

目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...