Module 7 - Vue CLI

Question 1

What is Vue CLI

Answer 1

Vue CLI is Vue Command Line Interface. It is the Standard Tooling for Vue.js Development

Question 2

How do you get all the dependencies in node_modules

Answer 2

You need to run the npm install command which will go and fetch all the dependencies that are mentioned in the package.json file and their dependencies recursively

Question 3

How do you run the dev server that is part of the vue cli?

Answer 3

You need to run the npm run serve command in the terminal which will get the dev server working

Question 4

Where do I get the createApp function if there is no global Vue object

Answer 4

In order to use the createApp function you need to import it from the ‘vue’ model with the following syntax:
import {createApp} from ‘vue’;

Question 5

What are the 3 sections inside a .vue file?

Answer 5

the 3 sections are:

Question 6

What does the script section in the .vue file contain?

Answer 6

the script section holds the configuration object for the app (or the component) . It holds the regular sections of data, computed, methods, watch that are required for the app / template

Question 7

How do you get the vue configuration object into the vue app?

Answer 7

The vue app is defined in the main.js file. There we have imported the createApp function from the Vue library. To use the config object that we created in the App.vue file in the createApp function we need to import the object into a variable in the main.js file and send it as an argument to the createApp function.
It looks something like this:

import createApp from “Vue”;
import App from “./App.vue”;
createApp(App);
import App from ./App.js;

Question 8

Why do the following two import statements look different?
import createApp from “vue”;
import App from “./App.vue”;

Answer 8

The 2 import statements look different since the first import import createApp from “vue”; is an import from a library in node_modules while the second import import App from “./App.vue”; is an import from a file in our project and therefor we need to use a relative path to where the file is located.

Question 9

What is the difference between a default import and a named import?

Answer 9

With named exports, one can have multiple named exports per file. Then import the specific exports they want surrounded in braces. The name of imported module has to be the same as the name of the exported module.

One can have only one default export per file. When we import we have to specify a name and import like:
// import
import MyDefaultComponent from "./MyDefaultExport";
// export
const MyComponent = () => {}
export default MyComponent;
The naming of import is completely independent in default export and we can use any name we like.

Question 10

How do you add a component to the app

Answer 10

You add a component to the app by first importing the component in the main.js file. Then you need to let the app know that there is a component that it can use and how it should be referred to in the html when you work with it. The syntax to doing that is
app.component(html-name, componentName);