Visual Studio Vue

Posted on  by admin
-->

Applies to: Visual Studio Visual Studio for Mac

In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create and run a simple Vue.js web application.

Support for Script, Style, and Template blocks in .vue files.

Recognition of the lang attribute on .vue files. Vue.js project and file templates. You must have Visual Studio 2017 version 15.8 or a later version installed and the Node.js development workload.

Prerequisites

  • This article requires features that are only available starting in Visual Studio 2017 version 15.8.

    If a required version is not already installed, install Visual Studio 2019. If you haven't already installed Visual Studio, go to the Visual Studio downloads page to install it for free.

    If you need to install the workload but already have Visual Studio, go to Tools > Get Tools and Features.., which opens the Visual Studio Installer.

    Choose the Node.js development workload, then choose Modify. To create the ASP.NET Core project, you must have the ASP.NET and web development and .NET Core cross-platform development workloads installed.

  • You must have the Node.js runtime installed.

    If you don't have it installed, install the LTS version from the Node.js website. In general, Visual Studio automatically detects the installed Node.js runtime. If it does not detect an installed runtime, you can configure your project to reference the installed runtime in the properties page. (After you create a project, right-click the project node and choose Properties).

    These steps assume that you already have some experience with the Vue.js framework. If not, please visit Vue.js to learn more about the framework. Open Visual Studio and create a new project. In Visual Studio 2019, choose Create a new project in the start window. If the start window is not open, choose File > Start Window. Type web app, choose C# as the language, then choose ASP.NET Core Empty, and then choose Next.

Create a project

First, you'll create a Vue.js web application project.

  1. On the next screen, name the project client-app, and then choose Next. Choose either the recommended target framework or .NET 6, and then choose Create.

    From the top menu bar, choose File > New > Project.

  2. In the left pane of the New Project dialog box, expand Visual C#, then choose Web.

  3. In the middle pane, choose ASP.NET Core Web Application, type the name client-app, and then choose OK.

    Select Empty, and then click OK. Visual Studio creates the project, which opens in Solution Explorer (right pane). If you don't see the ASP.NET Core Web Application project template, you must install the ASP.NET and web development workload and the .NET Core development workload first.

    To install the workload(s), click the Open Visual Studio Installer link in the left pane of the New Project dialog box (select File > New > Project). The Visual Studio Installer launches. Select the required workloads.

    Open the file ./Startup.cs, and add the following lines to the Configure method:. Go to your command prompt and change the current directory to your project root folder.

    Type vue init webpack client-app and follow steps when prompted to answer additional questions.

  4. For .vue files, you need to use WebPack or a similar framework with a loader to do the conversion.

  5. TypeScript and Visual Studio does not know how to compile .vue files. The same is true for bundling; TypeScript doesn't know how to convert ES2015 modules (that is, import and export statements) into a single final .js file to load in the browser.

    Again, WebPack is the best choice here. To drive this process from within Visual Studio using MSBuild, you need to do start from a Visual Studio template.

Explore the IDE

  1. At present, there is no ASP.NET template for Vue.js development in-the-box.

    • Open the file ./client-app/config/index.js, and change the build.index and build.assetsRoot to wwwroot path:. In Visual Studio, go to Project > Properties > Build Events.

    • On Pre-build event command line, type npm --prefix ./client-app run build. Open the file ./client-app/build/webpack.base.conf.js, and add the following properties to the output property:.

    • Go to your command prompt and change the current directory to the project root folder. Type vue create client-app, and then choose Manually select features.

  2. Choose Typescript, and then select other desired options. Follow the remaining steps and respond to the questions. Open the file ./client-app/tsconfig.json and add noEmit:true to the compiler options.

Add a .vue file to the project

  1. By setting this option, you avoid cluttering your project each time that you build in Visual Studio.

  2. Next, create a vue.config.js file in ./client-app/ and add the following code. The preceding code configures webpack and sets the wwwroot folder.

    lang attribute only supports JavaScript and TypeScript languages.

Build the project

  1. The accepted values are: js, jsx, ts, and tsx. lang attribute doesn't work with template or style tags.

  2. Debugging script blocks in .vue files isn't supported due to its preprocessed nature.

  1. TypeScript doesn't recognize .vue files as modules. You need a file that contains code such as the following to tell TypeScript what .vue files look like (vue-cli 3.0 template already includes this file).

  2. Running the command npm run build as a pre-build event on the project properties doesn't work when using vue-cli 3.0.

  3. Vue get started guide. Vue CLI project. Webpack configuration documentation.

The JavaScript Vue.js project template (and older versions of the TypeScript template) use the build npm script by configuring a post build event. If you want to modify this setting, open the project file (.njsproj) from Windows Explorer and locate this line of code:

Run the application

  1. Vue.js is a popular JavaScript library for building web application user interfaces and Visual Studio Code has built-in support for the Vue.js building blocks of HTML, CSS, and JavaScript.

    For a richer Vue.js development environment, you can install the Vetur extension which supports Vue.js IntelliSense, code snippets, formatting, and more.

    We'll be using the Vue CLI for this tutorial.

    If you are new to the Vue.js framework, you can find great documentation and tutorials on the vuejs.org website.

  2. To install and use the Vue CLI as well as run the Vue application server, you'll need the Node.js JavaScript runtime and npm (the Node.js package manager) installed.

Congratulations on completing this Quickstart! We hope you learned a little bit about using the Visual Studio IDE with Vue.js. If you'd like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

Next steps