How to deploy vue project to gitee

With the development of front-end technology, more and more companies or individuals are beginning to use Vue to develop front-end projects. However, after the project development is completed, how to deploy it to the cloud?

In this article, we will explore how to deploy your Vue project to Gitee, allowing you to easily show your project to the world.

1. Create a Gitee repository

First, you need to create a repository on Gitee to store the code of your Vue project. If you don't have a Gitee account yet, please register one first.

Log in to Gitee and click the "New" button in the upper right corner, and select "New Warehouse" in the drop-down menu.

In the new page, enter your repository name, description and selected category, select "Public" or "Private" access, and add other settings (such as project language, etc.).

Once you have entered all the necessary information and confirmed it is correct, click "Create Warehouse".

2. Create a Vue project locally

After creating the warehouse on Gitee, we need to create a Vue project locally.

Enter the following command at the command line to create a new Vue project using the Vue CLI:

vue create <app-name>

Then, select the type of configuration you want and wait for the project creation to complete.

After the project is created, start the local development server using the following command:

npm run serve

This will start a local server where you can view and test your Vue application.

3. Connecting the local repository and the Gitee repository

Now we have created the local Vue project and the Gitee repository, but they are not connected together yet.

In the directory of the local Vue project, open the command line and enter the following command:

git init

This will create a new local Git repository. Next, we need to associate this local repository with the Gitee repository.

Enter the following command on the command line:

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

where should be the warehouse address you created on Gitee.

Now, we have successfully associated the local repository with the remote Gitee repository.

4. Upload local files to the Gitee repository

In this step, we need to upload the code of the local Vue project to the Gitee repository.

Locally and in the Vue project directory, use the following command to add your code and commit it to the local Git repository:

git add .
git commit -m "Initial commit"

This will put all the files of your Vue application and folder to Git's local repository and commit it.

Next, use the following command to push all local changes to the remote Gitee repository:

git push -u origin main

This will push your Vue project code to the repository you created on Gitee. Once uploaded, you can view your project code on Gitee.

5. Deploy the Vue project

Now, we have uploaded the Vue project to the Gitee repository. Here's how to deploy it.

In the Gitee repository, click the "Settings" button and select the "Pages" tab.

In the "Pages" tab, you can enable the Gitee Pages service for your Vue project.

First, select the "Source" drop-down menu and select the "gh-pages" branch there. Then, select the "Save" button to save your changes.

At the top of the page you will see the URL for your project. Now you have successfully deployed your Vue project and can access it through this URL.

6. Update Vue Project

After deploying your Vue project to Gitee, you may need to update or modify it. You can update by following these steps:

First, in the directory of your local Vue project, run the following command to get the latest code:

git pull origin main

This will download the latest code and Merge into your local repository.

Next, upload your changes to the Gitee repository:

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

Now, your updates have been successfully uploaded to Gitee and are effective on your Vue project.

Summary:

In this tutorial, we demonstrated how to deploy your Vue project to Gitee. Please make sure you have created a repository on Gitee and connected your local Vue project with the Gitee repository. Next, upload the file to the Gitee repository, enable the Gitee Pages service, and you can easily deploy your Vue project.

The above is the detailed content of How to deploy vue project to gitee. For more information, please follow other related articles on the PHP Chinese website!