updated module 5

Added new topic and exercise

5-CLI-components-properties/1-vue-cli.md

@@ -77,7 +77,7 @@ You will be asked to set several options (preferences) before the project is cre
 
 ![Screenshot showing the Command Prompt terminal on a Windows computer. The "create project" command is asking the user "Where do you prefer placing config for Babel, ESLint, etc.?" ](media/Vue-CLI_04.png)
 
-You can save your settings as a preset or choose to create the project. Note that your project will be created in the folder in which you ran the ```vue create project``` command in a subfolder named after the projectname you set.
+You can save your settings as a preset or choose to create the project. Note that your project will be created in the folder in which you ran the `vue create project` command in a subfolder named after the projectname you set.
 
 If you created the project in another directory, you'll need to **navigate** to the `directory` where your project is located, using the command shown below. This is so you can run the project to test that everything got created properly. (Note that suggested commands are shown at the bottom of the confirmation screen that indicates your project was created successfully.)
 

5-CLI-components-properties/2-vue-spa-intro.md

@@ -0,0 +1,27 @@
+You've used the CLI to create a basic Vue single file application. This application also uses Vue components so you have the basic framework in place to build a Vue app. This is the beauty of the CLI: it does all the foundational work for you so you can focus on building your application.
+
+In this and subsequent topics, we'll be developing a single-page application (SPA) using Vue. If you're not familar with the concept of a SPA, the model essentially rebuilds a single page with updated data from a server or based on user entry--thus the name single *page* application. In traditional web design, updated information would be sent to the user in a new page. This Wikipedia page has a good introduction to single-page applications if you want to read more: https://en.wikipedia.org/wiki/Single-page_application.
+
+## Vue SPAs
+### Main Application
+The CLI will install all the files you need for a single-page application. When the scripts are finished running, your folder structure should look something like this:
+
+![Screenshot showing the File Explorer on a Windows computer. The Explorer window shows the file structure of the application the command line interface installed. ](media/Vue-SPA_01.png)
+
+The main files for the application are in the `src` folder. If you open that folder, you'll see the following files:
+
+![Screenshot showing the File Explorer on a Windows computer. The Explorer window shows the contents of the src folder. ](media/Vue-SPA_02.png)
+
+The entry point code for your JavaScript application is in `main.js` and in this file you import the Vue libraries and the main Vue app file called `App.vue`. Notice the `.vue` extension on this (and other) files. We'll talk more about this file type in the next topic. 
+
+The `App.vue` file is of particular importance in this model as it not only harnesses the main functionality of the application but also demonstrates routing in Vue--a primary feature that gives SPAs their power. You learned about Vue routing earlier in this course.
+
+Note that this application cannot be consumed natively on the web as is. It has to be 'built' which you learned about in the topic on the CLI. A tool like the Vue builder, Webpack, or Snowpack handles creating all the files needed so a web server like Node.js can serve the files to the user over the internet.
+
+### Other Files
+In the `views` folder you'll see two other `.vue` files: `Home.vue` and `About.vue` which contain the code and content for those repsective pages (though if you look inside `Home.vue` you'll notice it loads `HelloWorld.vue` which contains the main body content of the home page). In Vue, these types of files--files with the `.vue` extension--are called "components." When the user requests these components, the Vue router loads them into the viewport of the application without having to redirect the user to a different page. This decreases load time for the user and helps create the "application" experience in this web application.
+
+The folder structure of this application is very intentional. The builder and router looks for specific files in specific folders. While these can be changed with configuration files, the basic structure of this application is what the builder expects. 
+
+## Conclusion
+Now that you have a basic understanding of how a Vue SPA is structured, we can take a look at `.vue` files themselves so you can understand how to write your own and start builing more powerful Vue applications.

5-CLI-components-properties/3-vue-spa.md

@@ -0,0 +1,29 @@
+The previous overview gave you an explanation of what a Single File Application is and why you would use them. Let's now turn to the structure of the application model itself in order to get a better technical understanding of the SPA architecture.
+
+Using File Explorer (or Finder on the Mac), browse to the root directory of the project you created using the CLI and open the `src` folder. Inside, you'll see a file called `App.vue` which is the primary Vue file for this application. Open this file in your code editor.
+
+You should see two main sections in this file: a `<template>` section and a `<style>` section. As mentioned in an earlier topic, `.vue` files contain all the basic information needed to render the HTML. `.vue` files also can have a `<script>` section which can contain any JavaScript that you might need in your project. We'll examine this more closely below. Let's look at each of the sections in turn.
+
+## The Template Section
+If you look closely at this section, you'll notice that it's essentially HTML that will be rendered to the application pages at run time. In this HTML you can use Vue constructs as well as general HTML. In `App.vue` you should see two `router-link` directives which pull in other `.vue` files that will be used in the final rendering. You can examine the `Home.vue` and `About.vue` files in the `views` subfolder. When you examine these files, you'll see content that is rendered in your sample application and carefully examining the structure will help you understand how you can build on this model for your own application.
+
+>[!HINT]
+>Hint: The routes are declared in `index.js` in the `router` subfolder and are imported in `main.js` which is a peer to `App.vue`.
+
+## The Script Section
+As mentioned earlier, the script section of a `.vue` file contains JavaScript that will be used when the project is rendered. Let's take a look at another `.vue` file to see how this works.
+
+- Browse to the `views` subfolder under the `src` folder of your project.
+- Open the `Home.vue` file in your code editor.
+- Find the `<script>` section and take a look at it.
+
+You should notice that the JavaScript in this section imports yet *another* `.vue` file, `HelloWorld.vue`. The script imports this file and exports it as a component. If you look at `HelloWorld.vue` you'll notice that it's mostly HTML in the `<template>` section that will render most of what you see in your rendered Vue app. This is the power of modular Vue apps that use various components. Vue handles all the plumbing so you can develop components as independent parts of an overall application and then bring them together at build time.
+
+You can think about how this might work when building a project with a team of developers. If the project is designed and architected appropriately, various components can be given to specific developers to work on. They can create `.vue` files with all the HTML, scripts, and styles those components require and then, at build time, all the components can be brought together to create a single application.
+
+## The Style Section
+Very simply, this section contains CSS styles that can be referenced in the HTML in the `<template>` section. Because of the way Vue brings each component together to render a single app, styles used in any component can be referenced in any other. There's one exception: if a specific style includes the `scoped` keyword, that style will only be able to be referenced by the component in which the style appears.
+
+## Conclusion
+
+We've now seen how the CLI can be used to accelerate the initial set up of a new project. We've also seen how using components can help with collaborative development and keeping the relevant assets and code for specific aspects of an application contained and modularized. This really illustrates the power of a framework like Vue and, when used to its full potential, can help improve overall application development.

5-CLI-components-properties/4-exercise-CLI.md

@@ -0,0 +1,32 @@
+The exercise will have them take the basic application created by the CLI template and expand it. Let's add another component to the application and create a route so Vue can load that into the application when the user wants it. 
+
+We'll call this new page "Learn" and we'll provide some basic resources on how a user can get started with Vue.
+
+1. In Visual Studio Code, open the folder from the project you created using the CLI. This will give you access to all the project files so you can edit them.
+2. Using the Visual Studio Code Explorer, navigate to the `src` folder and expand it.
+3. Open the `App.vue` file so we can add a new route to our learn page. Below the last route in the `template` section, add the following line and save the file:
+
+` | <router-link to="/learn">Learn</router-link>`
+
+4. Now let's create the page. Find the `views` folder under `src`, right click and select **New File**. Name the file `Learn.vue`.
+5. Paste in the following code and save the file:
+
+`<template>
+    <h1>This is the Learning Page!</h1>
+</template>`
+
+This is the HTML that will render when the page loads. You can add whatever else you would like including links. Use the `Home.vue` and `About.vue` files as a template.
+
+6. Now lets ensure the routes work. Open the `router` folder in Visual Studio Code Explorer and open the `index.js` file. 
+7. Add a route to the `const routes` variable by typing a comma after the last route in the JSON list (the default is the "About" route) and add the following code and save the file:
+
+`   {
+    path: "/learn",
+    name: "Learn",
+        component: () =>
+      import(/* webpackChunkName: "about" */ "../views/Learn.vue")
+  }`
+
+That's it! You just added your first Vue component with a route to the new page. If you run `npm run serve' you should see a page that looks similar to the one below. If you click on the "Learn" link, Vue will load your new page into the viewport.  
+
+![Screenshot showing a browser with the web application loaded. The updated application shows the "Learn" menu item. ](media/Vue-SPA_03.png)

code/5-CLI-components-properties/end/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

code/5-CLI-components-properties/end/.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint"
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
+  }
+};

code/5-CLI-components-properties/end/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

code/5-CLI-components-properties/end/README.md

@@ -0,0 +1,24 @@
+# firstproject
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

code/5-CLI-components-properties/end/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};