前面に書かれた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 が選択されました。
予防
開発環境構築1. Vue-cli 3.x をグローバルにインストールします (すでにインストールされている場合はスキップしてください)
Taobaoミラーがインストールされている場合は、cnpmインストールを使用することをお勧めします。
2. CLI経由でユニアプリプロジェクトを作成する
3. VsCodeを使用してプロジェクトを開く 4. Vue構文プロンプトプラグインをインストールする Vscodeプラグインマーケットで構文プロンプトプラグインをインストールします。ここでは、実用的なプラグインをいくつか紹介します。
5. UNI-APP構文プロンプトをインストールする
6. HXカスタムコードブロックをインポートする github から uni-app コード ブロックをダウンロードし、プロジェクト ディレクトリの下の .vscode ディレクトリに配置すると、HBuilderX と同じコード ブロックが作成されます。
よく使用するコードブロックをカスタマイズすることもできます 7. プロジェクトの実行と公開VSCodeの左エクスプローラー/NPMスクリプトのクイックスタートコマンドからプロジェクトを実行および公開できます。 プロジェクトを実行する
プロジェクトを公開する
%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へのご支援をお待ちしております。
<<: MySQL ストアド プロシージャのエラー処理例の詳細な説明
>>: Keepalived は Nginx の負荷分散と高可用性のサンプル コードを実装します
クイックスタート1. Docker Hubでnginxイメージを見つけるdocker 検索 ngin...
この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...
この記事では、シャトルボックス効果を実現するためのjQueryの具体的なコードを参考までに紹介します...
この記事では、Windows Server オペレーティング システムのインストールと企業でのそのア...
テーブル ヘッダーでは、明るい境界線の色を個別に定義できます。基本的な構文<TH ボーダーカラ...
1: アドレス書き換えとアドレス転送の意味を理解する。アドレス書き換えとアドレス転送は異なる...
nginx の設定命令のスコープは、main、server、location の 3 種類に分けられ...
1. MySQLがインストールされているかどうかを確認する yum インストール済みリスト | gr...
Windows または Linux オペレーティング システムをインストールするかどうかに関係なく、...
Baiduクラウドディスク:リンク: https://pan.baidu.com/s/1hv5rUW...
この記事の例では、参考までに貪欲なスネークを実装するためのJavaScriptの具体的なコードを共有...
達成された効果実装コードhtml <div class="scene"&g...
序文「High Performance MySQL」では、インデックスでは範囲フィールドの後の部分が...
CSS レイアウトを使用して WEB 標準に準拠した Web ページを作成することは、jb51.ne...
目次序文yarn create は何をしますか?ソースコード分析プロジェクトの依存関係テンプレート構...