Introduction
Who am I?
I am the CTO and a Co-Founder of PartnerStack we have 2 Vue.js applications in Production, and I have used Vue for many smaller projects. I have read most of the Vue source code and documentation- and have spent 100s of hours working on the projects I mentioned earlier.
This is my first course, though I have volunteered with Canada Learning Code as a mentor (It is very fun, I highly recommend it).
Why Vue?
I like Vue because it solves problems that my team and I have developing frontend applications.
Before Vue, we were on Angular 1.X, which when we started using it was the most popular and well supported library available. Since then the core team stopped supporting it and gave no clear upgrade path to newer versions. This was the beginning of our search for a new framework.
At the time, Vue had a pretty small following, it had just reached v2 and was fairly unproven. I decided to use it strictly for personal projects to learn more about it. From there we tested using Vue on a small side project in the company, and it grew from there. We are working towards using it for all of the frontend projects that we have.
Opinionated yet flexible style
Great for busy teams that don't want to learn a super opinionated framework but like the source code to look consistent and easy to read. This is also great when you go to READ other peoples code. If you want to dig into it here is the style guide
Template rendering and Single File Components
I was familiar with templates since I was coming from Angular, and Vue supports JSX as well so you are getting the best of both worlds. I find beginners are more comfortable with templates since it is just HTML plus some new attributes. Vue also supports single file .vue Components they look like this.
Counter.vue
<template>
<!-- familiar html templates with simple directive syntax -->
<div @click="add()" class='big-red'>
{{count}}
</div>
</template>
<script>
// clean object structure makes for easy to read and modify components
export default {
name: 'counter',
data() {
return {
count: 0
}
},
methods: {
add() {
this.count++;
}
}
}
</script>
<style scoped lang="css">
/* scope css to your component, use any css superset (sass, less) */
.big-red {
color: red;
font-weight: 900;
font-size: 2rem;
}
</style>
Small bundles, great performance
Vue has really good performance and a small library size (around 20kb gzipped and minified). The performance comes from using a Virtual DOM.
More importantly it has an as-needed approach to core framework features such as State management, Routing, and Server Side Rendering. Unlike other frameworks, these are officially supported libraries that are developed by the core team. I have found they are implemented in a clean and thoughtful way.
Open community
Vue is run on a donation basis. It was started by a fella named Evan You and has since grown to 23 core developers. There are also many community contributors and passionate users. They have a great community Forum, an active Discord channel, and official Meetups.
What do I need?
Computer
I recommend using Linux or OSX for web development in general. The industry is mostly built on those operating systems now and you are going to have a much easier time installing, using and maintaining your tools. But for this tutorial it does not matter at all which OS you are using.
Browser
A modern browser, ideally Chrome (that is what I am using) but Firefox works too. These browsers are selected on their availability of the Vue.js Dev tools and their modern Javascript features.
Text editor
Personally I use Atom, and will be able to help you out most easily if you are using it. I also have some recommendations for plugins that help with Vue.js Development if you are using Atom. That being said some other text editors that are worth mentioning are linked below
Atom
Visual Studio Code
https://code.visualstudio.com/