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% に指定できる値は次のとおりです。

前面に書かれた

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へのご支援をお待ちしております。

以下もご興味があるかもしれません: