Vue Js Tutorial

Posted on  by admin
-->

If you're brand new to using Vue.js, this guide will help you to get started with some basics.

Prerequisites

  • 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.

Try NodeJS with Visual Studio Code

If you don't already have it, install VS Code. We recommend installing VS Code on Windows, regardless of whether you plan to use Vue on Windows or WSL.

  1. 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.

  3. npm is included with Node.js which you can install from Node.js downloads.

    Tip: To test that you have Node.js and npm correctly installed on your machine, you can type node --version and npm --version.

  4. To install the vue/cli , in a terminal or command prompt type:. This may take a few minutes to install.

  5. You can now create a new Vue.js application by typing:. where my-app is the name of the folder for your application.

    You will be prompted to select a preset and you can keep the default (babel, eslint), which will use Babel to transpile the JavaScript to browser compatible ES5 and install the ESLint linter to detect coding errors.

    It may take a few minutes to create the Vue application and install its dependencies.

    Let's quickly run our Vue application by navigating to the new folder and typing npm run serve to start the web server and open the application in a browser:. You should see "Welcome to your Vue.js App" on http://localhost:8080 in your browser.

  6. You can press Ctrl+C to stop the vue-cli-service server. To open your Vue application in VS Code, from a terminal (or command prompt), navigate to the my-app folder and type code .:.

  7. VS Code will launch and display your Vue application in the File Explorer. Now expand the src folder and select the App.vue file. You'll notice that VS Code doesn't show any syntax highlighting and it treats the file as Plain Text as you can see in the lower right Status Bar. You'll also see a notification recommending the Vetur extension for the .vue file type.

Additional resources

  • The Vetur extension supplies Vue.js language features (syntax highlighting, IntelliSense, snippets, formatting) to VS Code. From the notification, press Install to download and install the Vetur extension.

    • You should see the Vetur extension Installing in the Extensions view.