Vue Starter App

Posted on  by admin
  • Vue‘s starter app, extended by Begin-based API endpoints.
  • Deploy your own clone of this app to Begin!

Quickstart – basics on working locally, project structure, deploying, and accessing your Begin app. Creating new routes – basics on expanding the capabilities of your app.

GitHub

Head to docs.begin.com to learn more! See the Vue configuration reference.

This article requires the Vue.js template, which is available starting in Visual Studio 2017 version 15.8.

You must have Visual Studio installed and the Node.js development workload. If you haven't already installed Visual Studio 2019, go to the Visual Studio downloads page to install it for free.

If you haven't already installed Visual Studio 2017, 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.

You must have the Node.js runtime installed. If you don't have it installed, we recommend you install the LTS version from the Node.js website for best compatibility with outside frameworks and libraries.

Node.js is built for 32-bit and 64-bit architectures. The Node.js tools in Visual Studio, included in the Node.js workload, support both versions.

Deploy your own

Only one is required and the Node.js installer only supports one being installed at a time.

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, choose Properties, and set the Node.exe path).

Making a couple of changes

You can use a global installation of Node.js or you can specify the path to a local interpreter in each of your Node.js projects.

If you don't have the Node.js runtime already installed, install the LTS version from the Node.js website. For more information, see the prerequisites.

Open Visual Studio. Create a new project.

Getting started

Press Esc to close the start window. Type Ctrl + Q to open the search box, type Basic Vue.js, then choose Basic Vue.js Web application (either JavaScript or TypeScript).

Installation

In the dialog box that appears, type the name basic-vuejs, and then choose Create.

From the top menu bar, choose File > New > Project. In the left pane of the New Project dialog box, expand JavaScript or TypeScript, then choose Node.js. In the middle pane, choose Basic Vue.js Web application, type the name basic-vuejs, and then choose OK.

If you don't see the Basic Vue.js Web application project template, you must add the Node.js development workload.

For detailed instructions, see the Prerequisites. Visual Studio creates the new project.

A clearer Vue

The new project opens in Solution Explorer (right pane). Check the Output window (lower pane) for progress on installing the npm packages required for the application.

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

index.html

In Solution Explorer, open the npm node and make sure that all the listed npm packages are installed.

If any packages are missing (exclamation point icon), you can right-click the npm node and choose Install Missing npm Packages. Take a look at Solution Explorer in the right pane.

src/main.js

Highlighted in bold is your project, using the name you gave in the New Project dialog box.

On disk, this project is represented by a .njsproj file in your project folder.

At the top level is a solution, which by default has the same name as your project. A solution, represented by a .sln file on disk, is a container for one or more related projects.

The npm node shows any installed npm packages. You can right-click the npm node to search for and install npm packages using a dialog box. If you want to install npm packages or run Node.js commands from a command prompt, right-click the project node and choose Open Command Prompt Here.

src/App.vue

In Solution Explorer, right-click any folder such as the src/components folder, and then choose Add > New Item.

Select either JavaScript Vue Single File Component or TypeScript Vue Single File Component, and then click Add. Visual Studio adds the new file to the project.

Next, choose Build > Build Solution to build the project. Check the Output window to see build results, and choose Build from the Show output from list. (TypeScript project only) From Visual Studio, choose Build > Clean Solution.

Next, choose Build > Build Solution to build the project.

Check the Output window to see build results, and choose Build from the Show output from list.

Press Ctrl+F5 (or Debug > Start Without Debugging) to run the application. In the console, you see a message Starting Development Server.

Then, the app opens in a browser. If you don't see the running app, refresh the page. Close the web browser. Let’s start with a quick tour of Vue’s data binding features.

src/components/HelloWorld.vue

If you are more interested in a high-level overview first, check out this blog post.

The easiest way to try out Vue.js is using the JSFiddle Hello World example.

Feel free to open it in another tab and follow along as we go through some basic examples.

If you prefer downloading / installing from a package manager, check out the Installation page. {{ todo.text }} . {{ todo.text }}. I hope this gives you a basic idea of how Vue.js works.

I’m sure you also have many questions now - read along, and we will cover them in the rest of the guide. Caught a mistake or want to contribute to the documentation?Edit this page on Github!

Now let's introduce Vue, the third of our frameworks. In this article we'll look at a little bit of Vue background, learn how to install it and create a new project, study the high-level structure of the whole project and an individual component, see how to run the project locally, and get it prepared to start building our example.

Familiarity with the core HTML, CSS, and JavaScript languages, knowledge of the terminal/command line. Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to the underlying DOM structure.

Project structure

For installation, and to use some of the more advanced features of Vue (like Single File Components or render functions), you'll need a terminal with node + npm installed.

Vue is a modern JavaScript framework that provides useful facilities for progressive enhancement — unlike many other frameworks, you can use Vue to enhance existing HTML.