Visual Studio Vue Project

Posted on  by admin

Visual Studio project template for Vue JS 3.0 and Asp.Net Core 5.0 Web API applications. Node JS must be installed in the environment in order to run npm commands. Visual Studio 2019 16.8 or superior.

After the installation, a new project type will be available on Visual Studio. Choose the option to create a new project and search template by name:. The structure of the project looks like the image below, having the following items:.

ClientApp folderClientApp folder with the Vue JS 3.0 application, including:. Counter, Fetch Data, Nav Menu and Home components. Vue Router and Axios installed (Vue JS 3.0 version). Asp.Net Core 5.0 Web API. API Controller with Forecast API presented on the standard underlying project. All the extra needed settings on Asp.Net Core Startup file were already made as well on Startup.cs, including the mandatory packages for Vue JS SPA Middleware:.

Run the projectAfter creating the project, the only thing that you need to do is running it. If the node packages are not installed yet, the application will run npm install under the folder “ClientApp”, as seen in the following image:.

After the installation of all npm packages, the application will start as it follows:. More information on: https://medium.com/js-dojo/template-vue-js-3-0-asp-net-core-5-0-visual-studio-2019-a18dd43b076b.

In this tutorial, I am going to show you 3 ways to run your VueJS applications from Visual Studio Code. This will also work for any NPM project that has a but I am going to focus on Vue for this article. I have found that developers who are new to both NPM & Vue have some difficulty getting started so hopefully this will help.

If you're new to Node & NPM the good news is you don't need to know everything to get up and running. Whenever you see a just know that this file is there to help you manage your project.

In this file, you will find metadata about the project, packages that this project depends on and scripts that are available to run.

Here is a simple of a project created using the Vue CLI. Now that you have a brief introduction to what information the contains it's time to learn how to run our VueJS applications from Visual Studio Code.

The first way to run your VueJS applications from Visual Studio Code is the one you might have already learned about and that is by using the integrated terminal.

If you're opening up a new terminal/command prompt to run your projects this will speed things up and bring everything back to Visual Studio Code. With your project open in Visual Studio Code hit the keyboard shortcut (cmd/ctrl) + `.

The backtick is located right above the tab key on your keyboard. This will open the integrated terminal and from there you can run any script for your project. Now this is often a point of confusion for those new to VueJS and NPM in general.

What is the command that I type to start my application?

What is the command that I type to run my tests? After you have been working in Vue for a while these will become second nature but there are cases where you might inherit a project that has custom scripts.

The easiest way to find out what scripts are available is to open the and look in the scripts block. Looking at this I can tell right away that the 5 scripts I have available to me are:.

So if I want to run any of these I simply type or the name of the script you want to run. The serve script is the one that will start your application up in development mode.

The scripts block above is what a typical VueJS project will look when you create it using the Vue CLI and selecting both Unit & End to End testing. There is a chance that if you're working on an existing project there could be a bunch of custom scripts.

In a recent article, I documented the process that I used to create a new post generator that I can run to add a new blog post. In that case, I have a script so to run that I just run the command .

So that's how we run scripts from the command line but not everyone loves typing out commands every time they want to run a project.

  • With your project open the command palette by using the menu item or by using the keyboard shortcut or on Windows.
  • From there type and click on the Run Task command.
  • This will examine your project and give you a list of the available scripts to run.
  • You can click on or you can start typing the word serve and hit enter when it's selected to run it without using your mouse.
  • If you see the following options you can go here to learn more about scanning the task output.
  • If you hit continue without scanning the task output Visual Studio Code will run your task.
  • This opens up a terminal for you and runs the script.

The next time you run the task you won't be asked about scanning the output and this process becomes very quick. If you follow me on Twitter I put this tweet out promising a tip that you might not know existed.

You might not know about one of these.

We call this a teaser trailer 😉 #vuejs#npm#vscodepic.twitter.com/gSPlPtFJuk. To enable this go into your Visual Studio Code settings and add the following setting.

With your project open you will now have a NPM Scripts Explorer in the sidebar. If you click on the play icon next to the script name it will run the script for you, how awesome is that!

I hope this article was helpful in identifying and running your VueJS applications from Visual Studio Code.

There is usually more than one way to accomplish a task and not all of us have the same preferences. As always friends.. Happy CodingDan. Hello and welcome to this tutorial on Vue.JS with Visual Studio Code.

In this series of tutorials, we will see how we can work with Vue.JS with VS Code and learn more about Vue.JS.

Note: Live demo video down below. Its a front end JS library like Angular or React.

It is getting very popular lately with a huge amount of support and plugins that can be used along with it. Like Angular or React, it has component model system, routing, state management and many other features you want to find in a UI framework. But, it’s main advantage it does not come shipped with all the libraries in the framework instead you select what you need to use.

For instance if you need state management you will need to install the vuex package. Same for routing.