vscode はユニアプリを使用できますか?

vscode では、uni-app という具体的な方法を使用できます: 1. vue 構文プロンプト プラグイン vetur をインストールします; 2. 「npm i @dcloudio/uni-helper-json」コマンドを実行してコンポーネントをインストールします構文プロンプト; 3. HBuilderX に付属する Uni-App コードをダウンロードしてインポートします。

このチュートリアルの動作環境: Windows 7 システム、Visual Studio Code バージョン 1.45.1.0、DELL G3 コンピューター。

uni-app は、vue 構文を使用して小さなプログラム、アプリ、H5 を開発するフレームワークです。公式に推奨される開発ツールは HBuilderX で、優れた開発エクスペリエンスを提供します。

ただし、HBuilderX には Linux バージョンがなく、多くのフロントエンドはこれまで vscode に慣れていたため、エディタを変更したくありません。 vscode を直接使用してユニアプリを開発すると、エクスペリエンスはあまり良くありません。

実は、uni-app と vscode も相性が良いので、次に、vscode で uni-app を開く正しい姿勢を紹介します。

CLI プロジェクト

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

npm install -g @vue/cli

CLI 経由でuni-app プロジェクト

vue create -p dcloudio/uni-preset-vue my-project

この時点で、プロジェクト テンプレートを選択するように求められます。初めての場合は、hello uni-app を選択することをお勧めします。以下に示すプロジェクト テンプレート:

vscode でプロジェクトを開きます

# vue 構文プロンプト プラグイン vetur

CLI プロジェクトには、デフォルトで uni-app 構文プロンプトと 5 つの App 構文プロンプトが付属しています

##インストール コンポーネント構文プロンプト

コンポーネント構文プロンプトは、uni-app のハイライトであり、他のいくつかのフレームワークでは提供できません。

npm i @dcloudio/uni-helper-json

HBuilder に付属のコード ブロックをインポートしますX

github からダウンロード

uni-app コード ブロック

をプロジェクト ディレクトリの下の .vscode ディレクトリに配置して、HBuilderX と同じコード ブロックを持たせます。

プロジェクトの実行

npm run dev:%PLATFORM%

プロジェクトの公開

npm run build:%PLATFORM%

%PLATFORM%

可能な値は次のとおりです:

ValuePlatformh5H5mp-alipayAlipay ミニ プログラムBaidu ミニ プログラムWeChat ミニ プログラムToutiao ミニ プログラムqq ミニ プログラム

	# mp-baidu
	mp-weixin
	mp- toutiao
	mp-qq
	CLI 方式参考文档 HBuilderX 工程 HBuilderX 创建的工程默认不带 types 语法提示，在 vscode 中编辑的时候，可以自行安装 初始化npm（如已初始化跳过此步骤） npm init -y 安装 uni-app 语法提示 npm i @types/uni-app @types/html5plus -D 另外，uni-app 项目下的 manifest.json、pages.json 等文件可以包含注释。vscode 里需要改用 jsonc 编辑器打开。 关于uni-app插件市场的插件，vscode一样可以使用。 如果这些插件有npm使用方式（如uni-ui），可以用npm 如果作者没提供npm方式，那么下载zip包解压也是可以用的 【相关推荐：《uniapp教程》、《vscode教程》】

以上がvscode はユニアプリを使用できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。