【utools】vue2開発関連utoolsプラグインプロジェクト（nannyスタイルの詳細紹介）

序文

utools は非常に使いやすいソフトウェアで、シンプルなツール、特に情報を構造化して保存するためのいくつかのプラグインによって生産性が大幅に向上しました。したがって、私も utools 市場に貢献し、私が必要とする、使いやすく、シンプルで、他の人のニーズを満たす可能性がある utools プラグインを開発したいと考えています。そこで私は 15 日間をかけて、バグ情報を構造的に記録するための「バグ ノート」を開発しました。[2023.1.16 - 2023.1.21]。
この過程で、utools プロジェクト構成の初期化、vue2 と utools プロジェクトの互換性、utools プロジェクトのデプロイとリリースに関連するいくつかの問題が発生し、それらを解決するのにある程度の時間がかかりました。この経験をここで共有することで、初めて utool を開発する他の小規模パートナーを助けることができれば幸いです。

PS: 要件は、nodejs の vue2 フレームワークに基づいて開発されます。

utools プロジェクト構成を初期化する

0. utools公式開発者ツールプラグインをダウンロード

1. vue2 プロジェクトを初期化します [あまり詳しくはありません]

2. dist ディレクトリを作成します [npm run build によってパッケージ化されたディレクトリで、事前に作成し、新しいファイルを 2 つ作成します] 2.1
plugin.json ファイルは、utools が独自のプロジェクトにアクセスするための初期化ファイルです。
2.2 preload.js は次の目的で使用されます。 preloading ロード中は一時的に処理できませんが、それについては後ほど説明します

3. Plugin.json 設定リファレンス
注:
(1) 関連する 3 つのファイル、index.html、logo.png、および preload.js は、plugin.json と同じディレクトリにある必要があります。つまり、plugin.json と同じディレクトリに配置される必要があります。 package.json、リリースしてパッケージ化する場合は、dist パッケージ ファイルに含める必要があります。utool の識別と組み立てに使用されます。
(2) 開発中のメイン エントリにより、utools は独自のポート 8080 にアクセスできます。フロントエンド プロジェクトを実行した後、utools は vue プロジェクトを動的にアセンブルできます [webpack で使用] (3) features の主な機能は、キーワードを設定することです
。ツール。

{
    
    
	"main": "index.html",
	"logo": "logo.png",
	"preload": "preload.js",
	"platform": ["win32", "darwin", "linux"],
	"development": {
    
    
		"main":"http://127.0.0.1:8080"
	},
	"features": [
		{
    
    
			"code": "bugCollection",
			"explain": "个人的异常错误收集仓库",
			"cmds":["错误笔记", "虫子笔记", "异常笔记", "bug笔记"]
		}
	]
}

このとき、plugin.json、logo.png、preload.js を package.json と同じディレクトリに配置します。これにより、開発プロセス中に utools が動的にアクセスできるようになります [即時にレンダリングされ、開発効果が確認できます]

4. これでプロジェクトの初期化は終了です。開発が完了し、開発効果が満足できるものになったら、HelloWord プロジェクトを dist ファイルにパッケージ化してみます [plugin.json、preload.js、logo.png は内部に含まれませんnpm run build。次に、
plugin.json を utools に渡して、独自のプロジェクトを開きます。
PS: vue2 プロジェクトはパッケージング構成に注意する必要があります。デフォルトのパッケージング構成では空白のページが表示されます。

• 構成を変更します。これは dev の下で必要でありassetsPublicPath: /、 build の下でも必要ですassetsPublicPath: ./。

• npm run build パッケージ、dist プロジェクト

• plugin.json を見つける

• 開発者ツールでplugin.jsonを指定して実行を開始する

• 設定したキーワードに従ってプロジェクトを開きます。

Vue2はutoolsと連携します

開発ノート

1. utools には HTML を解析できるエンジンが付属しているため、utools プラグインは Web プロジェクトにすることができ、開発者ツールのデバッグに使用できます (F12)。まずそれを検索し、ctrl+D 独立ウィンドウの後にデバッグします。

2. ElementUI が表示できない場合は、ここを変更してください

3. 写真を表示するには、アセットを介して保存することをお勧めします

4. plugin.json はポート 8080 をリッスンしているため、開発プロセスは通常の開発と一致しており、npm run dev の後、utools で直接開かれます。

5. 言及する価値のある 2 つの点: utools によって表示される #app の高さは約 540 ピクセルであり、幅は無視できます。スクロール ホイールは utools に付属のスクロール ホイールで覆われ、スクロール ホイールへの変更は無効になります。
PS: 解決策 2、つまり自己適応の方が実際には優れています。HTML
、body {height: 100%;} スタイルを App.vue に追加するだけです。

シナリオ 2:

utoolsが提供するAPIを利用します

上で説明した preload.js を思い出してください。これはプリロード ファイルであり、plugin.json でプリロード ポイントも構成しました。utools はプロジェクトをロードする前に js スクリプト コンテンツを preload.js にロードします。また、utools インスタンスとウィンドウ インスタンスも utools します。 preload.js が実行される前にマウントされ、その API が使用できるようになります。詳細については、公式ドキュメントの preload.js セクションを参照してください。
公式ドキュメント:https://u.tools/docs/developer/preload.html

preload.js のリファレンスは次のとおりです。

window.test = function() {
    
    
	//utools实例可以直接使用
    utools.db.put({
    
    
        id: "demo",
        data: "demo"
    });
    const demo = utools.db.get("demo");
    console.log(demo);
    const tmp = utools.db.put({
    
    
        _id: "demo",
        data: "demo"
    });
    console.log(tmp);
}

通常、グローバル関数はウィンドウインスタンスを通じて実装され、関数内で業務（永続データや追加、削除、変更、確認など）を実現します。グローバル関数は、vue ファイル内のどこからでも呼び出すことができます。

データの永続性

公式ドキュメントの utools DB API で直接使用できます。
私は、より便利なutools.dbStorage.setItem(key, value)とを使用することを好みますutools.dbStorage.getItem(key)。もちろん、ドキュメントでも使用します。

utool のデプロイとリリース

0. dist 内のデバッグに使用される .js.map ファイルと .css.map ファイルを削除します。削除しないと、監査に合格しません。

1. utools インターフェイスで開発モードで開くことができる限り、upx ファイルにパッケージ化する必要があります。

2. パッケージ化された upx を utools ボックスにドラッグした後、utools にインストールできます。

3. インストール後に問題がなければ、utools 開発者ツールで市場へのリリースを申請できます

エピローグ

utools フロントエンドの開発は面倒でスタイル処理に時間がかかりますが、データフローに関しては js スクリプトと utools が提供する便利な API を利用することでデータの永続化や転送をうまく実現できます。もちろん、最も重要なのはアイデアであり、自分が必要とし、他の人も必要とする可能性のあるプラグインを開発することが最も素晴らしいことです。