├── 01 - Your First Vue Application └── todo │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ └── main.js ├── 03 - HTML Primer └── htmlcssprimer │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ └── main.js ├── 04 - JavaScript Primer └── jsprimer │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ ├── main.js │ └── maths │ ├── index.js │ ├── operations.js │ └── sum.js ├── 05 - SportsStore └── sportsstore │ ├── authMiddleware.js │ ├── babel.config.js │ ├── data.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── CategoryControls.vue │ ├── HelloWorld.vue │ ├── PageControls.vue │ ├── ProductList.vue │ └── Store.vue │ ├── main.js │ └── store │ └── index.js ├── 06 - SportsStore - Checkout and Orders └── sportsstore │ ├── authMiddleware.js │ ├── babel.config.js │ ├── data.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── CartSummary.vue │ ├── CategoryControls.vue │ ├── Checkout.vue │ ├── HelloWorld.vue │ ├── OrderThanks.vue │ ├── PageControls.vue │ ├── ProductList.vue │ ├── ShoppingCart.vue │ ├── ShoppingCartLine.vue │ ├── Store.vue │ └── ValidationError.vue │ ├── main.js │ ├── router │ └── index.js │ └── store │ ├── cart.js │ ├── index.js │ └── orders.js ├── 07 - SportsStore - Scaling and Administration └── sportsstore │ ├── authMiddleware.js │ ├── babel.config.js │ ├── data.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── CartSummary.vue │ ├── CategoryControls.vue │ ├── Checkout.vue │ ├── HelloWorld.vue │ ├── OrderThanks.vue │ ├── PageControls.vue │ ├── ProductList.vue │ ├── Search.vue │ ├── ShoppingCart.vue │ ├── ShoppingCartLine.vue │ ├── Store.vue │ ├── ValidationError.vue │ └── admin │ │ ├── Admin.vue │ │ ├── Authentication.vue │ │ ├── OrderAdmin.vue │ │ └── ProductAdmin.vue │ ├── main.js │ ├── router │ └── index.js │ └── store │ ├── auth.js │ ├── cart.js │ ├── index.js │ └── orders.js ├── 08 - SportsStore - Administration and Deployment └── sportsstore │ ├── Dockerfile │ ├── authMiddleware.js │ ├── babel.config.js │ ├── data.js │ ├── data.json │ ├── deploy-package.json │ ├── dist │ ├── css │ │ └── chunk-vendors.291cfd91.css │ ├── favicon.ico │ ├── fonts │ │ ├── fontawesome-webfont.674f50d2.eot │ │ ├── fontawesome-webfont.af7ae505.woff2 │ │ ├── fontawesome-webfont.b06871f2.ttf │ │ └── fontawesome-webfont.fee66e71.woff │ ├── img │ │ └── fontawesome-webfont.912ec66d.svg │ ├── index.html │ └── js │ │ ├── admin.84f71a1c.js │ │ ├── admin.84f71a1c.js.map │ │ ├── app.87738c6f.js │ │ ├── app.87738c6f.js.map │ │ ├── chunk-vendors.56adf36a.js │ │ └── chunk-vendors.56adf36a.js.map │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── server.js │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── CartSummary.vue │ ├── CategoryControls.vue │ ├── Checkout.vue │ ├── HelloWorld.vue │ ├── OrderThanks.vue │ ├── PageControls.vue │ ├── ProductList.vue │ ├── Search.vue │ ├── ShoppingCart.vue │ ├── ShoppingCartLine.vue │ ├── Store.vue │ ├── ValidationError.vue │ └── admin │ │ ├── Admin.vue │ │ ├── Authentication.vue │ │ ├── OrderAdmin.vue │ │ ├── ProductAdmin.vue │ │ └── ProductEditor.vue │ ├── main.js │ ├── router │ └── index.js │ └── store │ ├── auth.js │ ├── cart.js │ ├── index.js │ └── orders.js ├── 09 - Understanding Vue.js └── nomagic │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.html │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ └── main.js │ └── vue.config.js ├── 10 - Understanding Vue.js Projects └── projecttools │ ├── babel.config.js │ ├── dist │ ├── css │ │ └── app.b938236b.css │ ├── favicon.ico │ ├── img │ │ └── logo.82b9c7a5.png │ ├── index.html │ └── js │ │ ├── app.b671844a.js │ │ ├── app.b671844a.js.map │ │ ├── chunk-vendors.02da9ab1.js │ │ └── chunk-vendors.02da9ab1.js.map │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── server.js │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── main.js │ ├── router.js │ ├── store.js │ └── views │ │ ├── About.vue │ │ └── Home.vue │ └── vue.config.js ├── 11 - Understanding Data Bindings └── templatesanddata │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ └── main.js ├── 12 - Using the Basic Directives └── templatesanddata │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ └── main.js ├── 13 - Using the Repeater Directive └── templatesanddata │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ └── main.js ├── 14 - Handling Events └── templatesanddata │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ └── main.js ├── 15 - Working with Form Elements └── templatesanddata │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── HelloWorld.vue │ ├── main.js │ └── validationRules.js ├── 16 - Components └── templatesanddata │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── Child.vue │ ├── HelloWorld.vue │ └── ProductDisplay.vue │ ├── main.js │ └── validationRules.js ├── 17 - Understanding the Component Lifecycle └── lifecycles │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── HelloWorld.vue │ │ └── MessageDisplay.vue │ └── main.js │ └── vue.config.js ├── 18 - Loosely-Coupled Components └── productapp │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── EditorField.vue │ ├── HelloWorld.vue │ ├── ProductDisplay.vue │ └── ProductEditor.vue │ └── main.js ├── 19 - Using RESTful Web Services └── productapp │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── restData.js │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── EditorField.vue │ ├── ErrorDisplay.vue │ ├── HelloWorld.vue │ ├── ProductDisplay.vue │ └── ProductEditor.vue │ ├── main.js │ └── restDataSource.js ├── 20 - Using a Data Store └── productapp │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── restData.js │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── EditorField.vue │ ├── ErrorDisplay.vue │ ├── HelloWorld.vue │ ├── ProductDisplay.vue │ └── ProductEditor.vue │ ├── main.js │ ├── restDataSource.js │ └── store │ ├── index.js │ └── preferences.js ├── 21 - Dynamic Components └── productapp │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── restData.js │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── DataSummary.vue │ │ ├── EditorField.vue │ │ ├── ErrorDisplay.vue │ │ ├── HelloWorld.vue │ │ ├── LoadingMessage.vue │ │ ├── ProductDisplay.vue │ │ └── ProductEditor.vue │ ├── main.js │ ├── restDataSource.js │ └── store │ │ ├── index.js │ │ ├── navigation.js │ │ └── preferences.js │ └── vue.config.js ├── 22 - URL Routing └── productapp │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── restData.js │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── DataSummary.vue │ │ ├── EditorField.vue │ │ ├── ErrorDisplay.vue │ │ ├── HelloWorld.vue │ │ ├── LoadingMessage.vue │ │ ├── ProductDisplay.vue │ │ └── ProductEditor.vue │ ├── main.js │ ├── restDataSource.js │ ├── router │ │ └── index.js │ └── store │ │ ├── index.js │ │ ├── navigation.js │ │ └── preferences.js │ └── vue.config.js ├── 23 - URL Routing Elements └── productapp │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── restData.js │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── DataSummary.vue │ │ ├── EditorField.vue │ │ ├── ErrorDisplay.vue │ │ ├── HelloWorld.vue │ │ ├── LoadingMessage.vue │ │ ├── Preferences.vue │ │ ├── ProductDisplay.vue │ │ ├── ProductEditor.vue │ │ ├── Products.vue │ │ └── SideBySide.vue │ ├── main.js │ ├── restDataSource.js │ ├── router │ │ └── index.js │ └── store │ │ ├── index.js │ │ ├── navigation.js │ │ └── preferences.js │ └── vue.config.js ├── 24 - Advanced URL Routing └── productapp │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── restData.js │ ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── DataSummary.vue │ │ ├── EditorField.vue │ │ ├── ErrorDisplay.vue │ │ ├── FilteredData.vue │ │ ├── HelloWorld.vue │ │ ├── LoadingMessage.vue │ │ ├── MessageDisplay.vue │ │ ├── Preferences.vue │ │ ├── ProductDisplay.vue │ │ ├── ProductEditor.vue │ │ ├── Products.vue │ │ └── SideBySide.vue │ ├── main.js │ ├── restDataSource.js │ ├── router │ │ ├── basicRoutes.js │ │ ├── index.js │ │ └── sideBySideRoutes.js │ └── store │ │ ├── index.js │ │ ├── navigation.js │ │ └── preferences.js │ └── vue.config.js ├── 25 - Transitions └── transitions │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── HelloWorld.vue │ ├── ListMaker.vue │ ├── ListMakerControls.vue │ ├── Numbers.vue │ └── SimpleDisplay.vue │ ├── main.js │ └── router │ └── index.js ├── 26 - Extending Vue.js └── extendingvue │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── HelloWorld.vue │ ├── Numbers.vue │ └── Subtraction.vue │ ├── directives │ └── colorize.js │ ├── main.js │ ├── mixins │ └── numbersMixin.js │ └── plugins │ └── maths │ ├── Operation.vue │ ├── componentFeatures.js │ ├── directives.js │ ├── filters.js │ ├── globals.js │ └── index.js ├── 9781484238042.jpg ├── Contributing.md ├── LICENSE.txt ├── README.md └── errata.md /01 - Your First Vue Application/todo/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /01 - Your First Vue Application/todo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "bootstrap": "^4.0.0", 12 | "vue": "^2.5.16" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.0.0-beta.16", 16 | "@vue/cli-plugin-eslint": "^3.0.0-beta.16", 17 | "@vue/cli-service": "^3.0.0-beta.16", 18 | "vue-template-compiler": "^2.5.16" 19 | }, 20 | "eslintConfig": { 21 | "root": true, 22 | "env": { 23 | "node": true 24 | }, 25 | "extends": [ 26 | "plugin:vue/essential", 27 | "eslint:recommended" 28 | ], 29 | "rules": {}, 30 | "parserOptions": { 31 | "parser": "babel-eslint" 32 | } 33 | }, 34 | "postcss": { 35 | "plugins": { 36 | "autoprefixer": {} 37 | } 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not ie <= 8" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /01 - Your First Vue Application/todo/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/01 - Your First Vue Application/todo/public/favicon.ico -------------------------------------------------------------------------------- /01 - Your First Vue Application/todo/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | todo 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /01 - Your First Vue Application/todo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/01 - Your First Vue Application/todo/src/assets/logo.png -------------------------------------------------------------------------------- /01 - Your First Vue Application/todo/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | 8 | new Vue({ 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /03 - HTML Primer/htmlcssprimer/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /03 - HTML Primer/htmlcssprimer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "htmlcssprimer", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "bootstrap": "^4.0.0", 12 | "vue": "^2.5.16" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.0.0-beta.16", 16 | "@vue/cli-plugin-eslint": "^3.0.0-beta.16", 17 | "@vue/cli-service": "^3.0.0-beta.16", 18 | "vue-template-compiler": "^2.5.16" 19 | }, 20 | "eslintConfig": { 21 | "root": true, 22 | "env": { 23 | "node": true 24 | }, 25 | "extends": [ 26 | "plugin:vue/essential", 27 | "eslint:recommended" 28 | ], 29 | "rules": {}, 30 | "parserOptions": { 31 | "parser": "babel-eslint" 32 | } 33 | }, 34 | "postcss": { 35 | "plugins": { 36 | "autoprefixer": {} 37 | } 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not ie <= 8" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /03 - HTML Primer/htmlcssprimer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/03 - HTML Primer/htmlcssprimer/public/favicon.ico -------------------------------------------------------------------------------- /03 - HTML Primer/htmlcssprimer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | htmlcssprimer 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /03 - HTML Primer/htmlcssprimer/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/03 - HTML Primer/htmlcssprimer/src/assets/logo.png -------------------------------------------------------------------------------- /03 - HTML Primer/htmlcssprimer/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | 8 | new Vue({ 9 | render: h => h(App) 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "jsprimer", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "vue": "^2.5.16" 12 | }, 13 | "devDependencies": { 14 | "@vue/cli-plugin-babel": "^3.0.0-beta.16", 15 | "@vue/cli-plugin-eslint": "^3.0.0-beta.16", 16 | "@vue/cli-service": "^3.0.0-beta.16", 17 | "vue-template-compiler": "^2.5.16" 18 | }, 19 | "eslintConfig": { 20 | "root": true, 21 | "env": { 22 | "node": true 23 | }, 24 | "extends": [ 25 | "plugin:vue/essential", 26 | "eslint:recommended" 27 | ], 28 | "rules": { 29 | "no-console": "off", 30 | "no-declare": "off", 31 | "no-unused-vars": "off" 32 | }, 33 | "parserOptions": { 34 | "parser": "babel-eslint" 35 | } 36 | }, 37 | "postcss": { 38 | "plugins": { 39 | "autoprefixer": {} 40 | } 41 | }, 42 | "browserslist": [ 43 | "> 1%", 44 | "last 2 versions", 45 | "not ie <= 8" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/04 - JavaScript Primer/jsprimer/public/favicon.ico -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | jsprimer 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/04 - JavaScript Primer/jsprimer/src/assets/logo.png -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/src/main.js: -------------------------------------------------------------------------------- 1 | import { asyncAdd } from "./maths"; 2 | 3 | let values = [10, 20, 30, 40, 50]; 4 | 5 | async function doTask() { 6 | let total = await asyncAdd(values); 7 | console.log(`Main Total: ${total}`); 8 | } 9 | 10 | doTask(); 11 | -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/src/maths/index.js: -------------------------------------------------------------------------------- 1 | import addition from "./sum"; 2 | 3 | export function mean(values) { 4 | return addition(values)/values.length; 5 | } 6 | 7 | export { addition }; 8 | export * from "./operations"; 9 | 10 | export function asyncAdd(values) { 11 | return new Promise((callback) => { 12 | setTimeout(() => { 13 | let total = addition(values); 14 | console.log(`Async Total: ${total}`); 15 | callback(total); 16 | }, 500); 17 | }); 18 | } 19 | -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/src/maths/operations.js: -------------------------------------------------------------------------------- 1 | export function multiply(values) { 2 | return values.reduce((total, val) => total * val, 1); 3 | } 4 | 5 | export function subtract(amount, values) { 6 | return values.reduce((total, val) => total - val, amount); 7 | } 8 | 9 | export function divide(first, second) { 10 | return first / second; 11 | } 12 | -------------------------------------------------------------------------------- /04 - JavaScript Primer/jsprimer/src/maths/sum.js: -------------------------------------------------------------------------------- 1 | export default function(values) { 2 | return values.reduce((total, val) => total + val, 0); 3 | } 4 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sportsstore", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "json": "json-server data.js -p 3500 -m authMiddleware.js" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.18.0", 13 | "bootstrap": "^4.0.0", 14 | "font-awesome": "^4.7.0", 15 | "vue": "^2.5.16", 16 | "vue-router": "^3.0.1", 17 | "vuelidate": "^0.7.4", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.0.0-beta.16", 22 | "@vue/cli-plugin-eslint": "^3.0.0-beta.16", 23 | "@vue/cli-service": "^3.0.0-beta.16", 24 | "faker": "^4.1.0", 25 | "json-server": "^0.12.1", 26 | "jsonwebtoken": "^8.1.1", 27 | "vue-template-compiler": "^2.5.16" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "rules": {}, 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | } 42 | }, 43 | "postcss": { 44 | "plugins": { 45 | "autoprefixer": {} 46 | } 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions", 51 | "not ie <= 8" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/05 - SportsStore/sportsstore/public/favicon.ico -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | sportsstore 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 20 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/05 - SportsStore/sportsstore/src/assets/logo.png -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/src/components/CategoryControls.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/src/components/PageControls.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 43 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/src/components/ProductList.vue: -------------------------------------------------------------------------------- 1 | 15 | 16 | 34 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/src/components/Store.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /05 - SportsStore/sportsstore/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | import "font-awesome/css/font-awesome.min.css" 8 | 9 | import store from "./store"; 10 | 11 | new Vue({ 12 | render: h => h(App), 13 | store 14 | }).$mount('#app') 15 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sportsstore", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "json": "json-server data.js -p 3500 -m authMiddleware.js" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.18.0", 13 | "bootstrap": "^4.0.0", 14 | "font-awesome": "^4.7.0", 15 | "vue": "^2.5.16", 16 | "vue-router": "^3.0.1", 17 | "vuelidate": "^0.7.4", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.0.0-beta.16", 22 | "@vue/cli-plugin-eslint": "^3.0.0-beta.16", 23 | "@vue/cli-service": "^3.0.0-beta.16", 24 | "faker": "^4.1.0", 25 | "json-server": "^0.12.1", 26 | "jsonwebtoken": "^8.1.1", 27 | "vue-template-compiler": "^2.5.16" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "rules": {}, 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | } 42 | }, 43 | "postcss": { 44 | "plugins": { 45 | "autoprefixer": {} 46 | } 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions", 51 | "not ie <= 8" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/06 - SportsStore - Checkout and Orders/sportsstore/public/favicon.ico -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | sportsstore 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/06 - SportsStore - Checkout and Orders/sportsstore/src/assets/logo.png -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/components/CartSummary.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/components/CategoryControls.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/components/OrderThanks.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/components/ProductList.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 47 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/components/Store.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 31 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/components/ValidationError.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | import "font-awesome/css/font-awesome.min.css" 8 | 9 | import store from "./store"; 10 | import router from "./router"; 11 | import Vuelidate from "vuelidate"; 12 | 13 | Vue.filter("currency", (value) => new Intl.NumberFormat("en-US", 14 | { style: "currency", currency: "USD" }).format(value)); 15 | 16 | Vue.use(Vuelidate); 17 | 18 | new Vue({ 19 | render: h => h(App), 20 | store, 21 | router 22 | }).$mount('#app') 23 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from "vue"; 2 | import VueRouter from "vue-router"; 3 | 4 | import Store from "../components/Store"; 5 | import ShoppingCart from "../components/ShoppingCart"; 6 | import Checkout from "../components/Checkout"; 7 | import OrderThanks from "../components/OrderThanks"; 8 | 9 | Vue.use(VueRouter); 10 | 11 | export default new VueRouter({ 12 | mode: "history", 13 | routes: [ 14 | { path: "/", component: Store }, 15 | { path: "/cart", component: ShoppingCart }, 16 | { path: "/checkout", component: Checkout}, 17 | { path: "/thanks/:id", component: OrderThanks}, 18 | { path: "*", redirect: "/"} 19 | ] 20 | }) 21 | -------------------------------------------------------------------------------- /06 - SportsStore - Checkout and Orders/sportsstore/src/store/orders.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios"; 2 | 3 | const ORDERS_URL = "http://localhost:3500/orders"; 4 | 5 | export default { 6 | actions: { 7 | async storeOrder(context, order) { 8 | order.cartLines = context.rootState.cart.lines; 9 | return (await Axios.post(ORDERS_URL, order)).data.id; 10 | } 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/data.js: -------------------------------------------------------------------------------- 1 | var faker = require("faker"); 2 | 3 | var data = []; 4 | var categories = ["Watersports", "Soccer", "Chess", "Running"]; 5 | 6 | faker.seed(100); 7 | 8 | for (let i = 1; i <= 500; i++) { 9 | var category = faker.helpers.randomize(categories); 10 | data.push({ 11 | id: i, 12 | name: faker.commerce.productName(), 13 | category: category, 14 | description: `${category}: ${faker.lorem.sentence(3)}`, 15 | price: faker.commerce.price() 16 | }) 17 | } 18 | 19 | module.exports = function () { 20 | return { 21 | products: data, 22 | categories: categories, 23 | orders: [] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sportsstore", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "json": "json-server data.js -p 3500 -m authMiddleware.js" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.18.0", 13 | "bootstrap": "^4.0.0", 14 | "font-awesome": "^4.7.0", 15 | "vue": "^2.5.16", 16 | "vue-router": "^3.0.1", 17 | "vuelidate": "^0.7.4", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.0.0-beta.16", 22 | "@vue/cli-plugin-eslint": "^3.0.0-beta.16", 23 | "@vue/cli-service": "^3.0.0-beta.16", 24 | "faker": "^4.1.0", 25 | "json-server": "^0.12.1", 26 | "jsonwebtoken": "^8.1.1", 27 | "vue-template-compiler": "^2.5.16" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "rules": {}, 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | } 42 | }, 43 | "postcss": { 44 | "plugins": { 45 | "autoprefixer": {} 46 | } 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions", 51 | "not ie <= 8" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/07 - SportsStore - Scaling and Administration/sportsstore/public/favicon.ico -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | sportsstore 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/07 - SportsStore - Scaling and Administration/sportsstore/src/assets/logo.png -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/CartSummary.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/CategoryControls.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/OrderThanks.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/ProductList.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 47 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 35 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/Store.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 39 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/ValidationError.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/admin/Admin.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/components/admin/ProductAdmin.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | import "font-awesome/css/font-awesome.min.css" 8 | 9 | import store from "./store"; 10 | import router from "./router"; 11 | import Vuelidate from "vuelidate"; 12 | 13 | Vue.filter("currency", (value) => new Intl.NumberFormat("en-US", 14 | { style: "currency", currency: "USD" }).format(value)); 15 | 16 | Vue.use(Vuelidate); 17 | 18 | new Vue({ 19 | render: h => h(App), 20 | store, 21 | router 22 | }).$mount('#app') 23 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/store/auth.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios"; 2 | 3 | const loginUrl = "http://localhost:3500/login"; 4 | 5 | export default { 6 | state: { 7 | authenticated: false, 8 | jwt: null 9 | }, 10 | getters: { 11 | authenticatedAxios(state) { 12 | return Axios.create({ 13 | headers: { 14 | "Authorization": `Bearer<${state.jwt}>` 15 | } 16 | }); 17 | } 18 | }, 19 | mutations: { 20 | setAuthenticated(state, header) { 21 | state.jwt = header; 22 | state.authenticated = true; 23 | }, 24 | clearAuthentication(state) { 25 | state.authenticated = false; 26 | state.jwt = null; 27 | } 28 | }, 29 | actions: { 30 | async authenticate(context, credentials) { 31 | let response = await Axios.post(loginUrl, credentials); 32 | if (response.data.success == true) { 33 | context.commit("setAuthenticated", response.data.token); 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /07 - SportsStore - Scaling and Administration/sportsstore/src/store/orders.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios"; 2 | import Vue from "vue"; 3 | 4 | const ORDERS_URL = "http://localhost:3500/orders"; 5 | 6 | export default { 7 | state: { 8 | orders:[] 9 | }, 10 | mutations: { 11 | setOrders(state, data) { 12 | state.orders = data; 13 | }, 14 | changeOrderShipped(state, order) { 15 | Vue.set(order, "shipped", 16 | order.shipped == null || !order.shipped ? true : false); 17 | } 18 | }, 19 | actions: { 20 | async storeOrder(context, order) { 21 | order.cartLines = context.rootState.cart.lines; 22 | return (await Axios.post(ORDERS_URL, order)).data.id; 23 | }, 24 | async getOrders(context) { 25 | context.commit("setOrders", 26 | (await context.rootGetters.authenticatedAxios.get(ORDERS_URL)).data); 27 | }, 28 | async updateOrder(context, order) { 29 | context.commit("changeOrderShipped", order); 30 | await context.rootGetters.authenticatedAxios 31 | .put(`${ORDERS_URL}/${order.id}`, order); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/Dockerfile: -------------------------------------------------------------------------------- 1 | FROM node:8.11.2 2 | 3 | RUN mkdir -p /usr/src/sportsstore 4 | 5 | COPY dist /usr/src/sportsstore/dist 6 | 7 | COPY authMiddleware.js /usr/src/sportsstore/ 8 | COPY data.json /usr/src/sportsstore/ 9 | COPY server.js /usr/src/sportsstore/server.js 10 | COPY deploy-package.json /usr/src/sportsstore/package.json 11 | 12 | WORKDIR /usr/src/sportsstore 13 | 14 | RUN npm install 15 | 16 | EXPOSE 80 17 | 18 | CMD ["node", "server.js"] 19 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/data.js: -------------------------------------------------------------------------------- 1 | var faker = require("faker"); 2 | 3 | var data = []; 4 | var categories = ["Watersports", "Soccer", "Chess", "Running"]; 5 | 6 | faker.seed(100); 7 | 8 | for (let i = 1; i <= 500; i++) { 9 | var category = faker.helpers.randomize(categories); 10 | data.push({ 11 | id: i, 12 | name: faker.commerce.productName(), 13 | category: category, 14 | description: `${category}: ${faker.lorem.sentence(3)}`, 15 | price: faker.commerce.price() 16 | }) 17 | } 18 | 19 | module.exports = function () { 20 | return { 21 | products: data, 22 | categories: categories, 23 | orders: [] 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/deploy-package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sportsstore", 3 | "version": "1.0.0", 4 | "private": true, 5 | 6 | "dependencies": { 7 | "faker": "^4.1.0", 8 | "json-server": "^0.12.1", 9 | "jsonwebtoken": "^8.1.1", 10 | "express": "4.16.3", 11 | "connect-history-api-fallback": "1.5.0" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/dist/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/08 - SportsStore - Administration and Deployment/sportsstore/dist/favicon.ico -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.674f50d2.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.674f50d2.eot -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.af7ae505.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.af7ae505.woff2 -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.b06871f2.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.b06871f2.ttf -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.fee66e71.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/08 - SportsStore - Administration and Deployment/sportsstore/dist/fonts/fontawesome-webfont.fee66e71.woff -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/dist/index.html: -------------------------------------------------------------------------------- 1 | sportsstore
-------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sportsstore", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint", 9 | "json": "json-server data.js -p 3500 -m authMiddleware.js" 10 | }, 11 | "dependencies": { 12 | "axios": "^0.18.0", 13 | "bootstrap": "^4.0.0", 14 | "font-awesome": "^4.7.0", 15 | "vue": "^2.5.16", 16 | "vue-router": "^3.0.1", 17 | "vuelidate": "^0.7.4", 18 | "vuex": "^3.0.1" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.0.0-beta.16", 22 | "@vue/cli-plugin-eslint": "^3.0.0-beta.16", 23 | "@vue/cli-service": "^3.0.0-beta.16", 24 | "connect-history-api-fallback": "^1.5.0", 25 | "express": "^4.16.3", 26 | "faker": "^4.1.0", 27 | "json-server": "^0.12.1", 28 | "jsonwebtoken": "^8.1.1", 29 | "vue-template-compiler": "^2.5.16" 30 | }, 31 | "eslintConfig": { 32 | "root": true, 33 | "env": { 34 | "node": true 35 | }, 36 | "extends": [ 37 | "plugin:vue/essential", 38 | "eslint:recommended" 39 | ], 40 | "rules": {}, 41 | "parserOptions": { 42 | "parser": "babel-eslint" 43 | } 44 | }, 45 | "postcss": { 46 | "plugins": { 47 | "autoprefixer": {} 48 | } 49 | }, 50 | "browserslist": [ 51 | "> 1%", 52 | "last 2 versions", 53 | "not ie <= 8" 54 | ] 55 | } 56 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/08 - SportsStore - Administration and Deployment/sportsstore/public/favicon.ico -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | sportsstore 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/server.js: -------------------------------------------------------------------------------- 1 | const express = require("express"); 2 | const history = require("connect-history-api-fallback"); 3 | const jsonServer = require("json-server"); 4 | const bodyParser = require('body-parser'); 5 | const auth = require("./authMiddleware"); 6 | const router = jsonServer.router("data.json"); 7 | 8 | const app = express(); 9 | app.use(bodyParser.json()); 10 | app.use(auth); 11 | app.use("/api", router); 12 | app.use(history()); 13 | app.use("/", express.static("./dist")); 14 | 15 | app.listen(80, function () { 16 | console.log("HTTP Server running on port 80"); 17 | }); 18 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/App.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 22 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/08 - SportsStore - Administration and Deployment/sportsstore/src/assets/logo.png -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/CartSummary.vue: -------------------------------------------------------------------------------- 1 | 18 | 19 | 31 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/CategoryControls.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 27 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/OrderThanks.vue: -------------------------------------------------------------------------------- 1 | 11 | 12 | 21 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/ProductList.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 47 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/Search.vue: -------------------------------------------------------------------------------- 1 | 13 | 14 | 35 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/Store.vue: -------------------------------------------------------------------------------- 1 | 24 | 25 | 39 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/ValidationError.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 36 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/components/admin/Admin.vue: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | import "bootstrap/dist/css/bootstrap.min.css"; 7 | import "font-awesome/css/font-awesome.min.css" 8 | 9 | import store from "./store"; 10 | import router from "./router"; 11 | import Vuelidate from "vuelidate"; 12 | 13 | Vue.filter("currency", (value) => new Intl.NumberFormat("en-US", 14 | { style: "currency", currency: "USD" }).format(value)); 15 | 16 | Vue.use(Vuelidate); 17 | 18 | new Vue({ 19 | render: h => h(App), 20 | store, 21 | router 22 | }).$mount('#app') 23 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/store/auth.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios"; 2 | 3 | const loginUrl = "/api/login"; 4 | 5 | export default { 6 | state: { 7 | authenticated: false, 8 | jwt: null 9 | }, 10 | getters: { 11 | authenticatedAxios(state) { 12 | return Axios.create({ 13 | headers: { 14 | "Authorization": `Bearer<${state.jwt}>` 15 | } 16 | }); 17 | } 18 | }, 19 | mutations: { 20 | setAuthenticated(state, header) { 21 | state.jwt = header; 22 | state.authenticated = true; 23 | }, 24 | clearAuthentication(state) { 25 | state.authenticated = false; 26 | state.jwt = null; 27 | } 28 | }, 29 | actions: { 30 | async authenticate(context, credentials) { 31 | let response = await Axios.post(loginUrl, credentials); 32 | if (response.data.success == true) { 33 | context.commit("setAuthenticated", response.data.token); 34 | } 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /08 - SportsStore - Administration and Deployment/sportsstore/src/store/orders.js: -------------------------------------------------------------------------------- 1 | import Axios from "axios"; 2 | import Vue from "vue"; 3 | 4 | const ORDERS_URL = "/api/orders"; 5 | 6 | export default { 7 | state: { 8 | orders:[] 9 | }, 10 | mutations: { 11 | setOrders(state, data) { 12 | state.orders = data; 13 | }, 14 | changeOrderShipped(state, order) { 15 | Vue.set(order, "shipped", 16 | order.shipped == null || !order.shipped ? true : false); 17 | } 18 | }, 19 | actions: { 20 | async storeOrder(context, order) { 21 | order.cartLines = context.rootState.cart.lines; 22 | return (await Axios.post(ORDERS_URL, order)).data.id; 23 | }, 24 | async getOrders(context) { 25 | context.commit("setOrders", 26 | (await context.rootGetters.authenticatedAxios.get(ORDERS_URL)).data); 27 | }, 28 | async updateOrder(context, order) { 29 | context.commit("changeOrderShipped", order); 30 | await context.rootGetters.authenticatedAxios 31 | .put(`${ORDERS_URL}/${order.id}`, order); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /09 - Understanding Vue.js/nomagic/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } -------------------------------------------------------------------------------- /09 - Understanding Vue.js/nomagic/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nomagic", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "bootstrap": "^4.0.0", 12 | "vue": "^2.5.16" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.0.0-beta.15", 16 | "@vue/cli-plugin-eslint": "^3.0.0-beta.15", 17 | "@vue/cli-service": "^3.0.0-beta.15", 18 | "vue-template-compiler": "^2.5.16" 19 | }, 20 | "eslintConfig": { 21 | "root": true, 22 | "env": { 23 | "node": true 24 | }, 25 | "extends": [ 26 | "plugin:vue/essential", 27 | "eslint:recommended" 28 | ], 29 | "rules": {}, 30 | "parserOptions": { 31 | "parser": "babel-eslint" 32 | } 33 | }, 34 | "postcss": { 35 | "plugins": { 36 | "autoprefixer": {} 37 | } 38 | }, 39 | "browserslist": [ 40 | "> 1%", 41 | "last 2 versions", 42 | "not ie <= 8" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /09 - Understanding Vue.js/nomagic/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Apress/pro-vue-js-2/7e60f217bf6beb7a62aa7887882d0e7d1857908a/09 - Understanding Vue.js/nomagic/public/favicon.ico -------------------------------------------------------------------------------- /09 - Understanding Vue.js/nomagic/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | nomagic 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /09 - Understanding Vue.js/nomagic/src/App.html: -------------------------------------------------------------------------------- 1 |
2 |

3 | {{ message }} 4 |

5 | 8 |
9 | -------------------------------------------------------------------------------- /09 - Understanding Vue.js/nomagic/src/App.vue: -------------------------------------------------------------------------------- 1 |