Setup

Extract the vue project folder to a location on your computer. The Vue project has no dependencies on the backend; it can be managed separately with its own source control.

Install NPM packages

Open a terminal window and run the following command:

npm install

Node package manager (NPM) will install the necessary dependencies and store them in node_modules.

Run the Application

Run the application with the following command:

npm run serve

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

When the app is running in development mode, it will use the .NET solution https://localhost:7250/ as the API URL.

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.