Coursetro 2018 Vue Intro

This course is free. It is a good introduction as far as it goes. Cannot complain about something free!

In my projects thus far I have only been using the script tag and writing the javascript, css and so on inline in the html or php file, no build process 😄

Lesson One - Installation

This course demonstrates how to install using npm and use the cli to build projects. Since this VuePress project required the installation of node and npm already it is now possible to run through this course and see if its got anything new in it for me from what I have learned in the docs and code examples.

Following through the first lesson, the CLI is already at release candidate stage. The options chosen don't matter as this is only for training.

Vue CLI v3.0.0-rc.5
? Please pick a preset: Manually select features
? Check the features needed for your project:
>(*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
1
2
3
4
5
6
7
8
9
10
11
12

The project is created in a sub folder and installs a lot of packages!

Total Files Listed:
   17138 File(s)     82,006,319 bytes
1
2

No problems with the first lesson then. Yarn serve automatically picks the next available port, in my case 8082.

Lesson Two - Components

This lesson dives in and explains how to hack around with the default app which vue-cli has created but does not really go into or explain the structure at all.

What is more interesting to me, having started with the script tag approach is the structure of the application.

In the project folder there is a public folder in which there is an index.html file which contains simply the div where everything is injected by javascript, nothing else.

\public
--> index.html
\src
--> App.vue
--> main.js
--> \assets
--> \components
    --> HelloWorld.vue
1
2
3
4
5
6
7
8

At this point all that main.js does is to import Vue, import the App component and mount the App component on the div in index.html

import Vue from 'vue'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')
1
2
3
4
5
6

So this creates an html element from the App.vue file and then mounts that rendered element on to the div with id = #app.

It took some digging to find out what the code means reproduced from

//The answer (for anyone else who comes across this), is that render: h => h(App) is shorthand for:

render: function (createElement) {
    return createElement(App);
}
//Which can be shortened to:

render (createElement) {
    return createElement(App);
}
//Which can again be shortened to (with h being an alias to createElement as noted above):

render (h){
    return h(App);
}
//Which is then shortened further to (using ES6 "fat arrow" syntax):

render: h => h(App);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

I also noted that there is a chain of imports and exports that needs to work properly. main.js has to import the app component from App.vue, so App.vue has to export itself and any components it needs. The lowest level in the hierarchy, the HelloWorld component exports itself only.

Lesson Five - User Input

The v-model directive is something already been using so nothing new here. I liked the way he set the width of the input element though using calc in CSS. I would not use pixel values though so changed it to this so that the input element fills 100% of the width of the parent element including the padding.

 input {
    width: calc(100% - 2em);
    border: 0;
    padding: 1em;
    font-size: 1.3em;
    background-color: #323333;
    color: #687F7F;
  }
1
2
3
4
5
6
7
8

This lesson also covers some basic form validation using VeeValidate which adds an errors object (computed) as can be seen from the Vue dev tools:

screenshot

The unminified latest version is over 200Kb at the moment (July 2018) but there is a minimal and minified version which is 42Kb on the CDN so it may be worth the payload. Need to investigate more what is in the minimal version and what is not.

Lesson Six - Vue Animations

This is better covered in the docs.