[Pre Lab] Session 8.2: Vue.js - basic concepts
1. Clone the following repository
$ git clone https://github.com/M-Gharib/ESI-W8.1.git
2. Project setup - install dependencies
$ npm install
3. Run the project, the project should run on http://localhost:8080/, open it in your browser
$ npm run serve
4. Check the code in src/router/index.js
, to see how many routes are defined.
5. Check the code in src/App.vue
, to see how many router-links are defined.
6. Check the components in the src/components
directory. The code in each of them (compoList.vue
, newCompo.vue
, and getData.vue
) is simple and has been covered in the lecture, check their code and try to understand it.
7. Check the views in the src/views
directory. The code in each of them (ViewOne.vue
, and FetchView.vue
) is simple and has been covered in the lecture. In short, ViewOne.vue
contains all the basic commands of Vue, go over them one by one, the code is annotated so they are easy to be understood. FetchView.vue
provides a simple example of the use of FetchAPI to fetch data from an online resource. Also, try to understand how FetchView.vue
is using getData.vue
to represent the passed data (props).