From be76fb6f9dc8caa9259ead3b0d474a434c69fb8d Mon Sep 17 00:00:00 2001 From: Christopher Harrison Date: Sun, 21 Feb 2021 17:54:18 -0800 Subject: [PATCH] Removed module 5 --- 5-CLI-components-properties/0-overview.md | 11 -- 5-CLI-components-properties/1-vue-cli.md | 113 ------------------ .../2-vue-spa-intro.md | 29 ----- 5-CLI-components-properties/3-vue-spa.md | 35 ------ 5-CLI-components-properties/4-exercise-CLI.md | 36 ------ .../media/Vue-CLI_01.png | Bin 22517 -> 0 bytes .../media/Vue-CLI_02.png | Bin 18906 -> 0 bytes .../media/Vue-CLI_03.png | Bin 57338 -> 0 bytes .../media/Vue-CLI_04.png | Bin 40511 -> 0 bytes .../media/Vue-CLI_05.png | Bin 28886 -> 0 bytes .../media/Vue-CLI_06.png | Bin 23732 -> 0 bytes .../media/Vue-CLI_07.png | Bin 111981 -> 0 bytes .../media/Vue-CLI_08.png | Bin 44419 -> 0 bytes .../media/Vue-SPA_01.png | Bin 60980 -> 0 bytes .../media/Vue-SPA_02.png | Bin 25700 -> 0 bytes .../media/Vue-SPA_03.png | Bin 115327 -> 0 bytes 16 files changed, 224 deletions(-) delete mode 100644 5-CLI-components-properties/0-overview.md delete mode 100644 5-CLI-components-properties/1-vue-cli.md delete mode 100644 5-CLI-components-properties/2-vue-spa-intro.md delete mode 100644 5-CLI-components-properties/3-vue-spa.md delete mode 100644 5-CLI-components-properties/4-exercise-CLI.md delete mode 100644 5-CLI-components-properties/media/Vue-CLI_01.png delete mode 100644 5-CLI-components-properties/media/Vue-CLI_02.png delete mode 100644 5-CLI-components-properties/media/Vue-CLI_03.png delete mode 100644 5-CLI-components-properties/media/Vue-CLI_04.png delete mode 100644 5-CLI-components-properties/media/Vue-CLI_05.png delete mode 100644 5-CLI-components-properties/media/Vue-CLI_06.png delete mode 100644 5-CLI-components-properties/media/Vue-CLI_07.png delete mode 100644 5-CLI-components-properties/media/Vue-CLI_08.png delete mode 100644 5-CLI-components-properties/media/Vue-SPA_01.png delete mode 100644 5-CLI-components-properties/media/Vue-SPA_02.png delete mode 100644 5-CLI-components-properties/media/Vue-SPA_03.png diff --git a/5-CLI-components-properties/0-overview.md b/5-CLI-components-properties/0-overview.md deleted file mode 100644 index 630632d..0000000 --- a/5-CLI-components-properties/0-overview.md +++ /dev/null @@ -1,11 +0,0 @@ -Once you have become familiar with the Vue.js basics, you might want to learn how to use the Vue CLI (Command Line Interface) to create projects. The CLI provides a complete system for rapid Vue.js project development. Vue also has a UI (User Interface) that can be helpful for developers because it handles a lot of details like managing dependencies. The VSCode editor can also be used with extensions that provide handy development tools like syntax highlighting and code completion. - -In this module, we'll look at how to use the CLI to create a project and we'll focus on a new type of Vue programming model called a *Single Page Application*. Single Page Applications (SPA) are just a different way--a modularized way--to structure a Vue project using single-file components. You can use all the information you already learned about Vue in SPAs. However the file structure and type of files you'll use are different. Instead of having to instantiate Vue in a JavaScript file and put your template and style information in other files, you can include everything you need for your Vue in a single file. And this gives you a single page application! - -## Learning Objectives - -Upon completion of this module you will: - -- Understand how to use the Vue CLI (Command Line Interface) to create and manage Vue projects -- Learn about Single Page Applications and why and where you would use them. -- Use the CLI to create an SPA project \ No newline at end of file diff --git a/5-CLI-components-properties/1-vue-cli.md b/5-CLI-components-properties/1-vue-cli.md deleted file mode 100644 index 0c4b07c..0000000 --- a/5-CLI-components-properties/1-vue-cli.md +++ /dev/null @@ -1,113 +0,0 @@ -This section demonstrates how to use the Vue CLI to build a starter project that provides a skeleton framework that you can use to rapidly deploy a Vue application. In the next section we will demonstrate how to build a starter project using the Vue graphical user interface (UI). - -Some of the advantages of using the CLI to create a Vue project include the statements listed below. The CLI: - -- Selects the libraries that your project will use. -- Configures Webpack, so that all JavaScript files, CSS files and other dependencies get properly bundled together and optimized for deployment. This can reduce loading speed for your application. -- Allows you to use single-file `.vue` components, `TypeScript`, `SCSS`, `Pug` and the latest versions of `ECMAScript`. -- Enables Hot Module Replacement (HMR), which performs live update of your application whenever you save a change. - -In order to use Vue CLI, you will need to run `npm`, which is the package manager for `Node.js` modules. If you have already downloaded Node.js, you automatically have npm installed on your computer. To check whether you have Node.js and npm installed, run the commands shown below in your terminal. - ->[!HINT] ->HINT: On a Windows computer you can use the `Command Prompt` terminal interface. On a Mac computer you can use the `Terminal` app. - -```bash -node -v -npm -v -``` - -![Screenshot showing the Command Prompt terminal on a Windows computer. The command "node -v" has produced a response indicating that version 14.15.1 of Node.js is installed on this computer. The command "npm -v" indicates that version 6.14.8 of npm is installed. ](media/Vue-CLI_01.png) - -- Response to the command `node -v` indicates that version 14.15.1 of **Node.js** is installed on this computer. -- Command `npm -v` reveals that version 6.14.8 of **npm** is installed. - -## Install Node.js and npm - -If your terminal does not return the version number for each package, you can download and install **Node.js** and **npm** from the [Node.js website](https://nodejs.org/). - -## Install Vue CLI - -After completing the installation instructions on the **Node.js** website and **confirming** that both `Node.js` and `npm` are installed, you can install the `Vue CLI` from your terminal using the following command: - -```bash -npm install -g @vue/cli -``` - -On a Windows computer these files will likely be located at: `C:\Program Files\nodejs\node_modules\npm`. - -On a Mac computer these files will likely be located at: `/usr/local/lib/node_modules/@vue/.` - -## Create a project - -After installation of the Vue CLI, you can create your project in two different ways: - -- using commands in a terminal -- using the Vue UI - -First, we will walk through the steps involved in creating a project using the Vue CLI. Note that whatever you use as the `projectname`, Vue will create a folder on your computer with the projectname as the `folder` name. Vue will place several starter files in that folder that will help you jumpstart the development process for creating a Vue application. - -Execute the following command in the terminal: -- `vue create projectname` (where `projectname` is the name of the folder you want to create for your project). - -```bash -vue create projectname -``` - -You will be asked to set several options (preferences) before the project is created. Use the `arrow key` to move to the appropriate option **before** you hit the `Enter` key. - -- Start by picking a `preset`. - - Press the arrow key to move the cursor down to the `Manually select features` option and hit the `Enter` key. - -![Screenshot showing the Command Prompt terminal on a Windows computer. The "create project" command is asking the user to "Please pick a preset" and "Manually select features" is highlighted in the list of options. ](media/Vue-CLI_02.png) - -- Features needed for your project include: - - `Babel` (already selected) - - `Router` (select by hitting `spacebar`) - - `Vuex` (select by hitting `spacebar`) - - `Linter / Formatter` (already selected) - -![Screenshot showing the Command Prompt terminal on a Windows computer. The "create project" command is asking the user to "Check the features needed for your project." ](media/Vue-CLI_03.png) - -- Choose version `3.x (Preview)` of Vue.js to start the project with. -- Choose no (n) when asked if you want to use history mode with the router. -- For linter / formatter config choose `ESLint + Prettier`. - - Select `(*) Lint on save`. -- Where do you prefer placing config for Babel, ESLint, etc.? - - Select `In dedicated config files`. - -![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. - -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.) - -![Screenshot showing the Command Prompt terminal on a Windows computer. The "create project" command indicates that the project was created successfully. ](media/Vue-CLI_05.png) - -Execute the commands shown below. - -```bash -cd projectname/ -npm run serve -``` -![Screenshot showing the Command Prompt terminal on a Windows computer. The "run serve" command is DONE and was compiled successfully. ](media/Vue-CLI_06.png) - ->![HINT] ->Hint: If your project won't run and you get a dependency error, you may need to install another Vue package by running this command: ```npm i @vue/compiler-sfc``` - -Your project has been `built` and is now `served` at [http://localhost:8080](http://localhost:8080). Per the instructions at the bottom of the previous terminal window, the "development build is not optimized", so you may choose to run the build command shown below. - -```bash -npm run build -``` - -The starter project includes two pages (Home | About), which you can navigate between because your application is using `Vue Router`. - -![Screenshot showing the "Home" page of the application that has been built through the Vue CLI. The user can click a link to move to the "About" page. Several links are available to provide the developer with more information about the installed CLI plugins, essential links, and elements of the Vue ecosystem.](media/Vue-CLI_07.png) - -![Screenshot showing the "About" page of the application that has been built through the Vue CLI. The user can click a link to move to the "Home" page.](media/Vue-CLI_08.png) - -> [!IMPORTANT] -> IMPORTANT NOTE: You will want to leave the terminal window open while you are working with the Vue application files on the localhost server. When you close the terminal window you will be ending the server instance. - -In the next topic, we'll explore how Vue uses the components that the CLI created to modularize the application architecture and enable you to bring all the components together in a single application. diff --git a/5-CLI-components-properties/2-vue-spa-intro.md b/5-CLI-components-properties/2-vue-spa-intro.md deleted file mode 100644 index e1ca54a..0000000 --- a/5-CLI-components-properties/2-vue-spa-intro.md +++ /dev/null @@ -1,29 +0,0 @@ -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 - -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. \ No newline at end of file diff --git a/5-CLI-components-properties/3-vue-spa.md b/5-CLI-components-properties/3-vue-spa.md deleted file mode 100644 index 5c79128..0000000 --- a/5-CLI-components-properties/3-vue-spa.md +++ /dev/null @@ -1,35 +0,0 @@ -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 `