vue プロジェクトを gitee にデプロイする方法

フロントエンド テクノロジーの発展に伴い、フロントエンド プロジェクトの開発に Vue を使用する企業や個人が増えています。しかし、プロジェクトの開発が完了した後、それをどのようにクラウドにデプロイするのでしょうか?

この記事では、Vue プロジェクトを Gitee にデプロイして、プロジェクトを簡単に世界に公開できるようにする方法を説明します。

1. Gitee リポジトリの作成

まず、Vue プロジェクトのコードを保存するためのリポジトリを Gitee 上に作成する必要があります。 Gitee アカウントをまだお持ちでない場合は、まずアカウントを登録してください。

Gitee にログインし、右上隅の [新規] ボタンをクリックし、ドロップダウン メニューで [新しいウェアハウス] を選択します。

新しいページで、リポジトリ名、説明、選択したカテゴリを入力し、「パブリック」または「プライベート」アクセスを選択し、その他の設定 (プロジェクト言語など) を追加します。

必要な情報をすべて入力し、正しいことを確認したら、[ウェアハウスの作成] をクリックします。

2. Vue プロジェクトをローカルに作成する

Gitee 上にウェアハウスを作成した後、Vue プロジェクトをローカルに作成する必要があります。

コマンド ラインに次のコマンドを入力して、Vue CLI を使用して新しい Vue プロジェクトを作成します:

vue create <app-name>

次に、必要な構成のタイプを選択し、プロジェクトの作成が完了するまで待ちます。

プロジェクトが作成されたら、次のコマンドを使用してローカル開発サーバーを起動します:

npm run serve

これにより、Vue アプリケーションを表示およびテストできるローカル サーバーが起動します。

3. ローカル リポジトリと Gitee リポジトリの接続

ローカル Vue プロジェクトと Gitee リポジトリを作成しましたが、まだ接続されていません。

ローカル Vue プロジェクトのディレクトリで、コマンド ラインを開いて次のコマンドを入力します。

git init

これにより、新しいローカル Git リポジトリが作成されます。次に、このローカル リポジトリを Gitee リポジトリに関連付ける必要があります。

コマンド ラインに次のコマンドを入力します:

git remote add origin <远程仓库地址>

ここで、<リモート ウェアハウス アドレス> は、Gitee で作成したウェアハウス アドレスである必要があります。

これで、ローカル リポジトリとリモート Gitee リポジトリが正常に関連付けられました。

4. ローカル ファイルを Gitee リポジトリにアップロードする

このステップでは、ローカル Vue プロジェクトのコードを Gitee リポジトリにアップロードする必要があります。

ローカルおよび Vue プロジェクト ディレクトリで、次のコマンドを使用してコードを追加し、ローカル Git リポジトリにコミットします。

git add .
git commit -m "Initial commit"

これにより、Vue アプリケーションとフォルダーのすべてのファイルが配置されます。 Git のローカル リポジトリにコピーしてコミットします。

次に、次のコマンドを使用して、すべてのローカル変更をリモート Gitee リポジトリにプッシュします。

git push -u origin main

これにより、Vue プロジェクト コードが Gitee 上に作成したリポジトリにプッシュされます。アップロードしたら、Gitee でプロジェクト コードを表示できます。

5. Vue プロジェクトをデプロイする

これで、Vue プロジェクトが Gitee リポジトリにアップロードされました。導入方法は次のとおりです。

Gitee リポジトリで、[設定] ボタンをクリックし、[ページ] タブを選択します。

[ページ] タブでは、Vue プロジェクトの Gitee Pages サービスを有効にすることができます。

まず、「ソース」ドロップダウン メニューを選択し、そこにある「gh-pages」ブランチを選択します。次に、「保存」ボタンを選択して変更を保存します。

ページの上部にプロジェクトの URL が表示されます。これで、Vue プロジェクトが正常にデプロイされ、この URL を通じてアクセスできるようになりました。

6. Vue プロジェクトの更新

Vue プロジェクトを Gitee にデプロイした後、更新または変更が必要になる場合があります。次の手順に従って更新できます:

まず、ローカル Vue プロジェクトのディレクトリで次のコマンドを実行して最新のコードを取得します:

git pull origin main

これにより、最新のコードがダウンロードされ、マージされます。ローカルリポジトリにコピーします。

次に、変更を Gitee リポジトリにアップロードします。

git add .
git commit -m "Your commit message"
git push origin main

これで、更新が Gitee に正常にアップロードされ、Vue プロジェクトに有効になりました。

概要:

このチュートリアルでは、Vue プロジェクトを Gitee にデプロイする方法を説明しました。 Gitee にリポジトリを作成し、ローカル Vue プロジェクトを Gitee リポジトリに接続していることを確認してください。次に、ファイルを Gitee リポジトリにアップロードし、Gitee Pages サービスを有効にすると、Vue プロジェクトを簡単にデプロイできます。

以上がvue プロジェクトを gitee にデプロイする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。