技術共有

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

目次

実行例

ステップ1.npmインストール

ステップ 2. npm run dev

Softhang ドキュメント コントロールの置き換え

添付

---

Vue初心者がSofthangドキュメントコントロールVUEサンプルの実行方法とサンプル内のコントロールの置き換え処理を記録します。

実行例

VUE 環境がすでにインストールされているコンピューターでは、VUE 環境の展開について別の記事を参照できます。VUE 環境の構成中の npm エラー レポートおよび VUE 環境の構築 process_vue 環境エラー レポートの構成に関するソリューション - CSDN ブログ

ステップ1.npmインストール

npm (正式名 Node Package Manager) は、Node.js の公式パッケージ管理システムであり、Node.js モジュールの公開、検出、インストールの機能を提供します。

npmインストール

package.json ファイルを含むプロジェクト ディレクトリで npm install を実行すると、npm はファイルを読み取り、「dependency」フィールドと「devDependency」フィールドにリストされているモジュールとそのバージョン要件に基づいて、そのファイルを現在のプロジェクトに自動的にダウンロードしてインストールします。ローカルのnode_modulesディレクトリ内。

サンプル ディレクトリに切り替え、cmd コマンド ライン ウィンドウを開き、npm install を実行します。

npm installまた、開発者が依存関係のバージョン変更によって生じる競合を解決するのにも役立ちます。依存関係ツリー内のモジュールの新しいバージョンがリリースされたときに、再実行します。 npm install, npm は、プロジェクトの依存関係の一貫性を維持するために、バージョン制約ルールに基づいて互換性のある最新バージョンを解析してインストールします。

同時に、npm install の実行中に、プロジェクトで特に使用される各依存関係の正確なバージョンをロックするために使用されるロック ファイル (package-lock.json や npm-shrinkwrap.json など) が生成されます。このようにして、異なる開発環境または複数のインストールにおいて完全に一貫した依存関係ツリーを確保できるため、プロジェクトの再現性と安定性が向上します。

ステップ 2. npm run dev

プロジェクトの依存関係をインストールした後、コマンド ライン ウィンドウの現在のサンプルのルート ディレクトリで npm run dev を実行してサンプルを開始することにより、VUE プロジェクトの実行を試行できます。

npm run dev は、node.js プロジェクトで開発環境を実行することを指します。実際に実行されるのは、package.json ファイルの「scripts」セクションで定義されている「dev」コマンドです。

前述の通り、実際にnpm run devを実行するとvue-cli-serviceserveが実行されます。

通常の状況では、「dev」コマンドはローカル サーバーを起動し、ファイルの変更を監視します。ファイルの変更があると、開発者のデバッグと開発作業を容易にするためにページが自動的に更新されます。 開発プロセス中は、npm run dev を実行してプロジェクトを実行するだけで、プロセス中にファイルが変更された場合は、ブラウザーでファイルを更新するだけでプロジェクトが自動的に更新されます。

Softhang ドキュメント コントロールの置き換え

SoftHang Document Control では、約半年間のデモ版のテスト期間が設けられており、その期限が切れた場合、または SoftHang から購入して正式製品を入手した場合は、プロジェクト内のコントロールの基本情報を置き換える必要があります。

Softhang 公式から入手したコントロール置換のロジック図は次のとおりです。

フローチャートからわかるように、主な目的は、製品 cab や classid などの基本情報を置き換えることです。

VUE の例でも、置換プロセスは同様です。まず、プロジェクト内でソフト ナビゲーション コントロールを参照するコードの場所を見つけます。

例として私が入手した VUE3.0 の例を取り上げます。

src/components ディレクトリの officecontrol:editindexcom.vue ファイルでは、Softhang ドキュメント コントロールの情報 (ID、classid、高さと幅、公式の製品認証情報など) がオブジェクト タグを通じて定義されます。

Softhang は、サンプルのコードベース部分に注釈を付けています。ブラウザの自動読み込み制御が予期せず読み込みに失敗する可能性を考慮して、インストール用に exe インストール パッケージが提供されており、コード内でその必要はありません。 コード内に classid 情報を正しく記述するだけです。 次の図に示すように、classid 情報は、製品 cab パッケージ内の inf ファイルの内容から取得されます。

タクシーごとに情報が異なるため、区別するために注意する必要があります。正しく記述すれば、exe をインストールできます。間違って記述すると、コントロールが読み込まれない可能性があります。

コントロール情報を変更した後、ブラウザでサンプル ページを更新して効果を確認できます。

添付

VUE に触れる機会も少なく、あまり勉強になったこともないので、VUE プロジェクトの実行方法や使ったものを簡単に記録しておきます。

この例で使用されている SoftHang ドキュメント コントロールは、実際にはオフィス ファイルのオンライン編集ソフトウェアです。このソフトウェアを使用すると、Word、Excel、ppt、wps の関連ファイルを個別に編集する必要がなく、ブラウザ上で直接表示および編集できます。ファイルをローカルにダウンロードし、ファイルを変更してから、ビジネス システムのアップロード機能を使用してサーバーにアップロードし直すのは、比較的面倒な操作です。

さて、今日はここまでです。VUE については今後さらなる研究が必要です。まず、この Softhang ドキュメント コントロールの例を見てみましょう。