An Interest In:
Web News this Week
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
Vue - Post-Intro Topics
Intro
A Complete Beginner's Guide to Vue
Ali Spittel Mar 20 8 min read
When Ali posted her complete beginners guide to Vue, I decided that was a good time to give it a try since it kept coming up and I was having a particularly frustrating day with React. Ever since I've been investing my time in Vue and absolutely loving it! In this post, I want to walk through some of the next steps and topics I found helpful to learn about after Ali's guide (other than the other great articles listed at the end of that post).
Topics
Single File Components
One of the things I love so much about Vue is the structure of single file components - files with the .vue
file extension. The clear distinction between HTML, CSS, and JavaScript clicked really well for me.
<template> <div> This is where the CSS goes. </div></template><script>// This is where the JS goes.module.exports = { name: 'ComponentName'}</script><style scoped>/* This is where the CSS goes.*/</style>
Scoped Styles
You may have noticed that I didn't use a <style>
tag, but rather a <style scoped>
tag. The difference is that scoped styles only affect the component where they are applied and any children components! This helps keep the CSS in a single place without needing a lot of #id
targeting or inline styles.
Vue Router
Vue Router was one of the more frustrating things when I was starting, but mostly because I was underestimating how powerful it was.
Router allows you to create a Single Page App without needing much work outside of your normal Vue workflow. You create a Layout component that includes a <router-view>
component and a router.js
file where you specify what views you would like to make available.
Where I failed to fully grasp the power of Router was when I thought I needed to create 2 layout pages and navigate between them so that I could nest the router element further in the page under some circumstances. However, the creators of Vue Router were way ahead of me and you can nest a <router-view>
inside another <router-view>
!
Vuex
As you start building bigger and cooler apps, you'll find it becomes harder and harder to keep track of the state of all of your components. Vuex allows you to create a "state bank" where you can keep all your important details that many components need to access.
Just make sure when you are declaring your store you include new Vuex.Store(
in this line:
const store = new Vuex.Store({
Not that I would know from experience
Tyler VanBlargan@pichuplayerI'll kick off the 'it was right in front of me the whole time' posts:
I spent a couple hours trying to setup Vuex for the first time a couple of weeks ago, and eventually realized that I didn't have `new Vuex(` in my variable declaration
#devdiscuss01:08 AM - 05 Jun 2019
Quick Tips
Some quick mentions that I'm not sure where else to put:
Learn from my struggle
As I usually do when I first become interested in something, I throw my whole being into that thing. So while getting ready in the morning, I started playing some Vue conference talks. One of them was this one by Evan You (the creator of Vue):
I was super excited that a new version of Vue was coming out, and all the benefits sounded amazing!
So when I headed into work that day, the first thing I did was run the below command, which returned 3.#.# - I already have version 3! Sweet!
$vue --version
But alas, this is the CLI version that is being returned, not the version of Vue in use (which can be found with the Vue dev tools).
Official Docs
There are separate doc sites for
Most of them have light touches on each other, but it's good to keep in mind that you might be on the doc-lite version of what you're looking for.
Tutorial 'Skipping'
In many Vue guides, I've noticed that they start with something like this:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})
Which is great... except that I was working with a .vue
file and this is for a .js
file.
Often, if you skip to the next code block, it will either be in the single file component format or start reviewing how to transfer to single file component format.
Closing
Hopefully some of the things I've learned the hard way can act as pointers to help get you kick-started in Vue! I'm still learning plenty every day about Vue and the best ways to do things, but if you have questions I'd love to help or help point you to someone more knowledgeable!
Space Photo by Casey Horner on Unsplash
Original Link: https://dev.to/tvanblargan/vue-post-intro-topics-316i
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To