Setup

This guide focuses on getting the Vue project up and running. Continue with Top Level and the rest of the Vue guides for a deep dive into the code and structure.

Getting Started

Extract the vue project folder to wherever you want to manage the project on your computer. The Vue project has no dependencies on the backend. Its best to manage it separately with its own source control.

Install NPM packages

Open a terminal window within the same directory and run the following command:

npm install

Node package manager (NPM) will install all the necessary dependencies, which usually takes 1-2 minutes. Package dependencies are stored in node_modules.

Run the Application

Run the application with the following command:

npm run serve

The script will run the application will run at http://localhost:3000/ in development mode.

When the app is running in development mode, it will use https://localhost:7250/ as the API URL. This means that the .NET Web API must be running for things to work.

Build for Production

To create an optimized build version of the app for publishing, run the following command:

npm run build

This script will output build files in a new folder called dist.

Move all the files from the dist folder into the wwwroot folder in the AspNano.WebApi project (overwrite any existing files). These files will serve as the UI when the .NET application is published.

Next Steps

Continue on to learn about the Vue project code and structure starting with Top Level.