diff --git a/code/module-08/m08_end/components/FoodPrefsForm.vue b/code/module-08/m08_end/components/FoodPrefsForm.vue new file mode 100644 index 0000000..6ebb678 --- /dev/null +++ b/code/module-08/m08_end/components/FoodPrefsForm.vue @@ -0,0 +1,33 @@ + + + + + diff --git a/code/module-09/m09_end/components/FoodPrefsForm.vue b/code/module-09/m09_end/components/FoodPrefsForm.vue new file mode 100644 index 0000000..1f1fa30 --- /dev/null +++ b/code/module-09/m09_end/components/FoodPrefsForm.vue @@ -0,0 +1,97 @@ + + + /* TODO: Add form data properties and methods */ + data() { + return { + passenger: '', + allergies: '', + allergydesc: '', + glutenfree: '', + vegan: '', + } + }, + /* TODO: Add methods */ + methods: { + onSubmit() { + if (this.passenger === '' || this.allergies === '' || this.allergydesc === '' || this.glutenfree === '' || this.vegan === '') { + alert('Form is incomplete. Please fill out every field.') + return + } + + let foodprefanswers = { + passenger: this.passenger, + allergies: this.allergies, + allergydesc: this.allergydesc, + glutenfree: this.glutenfree, + vegan: this.vegan, + } + + this.$emit('foodpref-submitted', foodprefanswers); + + this.passenger = ''; + this.allergies = ''; + this.allergydesc = ''; + this.glutenfree = ''; + this.vegan = ''; + + }, + }, + computed: { + roomService() { + if (this.berth) { + return `: No charge`; + } + return `: $24.99`; + } + }, +}) diff --git a/code/module-09/m09_end/index.html b/code/module-09/m09_end/index.html index c8dcd31..4d7fd8a 100644 --- a/code/module-09/m09_end/index.html +++ b/code/module-09/m09_end/index.html @@ -71,7 +71,7 @@

{{ featureDetails }}

- + - - - - - - - - + + ``` Now that the content of the component has been imported, we need to tell our HTML page where to display that content. We essentially create a set of opening and closing tags that use the name of the app component we created in the Javascript file (in this case, **food-prefs**). + - Add the `` tags below the comment that reads `TODO: Add component`. ```html -... -... ``` -If you render the HTML file now you should see an image like the one shown below, where the new component is displayed in the bottom left corner of the screen below the thumbnail images. +If you refresh the page in your browser you should see an image like the one shown below, where the new component is displayed in the bottom left corner of the screen below the thumbnail images. ![Screenshot showing the HTML page with the main product image on the left and 4 thumbnail images below it. Product name and description are displayed on the right. A new component is displayed within a bordered box that is titled "Food Preferences."](../media/m08-comp-food-prefs.png) diff --git a/m08-components-props/includes/3-props.md b/m08-components-props/includes/3-props.md index 17800b4..7450e89 100644 --- a/m08-components-props/includes/3-props.md +++ b/m08-components-props/includes/3-props.md @@ -1,5 +1,3 @@ -## Props - Props are custom attributes for passing data into a component. The `prop` must be defined within the same Javascript file where the `component` is defined, because all components are limited to the scope of the isolated component. ![Screenshot showing the HTML page with the main product image on the left and 4 thumbnail images below it. Product name and description are displayed on the right. A new component is displayed at bottom left within a bordered box that is titled "Food Preferences."](../media/m08-comp-food-prefs.png) @@ -9,10 +7,8 @@ Suppose we need this component to have access to a data property that is outside - Add `berth` as a boolean data property in **main.js** below the comment that reads `//TODO: Add berth property`. ```javascript -... //TODO: Add berth property berth: true, -... ``` Now we need to add a `prop` that will allow our `component` to have access to the `berth` data property. Add this in our component Javascript file so the component can receive that value from the main application. We can even add some validation for the prop, such as the `type` of value it should be passing and whether or not the value is `required`. @@ -31,7 +27,6 @@ app.component('food-prefs', { }, template: /*html*/ -... ``` To generate a specific case for use of the `berth` property within this particular `component` we can create a custom data property that is specific to our needs. We will accomplish this by defining a `computed` property in our **FoodPrefs.js** file. @@ -56,10 +51,8 @@ To generate a specific case for use of the `berth` property within this particul Back in our **index.html** file we are going to add the shorthand for `v-bind` to our `component` tag to ensure that it will reactively receive the new value of `berth` when that property is updated within our application. ```html -... -... ``` Now our Vue application should render as shown in the image below if the passenger making reservations has booked a cruise at the rate for "First class with sleeping berth" (i.e., the data property for `berth` in **main.js** is true). diff --git a/m10-animations/includes/0-overview.md b/m10-animations/includes/0-overview.md new file mode 100644 index 0000000..70766f0 --- /dev/null +++ b/m10-animations/includes/0-overview.md @@ -0,0 +1,16 @@ +Our sample project is a fictitious travel agency for booking space travel. We have components set up to allow users to book a cruise and then add travel features such as an asteroid Fireworks Display, Bullet Train Tour through the center of the Earth, and a ride-along in an alien spaceship to watch their titanium mining operations on the moon. + +Now we want to add some animations that will catch the user's interest and ... + +If you completed the prior exercises, your HTML file should look like the image below when viewed in a browser. You can continue to build upon your own files, or you can use the files in our [`starting code`](link). + +![Screenshot showing the HTML page with a selected product image on the left and 4 thumbnail images below it. The first thumbnail from the left is highlighted with a yellow background. Product name and description are displayed on the right. Two components with forms are shown at the bottom left of the screen. A yellow highlighted area includes a listing of food preferences already submitted by the user.](../media/m10_start.png) +- When the Food Preferences form is filled out and submitted, the results will appear in the yellow highlighted area above the form. +- The form is reset (form fields cleared out) at the end of the `onSubmit` event. +- Form validation is implemented. When a user fills out the form leaving one or more fields empty when they click the `Submit` button, the browser will pop up an alert message. + +## Learning Objectives + +Upon completion of this module you will: + +- Understand the different types of animations that Vue.js supports \ No newline at end of file diff --git a/m10-animations/includes/1-select-a-code-editor.md b/m10-animations/includes/1-select-a-code-editor.md new file mode 100644 index 0000000..db3d8e4 --- /dev/null +++ b/m10-animations/includes/1-select-a-code-editor.md @@ -0,0 +1,33 @@ +To follow along with the exercises and coding examples described in this learning path, you will want to use a code editor. If you already have a code editor that you prefer to use, **you can skip this module**. + +## Free code editors you can use for this project + +While a simple text editor such as **Notepad** on a Windows machine or **TextEdit** on a Mac would work, you may want to use an editor that provides functionality such as code-hinting and syntax highlighting. You are of course free to use whatever editor you prefer. + +We will demonstrate this project using **VS Code**. You can download and set up a free version of VS Code for the Windows, Mac or Linux platform from the [Visual Studio Code download site](https://code.visualstudio.com/download). + +## Extensions to install if you are using VS Code + +After completing the VS Code installation, you will also want to install the following extensions: + +- [Vue (syntax highlighting for Vue.js](https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue) - jcbuisson +- [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) - sarah.drasner +- [Vetur - Vue tooling for VS Code](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - jcbuisson +- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Ritwick Dey +- [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) - Tobermory + +## Live preview of HTML pages + +You can preview your project by double-clicking your index.html file to open it in a browser on your local computer. However, if you installed the **Live Server** extension in VS Code, you can open a live view of your HTML page that will be updated immediately every time you make a change and save the file. To do this, start the server by clicking the **Go Live** link in the blue footer at the bottom of the VS Code editor. + +![Image of the footer area in the bottom of the VS Code application prior to starting the Go Live server.](../media/liveserver_golive.png) + +You will briefly see text indicating that the server is starting, and the Go Live icon will then be replaced with the name of the Port where the live server is running. + +![Image of the footer area in the bottom of the VS Code application after starting the Go Live server.](../media/liveserver_port.png) + +## Keyboard shortcuts for Live Server + +You can then open the page in Live Server by using two consecutive keyboard commands: **Alt+L** followed by **Alt+O** on a Windows or Linux machine (**Option+L** followed by **Option+O** on a Mac). Note that the browser will not be displayed inside the VSCode editor, but rather will appear in a separate browser window. In the image below you can see VS Code on the left and an Edge browser running in Live Server on the right. + +![Side-by-side images showing the VS Code application on the left with an open HTML file, and the same HTML page on the right displayed in a Microsoft Edge browser running on a live server.](../media/vscode_liveserver.png) diff --git a/m10-animations/includes/2-animations.md b/m10-animations/includes/2-animations.md new file mode 100644 index 0000000..f6fd1a2 --- /dev/null +++ b/m10-animations/includes/2-animations.md @@ -0,0 +1,4 @@ +The Relecloud Galaxy Tours website is nearly complete, as shown in the image below. It now includes a form that users can fill out to submit their food preferences. For users who have previously completed a Galaxy Tour, another form encourages them to rate a previous Galaxy cruise experience. + +![Screenshot showing the HTML page with a selected product image on the left and 4 thumbnail images below it. The first thumbnail from the left is highlighted with a yellow background. Product name and description are displayed on the right. Two components with forms are shown at the bottom left of the screen. A yellow highlighted area includes a listing of food preferences already submitted by the user.](../media/m10_start.png) + diff --git a/m10-animations/media/m10_start.png b/m10-animations/media/m10_start.png new file mode 100644 index 0000000..e9c1dd0 Binary files /dev/null and b/m10-animations/media/m10_start.png differ diff --git a/m11-vue-cli-and-developer-tools/includes/0-overview.md b/m11-vue-cli-and-developer-tools/includes/0-overview.md new file mode 100644 index 0000000..3e53017 --- /dev/null +++ b/m11-vue-cli-and-developer-tools/includes/0-overview.md @@ -0,0 +1,10 @@ +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. + +## 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 +- Understand how to use the Vue UI (Graphical User Interface) to create and manage Vue projects +- Use `npm` to build a Vue project +- Run `npm` to run serve \ No newline at end of file diff --git a/m11-vue-cli-and-developer-tools/includes/1-select-a-code-editor.md b/m11-vue-cli-and-developer-tools/includes/1-select-a-code-editor.md new file mode 100644 index 0000000..db3d8e4 --- /dev/null +++ b/m11-vue-cli-and-developer-tools/includes/1-select-a-code-editor.md @@ -0,0 +1,33 @@ +To follow along with the exercises and coding examples described in this learning path, you will want to use a code editor. If you already have a code editor that you prefer to use, **you can skip this module**. + +## Free code editors you can use for this project + +While a simple text editor such as **Notepad** on a Windows machine or **TextEdit** on a Mac would work, you may want to use an editor that provides functionality such as code-hinting and syntax highlighting. You are of course free to use whatever editor you prefer. + +We will demonstrate this project using **VS Code**. You can download and set up a free version of VS Code for the Windows, Mac or Linux platform from the [Visual Studio Code download site](https://code.visualstudio.com/download). + +## Extensions to install if you are using VS Code + +After completing the VS Code installation, you will also want to install the following extensions: + +- [Vue (syntax highlighting for Vue.js](https://marketplace.visualstudio.com/items?itemName=jcbuisson.vue) - jcbuisson +- [Vue VSCode Snippets](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets) - sarah.drasner +- [Vetur - Vue tooling for VS Code](https://marketplace.visualstudio.com/items?itemName=octref.vetur) - jcbuisson +- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - Ritwick Dey +- [es6-string-html](https://marketplace.visualstudio.com/items?itemName=Tobermory.es6-string-html) - Tobermory + +## Live preview of HTML pages + +You can preview your project by double-clicking your index.html file to open it in a browser on your local computer. However, if you installed the **Live Server** extension in VS Code, you can open a live view of your HTML page that will be updated immediately every time you make a change and save the file. To do this, start the server by clicking the **Go Live** link in the blue footer at the bottom of the VS Code editor. + +![Image of the footer area in the bottom of the VS Code application prior to starting the Go Live server.](../media/liveserver_golive.png) + +You will briefly see text indicating that the server is starting, and the Go Live icon will then be replaced with the name of the Port where the live server is running. + +![Image of the footer area in the bottom of the VS Code application after starting the Go Live server.](../media/liveserver_port.png) + +## Keyboard shortcuts for Live Server + +You can then open the page in Live Server by using two consecutive keyboard commands: **Alt+L** followed by **Alt+O** on a Windows or Linux machine (**Option+L** followed by **Option+O** on a Mac). Note that the browser will not be displayed inside the VSCode editor, but rather will appear in a separate browser window. In the image below you can see VS Code on the left and an Edge browser running in Live Server on the right. + +![Side-by-side images showing the VS Code application on the left with an open HTML file, and the same HTML page on the right displayed in a Microsoft Edge browser running on a live server.](../media/vscode_liveserver.png) diff --git a/m11-vue-cli-and-developer-tools/includes/2-vue-cli.md b/m11-vue-cli-and-developer-tools/includes/2-vue-cli.md new file mode 100644 index 0000000..18d42ca --- /dev/null +++ b/m11-vue-cli-and-developer-tools/includes/2-vue-cli.md @@ -0,0 +1,103 @@ +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 +``` +```bash +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. +- 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) + +The next step would be to **change** to the `directory` where your project is located, using the command shown below. 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) + +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`. We will discuss the `router` in more detail after we demonstrate how to set up a project using the Vue UI in the next section. + +![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. diff --git a/m11-vue-cli-and-developer-tools/includes/3-vue-ui.md b/m11-vue-cli-and-developer-tools/includes/3-vue-ui.md new file mode 100644 index 0000000..d045cd2 --- /dev/null +++ b/m11-vue-cli-and-developer-tools/includes/3-vue-ui.md @@ -0,0 +1,74 @@ +In the previous section we developed a Vue project using the `Vue CLI` (Command Line Interface). In this section we will build a new project using the Vue graphical user interface (`Vue UI`). + +Start by changing to the directory location where you want to save your project. Then execute the command `vue ui` in the terminal, as shown below. + +```bash +vue ui +``` + +![Screenshot showing the Command Prompt terminal on a Windows computer. The "vue ui" command has started the GUI interface, which is ready to view on localhost:8000.](../media/Vue-UI_01.png) + +Once you see the message `Ready on http://localhost:8000`, your default browser will open to display the Vue **Project dashboard**. Leave the terminal window open, as the `localhost` version of your Vue project will no longer run in the browser after the terminal window is closed. + +![Screenshot showing the Edge browser open to the Vue Project dashboard. "Dashboard" is selected in the left navigation panel. The center panel displays a "Welcome to your new project!" message and a "Kill port".](../media/Vue-UI_02.png) + +The Project dashboard contains several types of information, with links to each area available in the left navigation panel. If you click the `Plugins` link you will see the plugins that are installed by default when new projects are created. These typically include: +- @vue/cli-service +- @vue/cli-plugin-babel +- @vue/cli-plugin-eslint +- @vue/cli-plugin-router +- @vue/cli-plugin-vuex + +You can change these default settings if you wish, and you can easily add another plugin by clicking the `+ Add plugin` button at the top right of the screen. + +Project dependencies can be accessed by clicking the `Dependencies` link. On this screen you will find two types of dependencies: +- Main dependencies, which include the core JavaScript files needed to provide Vue functionality. +- Development dependencies, which are optional functionalities that assist you in the development process. + +If you click the `Configuration` tab you will be able to make changes in the General settings that have been established by default. + +The `Tasks` tab is where you will do most of your work. Click the `Run task` button to `build` a project (i.e., to compile a project for `production`). The `Run task` button will immediately be changed to a `Stop task` button, so you can interrupt this build task if needed. You will be able to see data being generated in the bottom panels while the build is being executed. A notice will appear in the status bar at bottom left of the screen to let you know that the build has started. + +![Screenshot showing the Edge browser open to the Vue Project dashboard, with "Tasks" selected in the left navigation panel. A project "build" has been started.](../media/Vue-UI_03.png) + +When the build is completed, you will see the final statistics in the lower panels on the right. + +![Screenshot showing the Edge browser open to the Vue Project dashboard, with "Tasks" selected in the left navigation panel. A project "build" has been completed, and build statistics are displayed in the panels at the bottom of the screen.](../media/Vue-UI_04.png) + +You can access the `Vue Project Manager` screen by clicking the icon of a house in the status bar in the far left corner at the bottom of your screen. The `Projects` tab contains a listing of all your Vue projects. Now that you have run the "build" task you will be able to create a project by clicking the `+ Create` link in the menu bar at the top of the screen. + +- Click `+ Create` +- Select a project folder +- Click the `Create a new project here` button +- Type a `project name` in the Project folder +- Leave "Default" as the Package manager +- You can optionally initialize a git repository +- Select presets + - Choose Manual +- Select Router +- Select Vuex +- Linter / Formatter is already selected +- Scroll to bottom and select "Use config files" +- Click Next button +- Leave "Lint on save" +- Click the Select dropdown and choose "ESLint + Prettier" +- Click "Create Project" button + +Optionally you can save these settings as a new preset, or just click "Continue without saving". The project creation process will begin, and you will see messages while the process is running. + +```html + Installing CLI plugins. This might take a while... + ... Creating project + ... Installing additional dependencies +``` + +Once the installation is complete you will see a list of the "Installed plugins". + +If we return to the **Vue Project Manager** screen by clicking the house icon, the project we just created will now be listed on that screen. + +![Screenshot showing the Vue Project Manager, with the "cruise-details" project listed.](../media/Vue-UI_05.png) + +- If you have previously created a project you can import it here using the `Import` link in the top navigation menu. +- For any project that is listed in the Vue Project Manager you can click the `Open in editor` link if you would like to open the project files in VSCode for editing. + +![Screenshot showing the "cruise-details" project open in VSCode, with the files listed in the left panel.](../media/Vue-UI_06.png) diff --git a/m11-vue-cli-and-developer-tools/includes/4-development-tools.md b/m11-vue-cli-and-developer-tools/includes/4-development-tools.md new file mode 100644 index 0000000..20b0073 --- /dev/null +++ b/m11-vue-cli-and-developer-tools/includes/4-development-tools.md @@ -0,0 +1,57 @@ +FOLDER STRUCTURE +- node_modules - contains all of the libraries we need for our project +- public - put all the files that you don't want to "process" through a bundler (e.g., icon images) +- src - contains application-specific files, such as assets (images, CSS files, etc.), components (pieces of reusable code that can be displayed within the main application), and views (files for the different pages of our app). +- App.vue - root component that contains all application components +- main.js - calls the Vue.js library and mounts our app to the DOM +- router.js +- store.js (for Vuex) +- .gitignore - we can specify what we want Git to ignore +- {} package.json - which lets npm handle the dependencies for our project + +main.js file +import Vue from "vue"; +import App from "./App.vue"; +import router from "./router"; +import store from "./store"; + +new Vue instance +render the app +mount the app + +When the app is rendered in the HTML file, it first displays the contents in the **public** folder. The **index.html** file in that folder contains very little content. The important part of the file is the `
` with the id="app". This is where the built Vue files will be inserted (i.e., where the app will be mounted). You may notice the comment in **index.html** that reads: "built files will be auto injected". + +Vue files are easier to create than JavaScript components because they are built with common `` tags. However, these files are saved with the .vue file extension, which is not natively understood by a browser. So these .vue files have to be "built" before they can be properly rendered in an HTML interface using a build tool. + +## Build Process + +In the command line run the following command: +`npm run build` + +If the build is successful you will receive a confirmation message indicating that the `dist` directory is ready to be deployed. Deployment instructions can be found at https://cli.vuejs.org/guide/deployment.html. The `dist` directory must be served by an HTTP server, so it will not work if you open the **index.html** file in your `dist` folder. The recommendation from the Vue website is to preview your production build locally using a Node.js static file server. However, if you have installed VSCode as your editor, you can run the built files using the VSCode Live Server. From the "Welcome" screen in VSCode, click "Open folder" and select your project folder. + +Notice that the new folder named `dist` has been added to the cruise-details folder after the build process is complete. If we open the **index.html** file in that folder, we can see that the previous comment has been replaced by two new script tags. These scripts reference the Javascript files that have been bundled and placed in the `js` folder as part of the build process we just executed. The `chunk-vendors` files include all of our dependencies, and the `app` files contain all of our application-specific code - including the code that was in the original **main.js** file. + +In the **views` folder under the **src** folder you will see two files with the **.vue** extension. If you open one of these files you might see text that is displayed in all one color (e.g., white font). "Vetur" can enable syntax highlighting of .vue files. It also adds features designed to assist deelopers. If you have not installed the Vetur extension, you may see a message at the top of the screen indicating that the "vetur" extension is recommended for htis file type, along with an **Install** button. Be sure you click the "reload" button after the installation is complete, or open and close VSCode. + +>>HINT: If you don't see the "vetur" extension you can search for the extension. + +## Vetur extension + +## Syntax highlighting +Now when you open the Home.vue file in VSCode you can see that syntax highlighting is in effect for both HTML and JavaScript code. + +## Tag completion +Vetur also includes time-saving snippets of code that you can easily add to your project files. Right-click on the `components` folder and select "New File". Name it "EventDetails.vue". Type the word `vue` at the top of the new file. A dropdown list will appear to show you the types of snippets you can create. Clicking ` with default.vue` will create the skeleton tags you will likely need for a new Vue component: +- `