Vue Project Setup

<< Click to Display Table of Contents >>

Navigation:  Analogues > Vue.js >

Vue Project Setup

Installing Node.js

 

To create a React application, you first need to download and install Node.js from the official website.

 

Make sure to install the version appropriate for your operating system and leave all installation settings as default. Node.js is required for React development, including project building and dependency management.

 

To verify that Node.js and npm were installed successfully, open CMD or PowerShell and run the following commands:

 

node -v

npm -v

 

AD_4nXfRPyc-dO7rDheY5gE552wY43oNtw5QpjwPbqCiNBAQY9bUIcmMLR4SC9aNJF-r4nyP1PGwW6qqTCyBfu3MQpTGEMxZd0ZPRytixnD1lUCrzCAdP8kMly84XgO36W4s8cOp4YfygQ

 

Install Vue CLI

 

Enter the following command:

 

npm install -g @vue/cli

 

Once the installation starts, it may take a short time to complete.

 

After it finishes, you can check the installed version with:

 

vue --version

 

AD_4nXcGmC0aUNxKbUilt3LZ469W_V4DY8jzlgBXIdTv454gJxzmnyO78_VZf8DNnrRu_BfZ2wS_8ElNVYfqfwMX0fptooG8BdhmmruBmuGyQjNk8d9jr-j9c9K7EVUmJ9ju9hVTQPhC

 

Create a New Project

 

Now run the following command to create a new Vue project (e.g., guess-game-vue):

 

vue create guess-game-vue

 

This will start the Vue project setup process in your terminal:

 

1.For our task, it’s enough to choose the default configuration:

Default ([Vue 3] babel, eslint) — just press Enter when prompted.

 

AD_4nXfmpeD7W5gec-xxS4PlJzI8m87ZImUQdyD27gV0Ij1bWmnsCPHsIDXi0ulkhrkLHHdQ6SljzR2E7DHMs0mf0MqoUejqSZKNGL3o_1qtD0gGe3ZIrAbPQ9l85CIWuQPAZeBHl-2c1Q

 

2.Next, you'll be asked to choose a package manager.

Select the option: Use NPM

 

AD_4nXcCcgJritrpYCBGNmeY2Og7rn1zPe0c5-1gSvCbS2hj3Us0HZO_wC1wIgvMSatsXRhLJ5seX1YOs2PGl2I4A7klbBIAELZuw4zB4dDc0nz1-Std0KOlgxccDtSoGRlbyk6DukJdZg

 

3.The CLI will then install the necessary dependencies. This may take 1–2 minutes.

 

When complete, you should see a success message indicating that the project is ready.

 

AD_4nXeaz9cx6f3PxJ3iV6Wji3rk4WtM0pX4ttVx0YSRP42ppACMbPHxM5p2JiD2OQbMBNn-nrDgPjH4tiotpW3ZFDr2aWBYfm1dtmzNN5BASmI5yC3_xu5DXUQE_5lUiUJj6ZXpjVKOBg

 

Start the Local Development Server

 

Navigate into your project directory (e.g., guess-game-vue):

 

cd guess-game-vue

 

Then start the local development server:

 

npm run serve

 

If everything is correct, the application will be available in your browser at http://localhost:8080/.

 

You should see the default Vue welcome page.

 

AD_4nXcsLazVyNvtF67bPGxj8vsKIB6hB7ezAl57ICljkNaFergAQz_mIbjSPXC33Itt3NLdaBWPOvWcd9J-Wpt5tmWCOlDY42HEtCgbkiH1-QCryEFGmvdTKbg-aFCWbZYm-dn9ThI4Mg

 

To stop the development server at any time, press Ctrl + C and then Y to confirm.

 

Open the Project and Find the Application Code

 

To explore and edit the source files, open the project folder in File Explorer by running:

 

explorer .

 

Now you have access to the full project structure.

 

clip0126

 

Navigate to the src folder, where you will see all the source files of the project.

 

clip0138