はじめに

1、この記事はRuoYi-Vueフレームワークを学習した後、自身でまとめた内容です。誤りや不足がある可能性があります。

2、この記事がお役に立てない場合は、他の技術ブログを参照してください。

プロジェクトファイル

RuoYi-Vue: 🎉 SpringBoot、Spring Security、JWT、Vue & Elementをベースにしたフロントエンドとバックエンドが分離された権限管理システム。Vue3バージョンも提供されています。(gitee.com)https://gitee.com/y_project/RuoYi-Vue

実行環境

Windows11 Home Edition

node.js-14.21.3、npm-6.14.8

apache-maven-3.9.6

Redis-x64-7.2.5

jdk-17.0.10

mysql-8.0.38

Visual Studio Code

IDEA（コミュニティ版ではspring boot helperプラグインのインストールが必要）/Visual Studio Code

プロジェクトの実行開始

1、Redisの起動

相対パス：Redis-7.2.5-Windows-x64-cygwin-with-Service\redis-server.exe

2、Navicatの起動

新しいデータベース「ry-vue」を作成します。

3、データベース操作

ry-vueデータベースを選択し、RuoYi-Vue-master内のSQLファイルを実行します。

相対パス：RuoYi-Vue-master\sqlフォルダ内の2つのSQLファイル

4、IDEAの起動

RuoYi-Vue-masterファイルをIDEAで開きます（コミュニティ版ではspring boot helperプラグインを先にインストールしてください）。

RuoYiApplication.javaを実行します。

相対パス：RuoYi-Vue-master\ruoyi-admin\src\main\java\com\ruoyi\RuoYiApplication.java

5、IDEAの実行成功

問題が解決されると、IDEAは実行成功を表示します。

6、VSCodeの起動

RuoYi-Vue-masterファイルをVSCodeで開きます。

7、ターミナルでの操作

メニューバーの「ターミナル」をクリックし、新しいターミナルを作成します。ターミナルに以下のコマンドを入力して実行します。

cd ruoyi-ui

npm install --registry=https://registry.npmmirror.com

npm run dev

8、VSCodeの実行成功

実行が完了すると、VSCodeは実行成功を表示し、ブラウザで自動的にWebページが開きます。

9、プロジェクトの実行成功

認証コードを入力し、ログインをクリックします。ログインに成功すると、プロジェクトの実行が成功したことになります。

注意事項

1、IDEAでのエラー

可能性1：redis-serverを閉じた可能性があります。redis-serverを開き、再度実行してください。

可能性2：Mavenが完全にロードされていない可能性があります。設定を確認し、Mavenのバージョンやパスを確認・変更または再ロードしてください。

可能性3：プロジェクト内のデータベース情報とNavicatのデータ情報が一致していない可能性があります。

2、VSCodeでのエラー：

可能性1：node_cacheとnode_globalフォルダの権限が不足している可能性があります。node.jsをインストールしたフォルダを右クリックし、プロパティを選択し、セキュリティをクリックし、編集をクリックし、すべての権限にチェックを入れ、適用をクリックし、ターミナルで再度コマンドを実行してください。

可能性2：フォルダが占有されている可能性があります。関連ソフトウェアを閉じ、キャッシュをクリアしてください。再度ターミナルでコマンドを実行してください。

可能性3：node.jsとnpmの設定に問題がある可能性があります（主にパス関連）。関連設定パスを確認してください。

3、Webページが開かれた後のエラー：

可能性1：redis-serverまたはIDEAを閉じた可能性があります。

可能性2：ポート競合の問題です。タスクマネージャで競合しているポートを閉じるか、プロジェクト内のポート番号を変更してください。

可能性3：ポートのパラメータを変更したが、気づいていない可能性があります。自身で確認してください。