brightlightkim

If you are having the issue that the time for loading and building vue-cli is too long, you are probably trying to run the command in Windows system. This will dramatically increase your time since it goes from Linux System to Windows System. And WSL2 CANNOT sense the change in the file So go to your LINUX system and do the vue create sample-project cd sample-project npm install npm run serve Th..

Some tools Animate.css Bootstrap FontAwesome Vue Routers $npm i --save animate.css bootstrap jquery popper.js vue-router $npm i --save @fortawesome/fontawesome-free @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/vue-fontawesome main.js import Vue from "vue"; import App from "./App.vue"; import "bootstrap"; import { library } from "@fortawesome/fontawesome-svg-co..

Creating reuable components Vue.compent('price', { data: function() { return { prefix: '$', value: 22.34, precision: 2 } }, template: ' {{ this.prefix + Number.paseFloat(this.value).toFixed(this.precision) }} ' }); //HTML //You can now use it with Using Props - like an HTML variable - simple as array of things //HTML //JS Vue.compent('price', { data: function() { return { prefix: '$', value: 22...

Vue.js (Web-Client) template html script JS style CSS Vue.js Features One way data publishing When return to parent, send event to parents To be more deterministic >> maintaining big why did data change? App level >> we can always listens to. Vue.js Simple Commands: : bind v-for for loop Vue knows with key (2nd one in the list and make an update) Change all of those list >> then just use the ind..

//HTML - //JS methods: { deleteItem: function(id) { if(this.cart[id].qty > 1){ this.cart[id].qty--; } else { this.cart.splice(id, 1); //remove JS object } } } //modifiers make Bootstrap menu interesting and fun

//JS computed: { cartTotal: function() { let sum = 0; for (key in this.cart) { sum = sum+this.cart[key].product.price * this.cart[key].qty); } return sum; }, cartQty: function() { let qty = 0; for (key in this.cart) { qty = qty+this.cart[key].qty); } return qty; } }

//HTML {{item.product.price | currency}} methods: { addItem: function(product) { var whichProduct; var existing = this.cart.filter(function(item, index) { if (item.product.id == Number(product.id)) { whichProduct = index; return true; } else { return false; } }); if (existing.length) { this.cart[whichProduct].qty++; }else { this.cart.push({product: product, qty: 1}) } } }

{{item.qty}} {{item.name}} {{item.price |currency}} //Use Bootstrap Features

filters: { currency: function(value) { return Number.parseFloat(value).toFixed(2); } } // defined out of main component // ex: Vue.filter('currency', function() { }) // They can be chained // filters are available in any v-bind

Art Libraries: Bulma Basic Framework Import it and classes for Raw HTML BootStrap Buefy Bulma + Vue Vuetify: These libraries help us with designing websites. (Component Libraries)