Topic: In this project we are working on a e-commerce site that are customer centered and involve purchase process
Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications.
History: Vue was created by Evan You after working for Google using AngularJS in several projects. The first source code commit to the project was dated July 2013, and Vue was first released the following February, in 2014.
How it related to our class:With Vue, we can extend basic HTML elements to encapsulate reusable code, which help increase usability, which would reduce manual coding.
Theory: Vue uses an HTML-based template syntax that allows binding the rendered DOM to the underlying Vue instance's data. All Vue templates are valid HTML that can be parsed by specification-compliant browsers and HTML parsers. ue compiles the templates into virtual DOM render functions.
First, you will need Visual Studio and the Node.js development workload
Click here to download Visual Studio
Next we will need to add a Vue.js extension , go to tools > Get tools an features, then choose Node.js development
workload, then modify
From now, we can create a Vue.js project, go to search bar on top and type Basic Vue.js Web Application
for your template
Name your project and we done, hooray, let's get your dream come true.
A single-page design with multiple virtual pages( like lab2), app.vue is a master page
View Products has a search and add to cart function to get the products you want to buy, cart.length is used to keep track amount of add and remove
View Cart has a remove item from the cart, cart.length will decrease each time you hit.
Checkout page print out added items and price total
We create an e-commerce website using Vue framework where customers can purchase items online.Our items are sport gears focus on anime, gaming theme to encourage everyone to work out. We also get a chance to learn about vue adn their components.