Vue Copy

Introduction

VueJS was created by Evan You, it’s the youngest of the popular frameworks, but it’s quickly rising popularity proves that it’s worth paying attention to. Vue is known for being one of the easiest frontend frameworks to learn while still having the same scalable power as other popular frameworks.

Overview

Vue is awesome (and easy to learn) because it utilizes what already exists on the web. The Vue way is to use real html and css to build applications, you do not need to learn anything new such as JSX. Vue components have a very clean structure. A medium to large Vue application will usually be structured in single-file components and the separation of concerns template (html) script (javascript) and style (css) makes it a dream to work with, keeping your code organized and clean. Here is an example from the official Vue docs of what a "hello world" single-file component would look like: image The Vue ecosystem is another reason for its popularity. Unlike other frameworks that utilize external libraries to integrate state management or router for example, Vue has official libraries for most of these which were developed by the Vue team themselves, such as Vuex (comparable to redux), vue-router (comparable to react-router). All these are great reasons to pick this amazing framework as your frontend main tool. One downside is that unlike the other popular frameworks, Vue was not created nor is it backed by a large company (although it has significant support by large companies). Therefore, depending on where you are in the world, the job demand for Vue is noticeably lower than React and Angular.

Getting Started

You can quickly start playing around with vue via the cdn by including

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

in your project, jsfiddle or codepen. You can follow the installation project here. This is perfect for small projects, if you just want to manipulate only certain parts of the dom (*cough* replace jquery *cough*) .

For complete Vue projects you can use the vue-cli by installing it npm install -g @vue/cli or yarn global add @vue/cli and easily create a project with vue create name-of-your-project or vue ui.

Study

  1. Read the ‘Getting started’ in the official Vue doc, specially check out the "declarative rendering" section and try it out in JSFiddle or CodePen.

  2. Check out this awesome complete getting started blog guide here. Read the first three sections including "Writing Our First Vue.js 2.0 App" and follow along to see how easy it is, and if you find it nice I definitely recommend reading the whole thing.

  3. Learn Vue.js through this series of free Scrimba screencasts.

Additional Resources

Back to Lesson