コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ > 開発ツール > VSCode > vscode はユニアプリを使用できますか?

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

青灯夜游
リリース： 2023-01-13 00:40:59
オリジナル
13470 人が閲覧しました

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

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

このチュートリアルの動作環境: 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 はユニアプリを使用できますか?

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

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

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

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

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

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

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

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

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

npm i @dcloudio/uni-helper-json
ログイン後にコピー

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

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

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

github からダウンロード

uni-app コード ブロック

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

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

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

プロジェクトの実行vscode はユニアプリを使用できますか?

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 编辑器打开。

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

关于uni-app插件市场的插件，vscode一样可以使用。

  • 如果这些插件有npm使用方式（如uni-ui），可以用npm
  • 如果作者没提供npm方式，那么下载zip包解压也是可以用的

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

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

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

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

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

【相关推荐：《uniapp教程》、《vscode教程》】

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

関連ラベル：
uni-app vscode
ソース：php.cn
前の記事：【超おすすめ】VSCode拡張最新まとめ！ 次の記事：VSCode でおすすめの実用的なフロントエンド プラグイン (概要)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...
から 2024-04-06 21:21:07
0
1
474
私のページには HTML にタイトルがありますが、表示されません 私はコーディングを始めたばかりなので、私を批判しないでください。 vscodeを使用してWebサイトを作成しようとしています。HTMLとCSSを使用していますが、コードの左上隅に配...
から 2024-04-01 18:24:53
0
1
364
VSCode id 属性をカスタマイズするにはどうすればよいですか? 最近 Atom から VSCode に移行しました。エディタの大部分を自分の好みに合わせてカスタマイズすることができましたが、気に入っている Atom の機能がまだ欠けています。そ...
から 2024-03-31 14:13:45
0
1
373
/bin/sh: 1: C:xamppphpphp.exe: 見つかりません 私はWSL2、Ubuntu20.04を使用し、VSCodeを実行しています。 Windows 上の VSCode および XAMPP で CodeRunner 拡張機能を使用してお...
から 2024-03-31 09:10:37
0
1
333
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート