When opening site we are greeted by the main page, where is routing buttons and the git hub link:
When hovering over the links the highlighting shows that we can go to another page:
Let's go on the first page. Here we can see all our items from vuex storage:
By pressing on the green/red buttons we can increase/decrease count of items for order.
After click on the image, you can see more info about item:
Here you can also increase/decrease count of items.
Let's add some items and go to the card page. Here we can see all our chosen items:
If you want to remove an item from the cart, simply reduce its count to zero. It will disappear from the page automatically.
Let's try to make an order:
Oops, site don't know you as customer!
After closing this alert, you will be automatically moved to the profile page:
Note, that you should fill all gaps, otherwise you won't be able to save your profile and order.
After saving profile, let's try to make an order again. We will be moved to the orders page:
Here you will see all items from all orders. Also here you can clear orders history:
Installed with npm:
npm i webpack -D
npm i webpack-cli -D
So that we can write in the new ES6 syntax and above and have it all translate to ES5, let's add babel to the project. For babel to work with webpack vue js you need to install babel-loader, babel itself and its presets:
npm i babel-loader @babel/core @babel/preset-env -D
For webpack to understand vue syntax you need to install vue itself, vue-loader + vue-loader asks us to install vue-loader-plugin. You will also need vue-template-compiler to pre-compile vue templates:
npm i vue vue-loader vue-loader-plugin vue-template-compiler -D
To build the styles, install the following loaders:
npm i style-loader sass-loader css-loader -D
To get the index.html into the build folder and link it to vue automatically, set:
npm i html-webpack-plugin -D
npm i webpack-dev-server -D
This was written because of warning: warning: LF will be replaced by CRLF in node_modules/... The file will have its original line endings in your working directory
git config core.autocrlf true
vue-router:
npm i vue-router
npm i vuex
eslint:
npm install eslint --save-dev
Set up a configuration file:
npx eslint --init