Vue.js

Question 1

Vue

Answer 1

A progressive framework for building user interfaces, that is designed to be incrementally adoptable.
Vue is a non-opinionated interface and can be easily integrated into other libraries and frameworks.

Question 2

Progressive framework

Answer 2

Implementing by extending HTML with new tags or attributes

Question 3

Single Page Application

Answer 3

Serves a single HTML page and all other “pages” in the site are generated using DOM manipulation of the original HTML with new data retrieved from web API using JavaScript.

Question 4

Parts of a Vue Project Folders

Answer 4

1. node_modules
2. public
3. src

Question 5

Parts of a Vue Project - Non-Folders

Answer 5

1. .gitignore
2. babel.config.js
3. package-lock.json
4. package.json
5. README.md: default readme file

Question 6

Node_modules

Answer 6

JavaScript libraries required to run our project and the current Toolchain
Similar to Maven’s .m2 folder in Java, but per project instead of global
Created when “npm install” is run for a project

Question 7

Public

Answer 7

Initial HTML file and other static files

Question 8

Src

Answer 8

Vue Source Code - where most vue application development is done
sub-folders
assets - images, css, reusable js scripts, etc.
components - vue components (.vue files)
App.vue - starting component. A place to add global components like a Header or Footer.
The starting component does not need to be App.vue, but it is in the default project.
main.js - Single Vue instance that starts Vue running and loads the initially components (main method)

Question 9

.gitignore

Answer 9

sensible defaults for .gitignore

Question 10

babel.config.js

Answer 10

babel configuration, compiles languages to JS

Question 11

package-lock.json

Answer 11

It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.

Question 12

package.json

Answer 12

The NPM package meta file that contains all the build dependencies and build commands

Question 13

Toolchain

Answer 13

NPM
ESLint
Babel - JavaScript compiler and Transpiler that provides Polyfill

Question 14

NPM

Answer 14

Node Package Manager : manages dependencies and builds (like maven did for Java). https://docs.npmjs.com/about-npm/

Question 15

ESLint

Answer 15

static code analysis that finds problematic coding patterns and enforces coding styles https://eslint.org/docs/about/

Question 16

Babel

Answer 16

1. Compile - compiles other languages, like TypeScript, to JavaScript
2. Transpile - converts modern JavaScript syntax ( ECMAScript 6 ), which is not yet fully supported by browsers, into older style JavaScript that those browsers can use.
3. Polyfill - fills gaps in support for newer web features, like HTML5, by providing functionality in a way that devices that do not support those newer features do support.
   https: //babeljs.io/docs/en/