Recently I have been building a cross platform application based on the electron shell. Part of this process has been my effort to learn some front-end frameworks like VueJs, React and Angular to build out the UI for the electron application. For this particular application, I have decided to focus on learning the VueJs framework.
The one thing that each of these frameworks have in common is the use of build tools to merge, transpile and package a site into a working/debuggable artifcat. Because of these build tools it sometimes takes away from learning the actual framework at the basic level, but instead, spend time learning the build system just to make it work.
There are a ton of great examples out there but generally they all use some build tools to get the sample up and running, I would like to distill a quick start down to the simplest version and try not to use any build tools to get it working.
Let’s get started.
In a blank directory create a file called index.html and paste the following html into the page. This is basic html page, nothing else.
<!DOCTYPE html>
<html lang="en">
<head>
<title>VueJs Manual</title>
</head>
<body>
</body>
</html>Now that we have our base HTML page, let add VueJs to the page. The easiest way to do this is to pull the VueJs script from a CDN (content delivery network), and we can do that but simeply adding a script tag to the <head> section of our index.html page. (I’ve added the whole HTML markup here, but you can just add the script tag.)
<!DOCTYPE html>
<html lang="en">
<head>
<title>VueJs Manual</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
</body>
</html>Now that we have VueJs loaded, let’s doing something with it.
First, we should add a HTML heading element to the body section and name it “my heading”.
<h2 id="myheading"></h2>The next item we need to figure out how to insert text into this heading element. Well VueJs has a template that we can use that is defined with curley braces. For example “”. These are typically know as mustaches. When we add that our element now looks like this.
<h2 id="myheading"></h2>This says that VueJs will set a variable called message on it’s data object and then replace the “” template with that variables value.
Now that we have that, we need to create the VueJs instance and data object. In order to do that, we need to add an additional to the end of the body element in our HTML page. Below is the full page that has the h2 heading and the VueJs script. Let’s break it down tp understand what is going on.
In the tag we are declaring a “mainVue” variable and creating a new Vue instance. In the Vue constructure there is a “el” prop. This is css selector for the “element” that should be selected and assigned the data object. Remember, if there are multiple elements this data will be propagated to all of them.
Now there also the data object, here is where we can define what our data looks like. In this example, the data object contains a property called “message”. As you can see this will be mapped to the template defined on the H2 tag. This will populate the with “this is my test” value. Awesome!
<!DOCTYPE html>
<html lang="en">
<head>
<title>VueJs Manual</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<h2 id="myheading"></h2>
<script>
var mainVue = new Vue({
el: '#myheading',
data: {
message: "this is my test"
}
});
</script>
</body>
</html>There are alot of examples out there that use build tools to get alot of this working, but this example is purley meant to create the smalles and succinct understanding of how to get started with VueJs (without build tools). This was one of my stumbling blocks when trying to learn this and it helped me in breaking down this into just the required pieces. There is alot more that you can do will build tools and alot of samples out there can help with that.
Please reach out to me on twitter or github for any questions or suggestions and thanks for reading. Code on!
Post created on 2018-01-11T23:01:28-05:00