Vue Js Tutorial For Beginners

Posted on  by admin

Vue.js (VueJS or Vue) is a JavaScript framework used to develop interactive web interfaces on the front end. Vue.js is often compared to Angular.

Vue.js vs Angular — what’s the main difference?

  • Both are frameworks, but Angular provides a lot of built-in features and uses TypeScript.
  • And what about Vue.js vs React?
  • Vue.js is a framework, and React is a library.
  • While React uses JSX where CSS and HTML are part of JS, Vue.js uses HTML, JavaScript, and CSS separately.
  • Before you jump into Vue.js, make sure you’re familiar with CSS, HTML, DOM, and have a basic understanding of JavaScript and its ES6 features.
  • First, you need to set up a Vue.js development environment.
  • Install Node.js globally on your machine.

Type this command in your terminal:. Install Vue CLI, or the Vue Command Line Interface, globally on your machine:.

Production Build and Deployment

Vue CLI provides build setups including hot-reload, lint-on-save, and production-ready builds. Use vue create to create a live development server, run your Vue application, automatically compile Vue and Babel, with SCSS support (and Linter if you wish).

If you’re familiar with React: vue create is the equivalent to create-react-app.

Set Up

And vue-app is the name of the folder that will contain your Vue application. Choose features for your project.

You’ll be given a set of options. Use an arrow on your keyboard to select “Manually select features”:.

Then press Enter. You will see another set of options. Choose the features needed for your project with the keyboard arrow:. Press Enter and select a version of Vue.js (we’ll use Vue.js 2):.

File Structure

Finish the setup and wait for your project to be created. Launch your Vue app by running the following code in your terminal:. After that, you’ll see the following message:.

Your Vue.js project is available at http://localhost:8080/.

Follow this link, and you’ll see the Vue default page:. Open your folder where you installed the environment (mine is in C:\Users\Shark\vue-app) and you’ll see the following file structure:.

  1. Your general HTML file is public/index.html.
  2. You’ll import files in src/main.js and write your Vue/JS code in src/App.vue as well as in other .vue files you’ll create later.
  3. See any changes you made at http://localhost:3000/.

Open your src folder, create a new folder named “styles” there, and create style.scss inside it. For our future app, we’ll need to delete src/components/HelloWorld.vue and add there two files for two Vue.js components: src/components/Question.vue and src/components/Result.vue.

The final file structure will look like this:. App.vue will manage your app’s general logic, and Question.vue and Result.vue will display two main blocks of our app.

  • We’ll explain the app structure in the section “Vue.js Example”.
  • It’s recommended to install Vue.js DevTools, which is a Chrome extension for Vue.js.
  • It will help you inspect a Vue.js tree, the component hierarchy, state, props, and more.

This extension is also available for Firefox. You can write CSS rules in Vue.js component files, inside the