Merge pull request #12 from SkillUpTech/geektrainer/mod-4

geektrainer/mod 4

3-data-events/0-introduction.md

@@ -8,6 +8,7 @@ In this module you will learn how to:
 
 Prerequisites
 
+- A basic understanding of Vue.js
 - Knowledge of HTML and CSS
 - Knowledge of JavaScript
 - Familiarity with Vue.js and directives

4-cli-components/0-overview.md

@@ -0,0 +1,20 @@
+While it is possible to create an entire Vue.js application in a single JavaScript file, it will become unmanageable in all but the smallest of applications. To support breaking your application into smaller units, Vue allows you to create components. Components are reusable building blocks from which you can create your application.
+
+Components can be created as JavaScript files, or through a single-file component with a *.vue* extension. Single-file components use a special syntax which cannot be read by a browser and must be converted into the appropriate JavaScript, HTML and CSS. This process of converting specialized syntax into something able to be read by a browser is known as bundling, and requires additional tooling such as webpack.
+
+Fortunately, Vue also provides a command line interface (CLI) which can be used to bootstrap an application. The CLI will configure all of the necessary tooling, including a bundler and development server.
+
+In this module we will explore how to:
+
+- use Vue CLI to create an application
+- create single-file components
+- use props to pass values into components
+
+Prerequisites:
+
+- A basic understanding of Vue.js
+- Knowledge of HTML and CSS
+- Knowledge of JavaScript
+- Familiarity with Vue.js and directives
+- [Visual Studio Code](https://code.visualstudio.com)
+- [Node.js](https://nodejs.org/en/)

4-cli-components/1-vue-cli.md

@@ -0,0 +1,18 @@
+The Vue CLI (command line interface) provides a suite of tools for development including project scaffolding, a development server, and rapid prototyping. It allows you to quickly create a starter application so you can focus on coding, not on configuring libraries and other settings.
+
+## Bootstrapping
+
+The core feature of Vue CLI is to bootstrap an application. The *create* script provides a wizard which allows you to select from some of the most common configurations, including
+
+- Linting options
+- Application type
+- Babel support
+- Language - JavaScript or TypeScript
+
+## Build process
+
+Vue CLI is designed to work with single-file Vue components, or *.vue* files. *.vue* files use a special syntax which is unreadable to browsers, and needs to be converted into the appropriate JavaScript, HTML and CSS. This process is managed by a *module bundler* or *bundler*. Vue CLI uses [webpack](https://webpack.js.org/) as its default bundler, and includes a default configuration which will work for most scenarios. By using Vue CLI we can skip the steps required for configuring a bundler and instead use the setup provided.
+
+## Development server
+
+Developing any type of application requires trial and error. You will make a few changes, load the page in the browser to test it, make a few more changes, and repeat this process until everything behaves as you expect. We want to minimize the number of steps involved in this process. To streamline development, Vue CLI includes a development server. Each time you save a file, the development server will detect file changes, rebuild (or re-bundle) the project, and allow you to test the page in the browser.

4-cli-components/2-exercise-vue-cli.md

@@ -0,0 +1,115 @@
+We want to create an application to allow someone to book a cruise to the moon for our fictitious company Relecloud. We will use Vue CLI to bootstrap our application.
+
+## Install Vue CLI
+
+Vue CLI is available through [npm](https://www.npmjs.com/), the packaging tool used by Node.js. npm is automatically installed when you install Node.js. To ensure you have npm and Node.js installed on your system, open a command or terminal window and execute the following commands:
+
+```bash
+node -v
+npm -v
+```
+
+> ![IMPORTANT]
+> Vue CLI is typically installed globally via npm, which requires elevated permissions if you have installed Node.js directly. Using Node Version Manager allows you to perform the installation as a regular user. You can install [nvm on Linux, Windows Subsystem for Linux (WSL), or macOS](https://github.com/nvm-sh/nvm#installing-and-updating) or [nvm-windows on Windows](https://docs.microsoft.com/windows/nodejs/setup-on-wsl2).
+
+To install Vue CLI, perform the following steps:
+
+1. Open a command or terminal window
+
+1. Inside the command or terminal window, execute the following command
+
+    ```bash
+    npm install -g @vue/cli
+    ```
+
+Vue CLI will now be installed on your system. This will take a couple of minutes.
+
+## Bootstrap an application
+
+The fastest way to bootstrap a Vue application is through Vue CLI. We will now create a starter application with Vue CLI.
+
+1. In the command or terminal window, navigate to a folder you want to use to store your application
+
+1. Create a Vue application by executing the following command:
+
+    ```bash
+    vue create relecloud
+    ```
+
+1. When prompted, select *Manually select features* by using your arrow keys to move down and pressing *Enter*
+
+    ![Screenshot of menu options with Manually select features highlighted](./images/manual.png)
+
+1. When prompted for features needed for your project, arrow to *Babel* and press *space* to disable it, and arrow to *Linter / Formatter* and press *space* to disable it
+
+    ![Screenshot of features options with Babel and Linter / Formatter disabled, and Choose Vue version selected](./images/features.png)
+
+1. Ensure *Choose Vue version* is selected
+
+1. Press *enter* to confirm feature selection
+
+    > ![NOTE]
+    > For production projects you may decide to add additional features. These features are outside the scope of this module.
+
+1. When prompted to choose a version of Vue.js, arrow to *3.x (Preview)* and press *enter*
+
+    ![Screenshot of version selection with 3.x (Preview) selected](./images/version.png)
+
+1. When prompted to choose where you prefer to place config files, leave the default of *In dedicated config files* and press *enter*
+
+    ![Screenshot of config file configuration with In dedicated config files selected](./images/config-files.png)
+
+1. When prompted to save this as a preset, press *enter* to accept the default of *No*
+
+Your project will now be created and the necessary libraries installed. This will take a few moments.
+
+## Exploring the code
+
+Let's explore the code created by Vue CLI.
+
+1. When the installation completes, change directories into *relecloud* and open it in Visual Studio Code by executing the following commands:
+
+    ```bash
+    cd relecloud
+    code .
+    ```
+
+1. Inside Visual Studio Code, open *package.json*
+
+1. Note *vue* is listed as a dependency, and *@vue/cli-service* is listed as a *devDependency*
+
+    > ![NOTE]
+    > *@vue/cli-service is responsible for building your application and running the development server
+
+1. Note the two *scripts*, *serve* which will launch the development server and *build* which will create the JavaScript/HTML/CSS when you are ready to publish your project
+
+1. Open *public/index.html*, which will host the Vue application
+
+1. Open *src/main.js* and note the code which imports `App` from *App.vue*
+
+1. Open *src/App.vue*, which contains the core component which we will explore in the next unit
+
+    > ![NOTE]
+    > Visual Studio Code may prompt you with a suggested extension. We will install the extension in a later module.
+
+1. Note the *src/components* folder, which is where all components will be stored
+
+## Run the development server
+
+Let's start the development server and see the default page.
+
+1. Open a new terminal window in Visual Studio Code by selecting *Terminal* > *New Terminal*
+
+1. In the integrated terminal, execute the following command to start the development server
+
+    ```bash
+    npm run serve
+    ```
+
+1. Open your browser and navigate to *http://localhost:8080*
+
+1. The default Vue application will be displayed
+
+    ![Screenshot of the default Vue page](./images/vue-default.png)
+
+Congratulations! You have now created a Vue application by using Vue CLI.

4-cli-components/3-vue-components.md

@@ -0,0 +1,85 @@
+By definition, a component is "a part or element of a larger whole". When we think about creating an application, we typically work with smaller parts and combine them into the larger whole - our application. Vue allows us to create components which we can then use to create a full application.
+
+## Vue components
+
+While you can create components using JavaScript files, the more common method is to create single-file components by using the Vue syntax inside of a *.vue* file. Single-file components allow for a cleaner structure and a more self-contained setup. They even allow you to use various pre-processors, such as Pug or Stylus.
+
+When creating components you are in essence creating new tags you can use in your application in a similar fashion to normal HTML tags. This allows you to have a form of semantic tags making it clearer what is actually being displayed on a page. A tag like `<booking-form></booking-form>` would likely display a form used to create a booking, and `<booking-list></booking-list>` would likely display a list of bookings.
+
+## Vue component structure
+
+Vue components contain three main sections, `template`, `script` and `style`. `style` contains any CSS or other style syntax and `script` contains any scripting code for the component. `template` contains the HTML used for the display of information. This allows for a logical breakdown of your component.
+
+### style
+
+`style` can contain any valid CSS or the syntax of any pre-processor you may be using. You can also *scope* your CSS to that specific component by using the `scoped` attribute. This means the styles will apply to only that component, which allows you to create classes and other settings without worrying about accidentally modifying other parts of the page.
+
+```html
+<style>
+.demo {
+    font-family: Verdana
+}
+</style>
+```
+
+### script
+
+`script` stores the script used for the component. Just as with a Vue JavaScript component, you can export the various Vue properties and methods such as `data()`, `methods`, and `components`.
+
+```html
+<script>
+export default {
+    data() {
+        return {
+            product: {
+                name: 'Cruise to the moon',
+                description: 'A cool cruise to the moon!'
+            }
+        }
+    }
+}
+</script>
+```
+
+### template
+
+`template` houses the HTML template you wish to use to display information and allow the user to interact with the data. When using a JavaScript based component, this is typically inside the *.html* file or as a string literal in a JavaScript file. The HTML syntax used in `template` is the same as with JavaScript based components, including using handlebars (`{{}}`) to display data.
+
+```html
+<template>
+<div>{{ product.name }}</div>
+<div>{{ product.description }}</div>
+</template>
+```
+
+## Loading and components
+
+As highlighted earlier, single-file components are saved with a *.vue* extension. You can load these in a similar fashion to other modules by using the `import` statement, and register them by using the `components` property. Once registered they become available for use as a tag inside of `template`.
+
+> ![NOTE]
+> When importing a library with `import`, it's standard to use PascalCase (or upper camel case) for the name, where the first letter for each word is capitalized. However, in HTML convention is for tag names to use kebab-case with each word in lowercase letters and a dash (`-`) between them. Vue will automatically manage the two different conventions.
+
+```html
+<template>
+<product-display></product-display>
+</template>
+<script>
+import ProductDisplay from './ProductDisplay.vue'
+export default {
+    components: {
+        ProductDisplay
+    }
+}
+```
+
+## Separation of concerns
+
+Placing the HTML, CSS and JavaScript into one file may appear to be a departure from best practices where you typically create separate files for each of the different types. However, in practice switching between these files can cause development to slow as there are invariably interdependencies between them. Single-file components does allow you to create separate files for your `script` and `style` sections by using the `src` attribute.
+
+```html
+<template>
+    <div>Hello, world</div>
+</template>
+<script src="./hello.js"></script>
+<style src="./style.css"></style>
+```