├── .gitignore ├── .vscode ├── settings.json └── spellright.dict ├── README.md ├── demos ├── play │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ └── HelloWorld.vue │ │ └── main.js └── simple.html ├── labs.md └── labs ├── 01-first-vue-app └── index.html ├── 02-hello-world-vue-cli ├── .gitignore ├── README.md ├── 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-data-binding ├── begin │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ └── heroes.vue │ │ └── main.js └── end │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── heroes.vue │ └── main.js ├── 04-lists-conditionals ├── begin │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ └── heroes.vue │ │ └── main.js └── end │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── heroes.vue │ └── main.js ├── 05-interacting-within-a-component ├── begin │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ └── heroes.vue │ │ ├── design │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ │ └── main.js └── end │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ └── heroes.vue │ ├── design │ ├── _styles.scss │ ├── _variables.scss │ └── index.scss │ └── main.js ├── 06-component-communication ├── begin │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ ├── hero-detail.vue │ │ └── heroes.vue │ │ ├── design │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ │ └── main.js └── end │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── hero-detail.vue │ └── heroes.vue │ ├── design │ ├── _styles.scss │ ├── _variables.scss │ └── index.scss │ └── main.js ├── 07-http ├── begin │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ ├── server │ │ ├── data │ │ │ └── heroes.json │ │ ├── package-lock.json │ │ ├── package.json │ │ └── server.js │ └── src │ │ ├── App.vue │ │ ├── assets │ │ └── logo.png │ │ ├── components │ │ ├── hero-detail.vue │ │ └── heroes.vue │ │ ├── design │ │ ├── _styles.scss │ │ ├── _variables.scss │ │ └── index.scss │ │ └── main.js └── end │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ ├── server │ ├── data │ │ └── heroes.json │ ├── package-lock.json │ ├── package.json │ └── server.js │ └── src │ ├── App.vue │ ├── assets │ └── logo.png │ ├── components │ ├── hero-detail.vue │ └── heroes.vue │ ├── design │ ├── _styles.scss │ ├── _variables.scss │ └── index.scss │ ├── heroes.js │ └── main.js ├── 08-routing ├── begin │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ └── index.html │ └── src │ │ ├── App.vue │ │ ├── assets │ │ ├── global.css │ │ └── logo.png │ │ ├── main.js │ │ └── views │ │ ├── heroes-list.vue │ │ ├── not-found.vue │ │ ├── orders-list.vue │ │ └── villains-list.vue └── end │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ └── index.html │ └── src │ ├── App.vue │ ├── assets │ ├── global.css │ └── logo.png │ ├── main.js │ ├── router.js │ └── views │ ├── heroes-list.vue │ ├── not-found.vue │ ├── orders-list.vue │ └── villains-list.vue └── 09-vuex-state ├── begin ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public │ ├── favicon.ico │ ├── index.html │ └── products.json └── src │ ├── App.vue │ ├── assets │ ├── global.css │ └── logo.png │ ├── components │ └── cart.vue │ ├── main.js │ ├── router.js │ └── views │ ├── not-found.vue │ ├── products.vue │ └── purchased.vue └── end ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html └── products.json └── src ├── App.vue ├── assets ├── global.css └── logo.png ├── components └── cart.vue ├── main.js ├── router.js ├── store.js └── views ├── not-found.vue ├── products.vue └── purchased.vue /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | # .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "workbench.colorCustomizations": { 3 | "activityBar.background": "#466c31", 4 | "activityBar.foreground": "#e7e7e7", 5 | "activityBar.inactiveForeground": "#e7e7e799", 6 | "activityBarBadge.background": "#7b95c3", 7 | "activityBarBadge.foreground": "#15202b", 8 | "statusBar.background": "#2f4921", 9 | "statusBarItem.hoverBackground": "#466c31", 10 | "statusBar.foreground": "#e7e7e7" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /.vscode/spellright.dict: -------------------------------------------------------------------------------- 1 | npm 2 | CodeSandbox.io 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-workshop 2 | 3 | Authored by John Papa and Dan Wahlin 4 | 5 | This repository contains labs and demos for the Vue Fundamentals workshop. 6 | 7 | ## Setup 8 | 9 | 1. Install the [latest Active LTS for Node.js](https://nodejs.org) (currently 10.15.0 +) 10 | 11 | 1. Install the vue cli `npm install -g @vue/cli` 12 | 13 | ### Optional Setup 14 | 15 | 1. Install [Visual Studio Code](https://code.visualstudio.com/?wt.mc_id=vueworkshop-github-jopapa) 16 | 17 | 1. Install the [Vue Snippets extension](https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets&WT.mc_id=vueworkshop-github-jopapa) 18 | 19 | 1. Install the [Vue dev tools for Chrome](https://jpapa.me/vuedevtools) 20 | 21 | 1. Install the [Redux dev tools for Chrome](http://jpapa.me/reduxext) 22 | 23 | ## Running the Labs 24 | 25 | 1. Open the `labs` folder and run `npm install` 26 | 27 | 1. Run `npm run serve` to start the server 28 | 29 | 1. Browse to the app at 30 | 31 | ## Help 32 | 33 | If you have problems running npm locally or just want to run in the browser, you can open any of the labs in CodeSandbox.io. 34 | 35 | Replace the lab and either the `begin` or `end` folder to the example url below. 36 | 37 | 38 | 39 | This link will open the end state of the 3rd lab. 40 | -------------------------------------------------------------------------------- /demos/play/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /demos/play/README.md: -------------------------------------------------------------------------------- 1 | # play 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /demos/play/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /demos/play/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "play", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.7.0", 16 | "@vue/cli-plugin-eslint": "^3.7.0", 17 | "@vue/cli-service": "^3.7.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 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 | ] 46 | } 47 | -------------------------------------------------------------------------------- /demos/play/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/demos/play/public/favicon.ico -------------------------------------------------------------------------------- /demos/play/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | play 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /demos/play/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /demos/play/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/demos/play/src/assets/logo.png -------------------------------------------------------------------------------- /demos/play/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 15 | 16 | 17 | 33 | -------------------------------------------------------------------------------- /demos/play/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /demos/simple.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 13 | 14 |
15 | 16 |
Hello {{ name | capitalize }}
17 | 18 | 19 | 20 |
21 |
    22 |
  • 28 | {{ hero.name }} 29 |
    • 30 |
31 |
You selected {{ selectedHero.name }}
32 |
You selected a hero
33 |
34 |
35 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /labs/01-first-vue-app/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | Hello {{ name }} 9 |
10 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/README.md: -------------------------------------------------------------------------------- 1 | # hello-world 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.7.0", 16 | "@vue/cli-plugin-eslint": "^3.7.0", 17 | "@vue/cli-service": "^3.7.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 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 | ] 46 | } 47 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/02-hello-world-vue-cli/public/favicon.ico -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | hello-world 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/02-hello-world-vue-cli/src/assets/logo.png -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 72 | 73 | 81 | 82 | 83 | 99 | -------------------------------------------------------------------------------- /labs/02-hello-world-vue-cli/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/README.md: -------------------------------------------------------------------------------- 1 | # data-binding 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "data-binding", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.7.0", 16 | "@vue/cli-plugin-eslint": "^3.7.0", 17 | "@vue/cli-service": "^3.7.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 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 | ] 46 | } 47 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/03-data-binding/begin/public/favicon.ico -------------------------------------------------------------------------------- /labs/03-data-binding/begin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | data-binding 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/03-data-binding/begin/src/assets/logo.png -------------------------------------------------------------------------------- /labs/03-data-binding/begin/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 21 | -------------------------------------------------------------------------------- /labs/03-data-binding/begin/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/README.md: -------------------------------------------------------------------------------- 1 | # data-binding 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "data-binding", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.7.0", 16 | "@vue/cli-plugin-eslint": "^3.7.0", 17 | "@vue/cli-service": "^3.7.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 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 | ] 46 | } 47 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/03-data-binding/end/public/favicon.ico -------------------------------------------------------------------------------- /labs/03-data-binding/end/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | data-binding 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/03-data-binding/end/src/assets/logo.png -------------------------------------------------------------------------------- /labs/03-data-binding/end/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 33 | -------------------------------------------------------------------------------- /labs/03-data-binding/end/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/README.md: -------------------------------------------------------------------------------- 1 | # data-binding 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "data-binding", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.7.0", 16 | "@vue/cli-plugin-eslint": "^3.7.0", 17 | "@vue/cli-service": "^3.7.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 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 | ] 46 | } 47 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/04-lists-conditionals/begin/public/favicon.ico -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | data-binding 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/04-lists-conditionals/begin/src/assets/logo.png -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 22 | 23 | 30 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/begin/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/README.md: -------------------------------------------------------------------------------- 1 | # data-binding 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "data-binding", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.7.0", 16 | "@vue/cli-plugin-eslint": "^3.7.0", 17 | "@vue/cli-service": "^3.7.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 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 | ] 46 | } 47 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/04-lists-conditionals/end/public/favicon.ico -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | data-binding 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 18 | 19 | 29 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/04-lists-conditionals/end/src/assets/logo.png -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 37 | 38 | 48 | -------------------------------------------------------------------------------- /labs/04-lists-conditionals/end/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/README.md: -------------------------------------------------------------------------------- 1 | # interacting 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "interacting", 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 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.4", 15 | "core-js": "^2.6.5", 16 | "vue": "^2.6.10" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.16.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "node-sass": "^4.12.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.5.21" 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 | ] 52 | } 53 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/05-interacting-within-a-component/begin/public/favicon.ico -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | interacting 15 | 16 | 17 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/05-interacting-within-a-component/begin/src/assets/logo.png -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 115 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/src/design/_styles.scss: -------------------------------------------------------------------------------- 1 | .main-section { 2 | padding: 3rem 1.5rem; 3 | } 4 | 5 | html > body { 6 | margin: 0 !important; 7 | } 8 | 9 | .menu-list .active-link, 10 | .menu-list .router-link-active { 11 | color: #fff; 12 | background-color: $link; 13 | } 14 | 15 | .not-found { 16 | i { 17 | font-size: 20px; 18 | margin-right: 8px; 19 | } 20 | .title { 21 | letter-spacing: 0px; 22 | font-weight: normal; 23 | font-size: 24px; 24 | text-transform: none; 25 | } 26 | } 27 | 28 | .title { 29 | font-size: 2rem; 30 | font-weight: 600; 31 | line-height: 1.125; 32 | word-break: break-word; 33 | } 34 | 35 | header { 36 | font-weight: bold; 37 | font-family: Arial; 38 | span { 39 | letter-spacing: 0px; 40 | &.tour { 41 | color: #fff; 42 | } 43 | &.of { 44 | color: #ccc; 45 | } 46 | &.heroes { 47 | color: $primary-light; 48 | } 49 | } 50 | .navbar-item.nav-home { 51 | border: 3px solid transparent; 52 | border-radius: 0%; 53 | &:hover { 54 | border-right: 3px solid $primary-light; 55 | border-left: 3px solid $primary-light; 56 | } 57 | } 58 | .fab { 59 | font-size: 24px; 60 | &.js-logo { 61 | color: $primary-light; 62 | } 63 | } 64 | .buttons { 65 | i.fab { 66 | color: #fff; 67 | margin-left: 20px; 68 | margin-right: 10px; 69 | &:hover { 70 | color: $primary-light; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .edit-detail { 77 | .input[readonly] { 78 | background-color: $shade-light; 79 | } 80 | } 81 | 82 | .content-title-group { 83 | margin-bottom: 16px; 84 | h2 { 85 | border-left: 16px solid $primary; 86 | border-bottom: 2px solid $primary; 87 | padding-left: 8px; 88 | padding-right: 16px; 89 | display: inline-block; 90 | text-transform: uppercase; 91 | color: #555; 92 | letter-spacing: 0px; 93 | &:hover { 94 | color: $link; 95 | } 96 | } 97 | button.button { 98 | border: 0; 99 | color: #999; 100 | &:hover { 101 | color: $link; 102 | } 103 | } 104 | } 105 | ul.list { 106 | box-shadow: none; 107 | } 108 | div.card-content { 109 | background-color: $shade-light; 110 | .name { 111 | font-size: 28px; 112 | color: #000; 113 | } 114 | .description { 115 | font-size: 20px; 116 | color: #999; 117 | } 118 | background-color: $shade-light; 119 | } 120 | .card { 121 | margin-bottom: 2em; 122 | } 123 | 124 | label.label { 125 | font-weight: normal; 126 | } 127 | 128 | p.card-header-title { 129 | background-color: $primary; 130 | text-transform: uppercase; 131 | letter-spacing: 4px; 132 | color: #fff; 133 | display: block; 134 | padding-left: 24px; 135 | } 136 | .card-footer button { 137 | font-size: 16px; 138 | i { 139 | margin-right: 10px; 140 | } 141 | color: #888; 142 | &:hover { 143 | color: $link; 144 | } 145 | } 146 | 147 | .modal-card-foot button { 148 | display: inline-block; 149 | width: 80px; 150 | } 151 | 152 | .modal-card-head, 153 | .modal-card-body { 154 | text-align: center; 155 | } 156 | 157 | .field { 158 | margin-bottom: 0.75rem; 159 | } 160 | 161 | .navbar-burger { 162 | margin-left: auto; 163 | } 164 | 165 | button.link { 166 | background: none; 167 | border: none; 168 | cursor: pointer; 169 | } 170 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma/bulma.sass'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/begin/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/README.md: -------------------------------------------------------------------------------- 1 | # interacting 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "interacting", 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 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.4", 15 | "core-js": "^2.6.5", 16 | "vue": "^2.6.10" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.16.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "node-sass": "^4.12.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.5.21" 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 | ] 52 | } 53 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/05-interacting-within-a-component/end/public/favicon.ico -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | interacting 15 | 16 | 17 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/05-interacting-within-a-component/end/src/assets/logo.png -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 56 | 57 | 129 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/src/design/_styles.scss: -------------------------------------------------------------------------------- 1 | .main-section { 2 | padding: 3rem 1.5rem; 3 | } 4 | 5 | html > body { 6 | margin: 0 !important; 7 | } 8 | 9 | .menu-list .active-link, 10 | .menu-list .router-link-active { 11 | color: #fff; 12 | background-color: $link; 13 | } 14 | 15 | .not-found { 16 | i { 17 | font-size: 20px; 18 | margin-right: 8px; 19 | } 20 | .title { 21 | letter-spacing: 0px; 22 | font-weight: normal; 23 | font-size: 24px; 24 | text-transform: none; 25 | } 26 | } 27 | 28 | .title { 29 | font-size: 2rem; 30 | font-weight: 600; 31 | line-height: 1.125; 32 | word-break: break-word; 33 | } 34 | 35 | header { 36 | font-weight: bold; 37 | font-family: Arial; 38 | span { 39 | letter-spacing: 0px; 40 | &.tour { 41 | color: #fff; 42 | } 43 | &.of { 44 | color: #ccc; 45 | } 46 | &.heroes { 47 | color: $primary-light; 48 | } 49 | } 50 | .navbar-item.nav-home { 51 | border: 3px solid transparent; 52 | border-radius: 0%; 53 | &:hover { 54 | border-right: 3px solid $primary-light; 55 | border-left: 3px solid $primary-light; 56 | } 57 | } 58 | .fab { 59 | font-size: 24px; 60 | &.js-logo { 61 | color: $primary-light; 62 | } 63 | } 64 | .buttons { 65 | i.fab { 66 | color: #fff; 67 | margin-left: 20px; 68 | margin-right: 10px; 69 | &:hover { 70 | color: $primary-light; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .edit-detail { 77 | .input[readonly] { 78 | background-color: $shade-light; 79 | } 80 | } 81 | 82 | .content-title-group { 83 | margin-bottom: 16px; 84 | h2 { 85 | border-left: 16px solid $primary; 86 | border-bottom: 2px solid $primary; 87 | padding-left: 8px; 88 | padding-right: 16px; 89 | display: inline-block; 90 | text-transform: uppercase; 91 | color: #555; 92 | letter-spacing: 0px; 93 | &:hover { 94 | color: $link; 95 | } 96 | } 97 | button.button { 98 | border: 0; 99 | color: #999; 100 | &:hover { 101 | color: $link; 102 | } 103 | } 104 | } 105 | ul.list { 106 | box-shadow: none; 107 | } 108 | div.card-content { 109 | background-color: $shade-light; 110 | .name { 111 | font-size: 28px; 112 | color: #000; 113 | } 114 | .description { 115 | font-size: 20px; 116 | color: #999; 117 | } 118 | background-color: $shade-light; 119 | } 120 | .card { 121 | margin-bottom: 2em; 122 | } 123 | 124 | label.label { 125 | font-weight: normal; 126 | } 127 | 128 | p.card-header-title { 129 | background-color: $primary; 130 | text-transform: uppercase; 131 | letter-spacing: 4px; 132 | color: #fff; 133 | display: block; 134 | padding-left: 24px; 135 | } 136 | .card-footer button { 137 | font-size: 16px; 138 | i { 139 | margin-right: 10px; 140 | } 141 | color: #888; 142 | &:hover { 143 | color: $link; 144 | } 145 | } 146 | 147 | .modal-card-foot button { 148 | display: inline-block; 149 | width: 80px; 150 | } 151 | 152 | .modal-card-head, 153 | .modal-card-body { 154 | text-align: center; 155 | } 156 | 157 | .field { 158 | margin-bottom: 0.75rem; 159 | } 160 | 161 | .navbar-burger { 162 | margin-left: auto; 163 | } 164 | 165 | button.link { 166 | background: none; 167 | border: none; 168 | cursor: pointer; 169 | } 170 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma/bulma.sass'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /labs/05-interacting-within-a-component/end/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/README.md: -------------------------------------------------------------------------------- 1 | # interacting 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "props", 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 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.4", 15 | "core-js": "^2.6.5", 16 | "vue": "^2.6.10" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.16.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "node-sass": "^4.12.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.5.21" 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 | ] 52 | } 53 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/06-component-communication/begin/public/favicon.ico -------------------------------------------------------------------------------- /labs/06-component-communication/begin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | component communication 15 | 16 | 17 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/06-component-communication/begin/src/assets/logo.png -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/components/hero-detail.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 70 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 96 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/design/_styles.scss: -------------------------------------------------------------------------------- 1 | #app { 2 | margin: 36px 48px; 3 | } 4 | 5 | html > body { 6 | margin: 0 !important; 7 | } 8 | 9 | .menu-list .active-link, 10 | .menu-list .router-link-active { 11 | color: #fff; 12 | background-color: $link; 13 | } 14 | 15 | .not-found { 16 | i { 17 | font-size: 20px; 18 | margin-right: 8px; 19 | } 20 | .title { 21 | letter-spacing: 0px; 22 | font-weight: normal; 23 | font-size: 24px; 24 | text-transform: none; 25 | } 26 | } 27 | 28 | .title { 29 | font-size: 2rem; 30 | font-weight: 600; 31 | line-height: 1.125; 32 | word-break: break-word; 33 | } 34 | 35 | header { 36 | font-weight: bold; 37 | font-family: Arial; 38 | span { 39 | letter-spacing: 0px; 40 | &.tour { 41 | color: #fff; 42 | } 43 | &.of { 44 | color: #ccc; 45 | } 46 | &.heroes { 47 | color: $primary-light; 48 | } 49 | } 50 | .navbar-item.nav-home { 51 | border: 3px solid transparent; 52 | border-radius: 0%; 53 | &:hover { 54 | border-right: 3px solid $primary-light; 55 | border-left: 3px solid $primary-light; 56 | } 57 | } 58 | .fab { 59 | font-size: 24px; 60 | &.js-logo { 61 | color: $primary-light; 62 | } 63 | } 64 | .buttons { 65 | i.fab { 66 | color: #fff; 67 | margin-left: 20px; 68 | margin-right: 10px; 69 | &:hover { 70 | color: $primary-light; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .edit-detail { 77 | .input[readonly] { 78 | background-color: $shade-light; 79 | } 80 | } 81 | 82 | .content-title-group { 83 | margin-bottom: 16px; 84 | h2 { 85 | border-left: 16px solid $primary; 86 | border-bottom: 2px solid $primary; 87 | padding-left: 8px; 88 | padding-right: 16px; 89 | display: inline-block; 90 | text-transform: uppercase; 91 | color: #555; 92 | letter-spacing: 0px; 93 | &:hover { 94 | color: $link; 95 | } 96 | } 97 | button.button { 98 | border: 0; 99 | color: #999; 100 | &:hover { 101 | color: $link; 102 | } 103 | } 104 | } 105 | ul.list { 106 | box-shadow: none; 107 | } 108 | div.card-content { 109 | background-color: $shade-light; 110 | .name { 111 | font-size: 28px; 112 | color: #000; 113 | } 114 | .description { 115 | font-size: 20px; 116 | color: #999; 117 | } 118 | background-color: $shade-light; 119 | } 120 | .card { 121 | margin-bottom: 2em; 122 | } 123 | 124 | label.label { 125 | font-weight: normal; 126 | } 127 | 128 | p.card-header-title { 129 | background-color: $primary; 130 | text-transform: uppercase; 131 | letter-spacing: 4px; 132 | color: #fff; 133 | display: block; 134 | padding-left: 24px; 135 | } 136 | .card-footer button { 137 | font-size: 16px; 138 | i { 139 | margin-right: 10px; 140 | } 141 | color: #888; 142 | &:hover { 143 | color: $link; 144 | } 145 | } 146 | 147 | .modal-card-foot button { 148 | display: inline-block; 149 | width: 80px; 150 | } 151 | 152 | .modal-card-head, 153 | .modal-card-body { 154 | text-align: center; 155 | } 156 | 157 | .field { 158 | margin-bottom: 0.75rem; 159 | } 160 | 161 | .navbar-burger { 162 | margin-left: auto; 163 | } 164 | 165 | button.link { 166 | background: none; 167 | border: none; 168 | cursor: pointer; 169 | } 170 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma/bulma.sass'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /labs/06-component-communication/begin/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/README.md: -------------------------------------------------------------------------------- 1 | # interacting 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "props", 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 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.4", 15 | "core-js": "^2.6.5", 16 | "vue": "^2.6.10" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.16.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "node-sass": "^4.12.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.5.21" 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 | ] 52 | } 53 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/06-component-communication/end/public/favicon.ico -------------------------------------------------------------------------------- /labs/06-component-communication/end/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | component communication 15 | 16 | 17 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/06-component-communication/end/src/assets/logo.png -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/components/hero-detail.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 72 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 102 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/design/_styles.scss: -------------------------------------------------------------------------------- 1 | #app { 2 | margin: 36px 0 0 48px; 3 | } 4 | 5 | html > body { 6 | margin: 0 !important; 7 | } 8 | 9 | .menu-list .active-link, 10 | .menu-list .router-link-active { 11 | color: #fff; 12 | background-color: $link; 13 | } 14 | 15 | .not-found { 16 | i { 17 | font-size: 20px; 18 | margin-right: 8px; 19 | } 20 | .title { 21 | letter-spacing: 0px; 22 | font-weight: normal; 23 | font-size: 24px; 24 | text-transform: none; 25 | } 26 | } 27 | 28 | .title { 29 | font-size: 2rem; 30 | font-weight: 600; 31 | line-height: 1.125; 32 | word-break: break-word; 33 | } 34 | 35 | header { 36 | font-weight: bold; 37 | font-family: Arial; 38 | span { 39 | letter-spacing: 0px; 40 | &.tour { 41 | color: #fff; 42 | } 43 | &.of { 44 | color: #ccc; 45 | } 46 | &.heroes { 47 | color: $primary-light; 48 | } 49 | } 50 | .navbar-item.nav-home { 51 | border: 3px solid transparent; 52 | border-radius: 0%; 53 | &:hover { 54 | border-right: 3px solid $primary-light; 55 | border-left: 3px solid $primary-light; 56 | } 57 | } 58 | .fab { 59 | font-size: 24px; 60 | &.js-logo { 61 | color: $primary-light; 62 | } 63 | } 64 | .buttons { 65 | i.fab { 66 | color: #fff; 67 | margin-left: 20px; 68 | margin-right: 10px; 69 | &:hover { 70 | color: $primary-light; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .edit-detail { 77 | .input[readonly] { 78 | background-color: $shade-light; 79 | } 80 | } 81 | 82 | .content-title-group { 83 | margin-bottom: 16px; 84 | h2 { 85 | border-left: 16px solid $primary; 86 | border-bottom: 2px solid $primary; 87 | padding-left: 8px; 88 | padding-right: 16px; 89 | display: inline-block; 90 | text-transform: uppercase; 91 | color: #555; 92 | letter-spacing: 0px; 93 | &:hover { 94 | color: $link; 95 | } 96 | } 97 | button.button { 98 | border: 0; 99 | color: #999; 100 | &:hover { 101 | color: $link; 102 | } 103 | } 104 | } 105 | ul.list { 106 | box-shadow: none; 107 | } 108 | div.card-content { 109 | background-color: $shade-light; 110 | .name { 111 | font-size: 28px; 112 | color: #000; 113 | } 114 | .description { 115 | font-size: 20px; 116 | color: #999; 117 | } 118 | background-color: $shade-light; 119 | } 120 | .card { 121 | margin-bottom: 2em; 122 | } 123 | 124 | label.label { 125 | font-weight: normal; 126 | } 127 | 128 | p.card-header-title { 129 | background-color: $primary; 130 | text-transform: uppercase; 131 | letter-spacing: 4px; 132 | color: #fff; 133 | display: block; 134 | padding-left: 24px; 135 | } 136 | .card-footer button { 137 | font-size: 16px; 138 | i { 139 | margin-right: 10px; 140 | } 141 | color: #888; 142 | &:hover { 143 | color: $link; 144 | } 145 | } 146 | 147 | .modal-card-foot button { 148 | display: inline-block; 149 | width: 80px; 150 | } 151 | 152 | .modal-card-head, 153 | .modal-card-body { 154 | text-align: center; 155 | } 156 | 157 | .field { 158 | margin-bottom: 0.75rem; 159 | } 160 | 161 | .navbar-burger { 162 | margin-left: auto; 163 | } 164 | 165 | button.link { 166 | background: none; 167 | border: none; 168 | cursor: pointer; 169 | } 170 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma/bulma.sass'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /labs/06-component-communication/end/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/07-http/begin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/07-http/begin/README.md: -------------------------------------------------------------------------------- 1 | # interacting 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/07-http/begin/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/07-http/begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "http", 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 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "bulma": "^0.7.4", 15 | "core-js": "^2.6.5", 16 | "vue": "^2.6.10" 17 | }, 18 | "devDependencies": { 19 | "@vue/cli-plugin-babel": "^3.7.0", 20 | "@vue/cli-plugin-eslint": "^3.7.0", 21 | "@vue/cli-service": "^3.7.0", 22 | "babel-eslint": "^10.0.1", 23 | "eslint": "^5.16.0", 24 | "eslint-plugin-vue": "^5.0.0", 25 | "node-sass": "^4.12.0", 26 | "sass-loader": "^7.1.0", 27 | "vue-template-compiler": "^2.5.21" 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 | ] 52 | } 53 | -------------------------------------------------------------------------------- /labs/07-http/begin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/07-http/begin/public/favicon.ico -------------------------------------------------------------------------------- /labs/07-http/begin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | http 15 | 16 | 17 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /labs/07-http/begin/server/data/heroes.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 10, 4 | "firstName": "Ella", 5 | "lastName": "Papa", 6 | "description": "fashionista" 7 | }, 8 | { 9 | "id": 20, 10 | "firstName": "Madelyn", 11 | "lastName": "Papa", 12 | "description": "the cat whisperer" 13 | }, 14 | { 15 | "id": 30, 16 | "firstName": "Haley", 17 | "lastName": "Papa", 18 | "description": "pen wielder" 19 | }, 20 | { 21 | "id": 40, 22 | "firstName": "Danny", 23 | "lastName": "Wahlin", 24 | "description": "surgeon extraordinaire" 25 | }, 26 | { 27 | "id": 50, 28 | "firstName": "Jeff", 29 | "lastName": "Wahlin", 30 | "description": "gaming strategy master" 31 | } 32 | ] -------------------------------------------------------------------------------- /labs/07-http/begin/server/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-core-concepts-server", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.7", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", 10 | "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", 11 | "requires": { 12 | "mime-types": "~2.1.24", 13 | "negotiator": "0.6.2" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.2", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 24 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.1", 30 | "http-errors": "~1.6.2", 31 | "iconv-lite": "0.4.19", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.5.1", 34 | "raw-body": "2.3.2", 35 | "type-is": "~1.6.15" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 41 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.2", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 46 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 47 | }, 48 | "content-type": { 49 | "version": "1.0.4", 50 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 51 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 52 | }, 53 | "cookie": { 54 | "version": "0.3.1", 55 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 56 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 57 | }, 58 | "cookie-signature": { 59 | "version": "1.0.6", 60 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 61 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 62 | }, 63 | "debug": { 64 | "version": "2.6.9", 65 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 66 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 67 | "requires": { 68 | "ms": "2.0.0" 69 | } 70 | }, 71 | "depd": { 72 | "version": "1.1.2", 73 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 74 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 75 | }, 76 | "destroy": { 77 | "version": "1.0.4", 78 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 79 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 80 | }, 81 | "ee-first": { 82 | "version": "1.1.1", 83 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 84 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 85 | }, 86 | "encodeurl": { 87 | "version": "1.0.2", 88 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 89 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 90 | }, 91 | "escape-html": { 92 | "version": "1.0.3", 93 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 94 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 95 | }, 96 | "etag": { 97 | "version": "1.8.1", 98 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 99 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 100 | }, 101 | "express": { 102 | "version": "4.16.3", 103 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", 104 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 105 | "requires": { 106 | "accepts": "~1.3.5", 107 | "array-flatten": "1.1.1", 108 | "body-parser": "1.18.2", 109 | "content-disposition": "0.5.2", 110 | "content-type": "~1.0.4", 111 | "cookie": "0.3.1", 112 | "cookie-signature": "1.0.6", 113 | "debug": "2.6.9", 114 | "depd": "~1.1.2", 115 | "encodeurl": "~1.0.2", 116 | "escape-html": "~1.0.3", 117 | "etag": "~1.8.1", 118 | "finalhandler": "1.1.1", 119 | "fresh": "0.5.2", 120 | "merge-descriptors": "1.0.1", 121 | "methods": "~1.1.2", 122 | "on-finished": "~2.3.0", 123 | "parseurl": "~1.3.2", 124 | "path-to-regexp": "0.1.7", 125 | "proxy-addr": "~2.0.3", 126 | "qs": "6.5.1", 127 | "range-parser": "~1.2.0", 128 | "safe-buffer": "5.1.1", 129 | "send": "0.16.2", 130 | "serve-static": "1.13.2", 131 | "setprototypeof": "1.1.0", 132 | "statuses": "~1.4.0", 133 | "type-is": "~1.6.16", 134 | "utils-merge": "1.0.1", 135 | "vary": "~1.1.2" 136 | }, 137 | "dependencies": { 138 | "statuses": { 139 | "version": "1.4.0", 140 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 141 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 142 | } 143 | } 144 | }, 145 | "finalhandler": { 146 | "version": "1.1.1", 147 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 148 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 149 | "requires": { 150 | "debug": "2.6.9", 151 | "encodeurl": "~1.0.2", 152 | "escape-html": "~1.0.3", 153 | "on-finished": "~2.3.0", 154 | "parseurl": "~1.3.2", 155 | "statuses": "~1.4.0", 156 | "unpipe": "~1.0.0" 157 | }, 158 | "dependencies": { 159 | "statuses": { 160 | "version": "1.4.0", 161 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 162 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 163 | } 164 | } 165 | }, 166 | "forwarded": { 167 | "version": "0.1.2", 168 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 169 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 170 | }, 171 | "fresh": { 172 | "version": "0.5.2", 173 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 174 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 175 | }, 176 | "http-errors": { 177 | "version": "1.6.3", 178 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 179 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 180 | "requires": { 181 | "depd": "~1.1.2", 182 | "inherits": "2.0.3", 183 | "setprototypeof": "1.1.0", 184 | "statuses": ">= 1.4.0 < 2" 185 | } 186 | }, 187 | "iconv-lite": { 188 | "version": "0.4.19", 189 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 190 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 191 | }, 192 | "inherits": { 193 | "version": "2.0.3", 194 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 195 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 196 | }, 197 | "ipaddr.js": { 198 | "version": "1.9.0", 199 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz", 200 | "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==" 201 | }, 202 | "media-typer": { 203 | "version": "0.3.0", 204 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 205 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 206 | }, 207 | "merge-descriptors": { 208 | "version": "1.0.1", 209 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 210 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 211 | }, 212 | "methods": { 213 | "version": "1.1.2", 214 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 215 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 216 | }, 217 | "mime": { 218 | "version": "1.4.1", 219 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 220 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 221 | }, 222 | "mime-db": { 223 | "version": "1.40.0", 224 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz", 225 | "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==" 226 | }, 227 | "mime-types": { 228 | "version": "2.1.24", 229 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz", 230 | "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==", 231 | "requires": { 232 | "mime-db": "1.40.0" 233 | } 234 | }, 235 | "ms": { 236 | "version": "2.0.0", 237 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 238 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 239 | }, 240 | "negotiator": { 241 | "version": "0.6.2", 242 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", 243 | "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" 244 | }, 245 | "on-finished": { 246 | "version": "2.3.0", 247 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 248 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 249 | "requires": { 250 | "ee-first": "1.1.1" 251 | } 252 | }, 253 | "parseurl": { 254 | "version": "1.3.3", 255 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 256 | "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" 257 | }, 258 | "path-to-regexp": { 259 | "version": "0.1.7", 260 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 261 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 262 | }, 263 | "proxy-addr": { 264 | "version": "2.0.5", 265 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz", 266 | "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==", 267 | "requires": { 268 | "forwarded": "~0.1.2", 269 | "ipaddr.js": "1.9.0" 270 | } 271 | }, 272 | "qs": { 273 | "version": "6.5.1", 274 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 275 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 276 | }, 277 | "range-parser": { 278 | "version": "1.2.1", 279 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", 280 | "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" 281 | }, 282 | "raw-body": { 283 | "version": "2.3.2", 284 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 285 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 286 | "requires": { 287 | "bytes": "3.0.0", 288 | "http-errors": "1.6.2", 289 | "iconv-lite": "0.4.19", 290 | "unpipe": "1.0.0" 291 | }, 292 | "dependencies": { 293 | "depd": { 294 | "version": "1.1.1", 295 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 296 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 297 | }, 298 | "http-errors": { 299 | "version": "1.6.2", 300 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 301 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 302 | "requires": { 303 | "depd": "1.1.1", 304 | "inherits": "2.0.3", 305 | "setprototypeof": "1.0.3", 306 | "statuses": ">= 1.3.1 < 2" 307 | } 308 | }, 309 | "setprototypeof": { 310 | "version": "1.0.3", 311 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 312 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 313 | } 314 | } 315 | }, 316 | "safe-buffer": { 317 | "version": "5.1.1", 318 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 319 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 320 | }, 321 | "send": { 322 | "version": "0.16.2", 323 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 324 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 325 | "requires": { 326 | "debug": "2.6.9", 327 | "depd": "~1.1.2", 328 | "destroy": "~1.0.4", 329 | "encodeurl": "~1.0.2", 330 | "escape-html": "~1.0.3", 331 | "etag": "~1.8.1", 332 | "fresh": "0.5.2", 333 | "http-errors": "~1.6.2", 334 | "mime": "1.4.1", 335 | "ms": "2.0.0", 336 | "on-finished": "~2.3.0", 337 | "range-parser": "~1.2.0", 338 | "statuses": "~1.4.0" 339 | }, 340 | "dependencies": { 341 | "statuses": { 342 | "version": "1.4.0", 343 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 344 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 345 | } 346 | } 347 | }, 348 | "serve-static": { 349 | "version": "1.13.2", 350 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 351 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 352 | "requires": { 353 | "encodeurl": "~1.0.2", 354 | "escape-html": "~1.0.3", 355 | "parseurl": "~1.3.2", 356 | "send": "0.16.2" 357 | } 358 | }, 359 | "setprototypeof": { 360 | "version": "1.1.0", 361 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 362 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 363 | }, 364 | "statuses": { 365 | "version": "1.5.0", 366 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", 367 | "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" 368 | }, 369 | "type-is": { 370 | "version": "1.6.18", 371 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", 372 | "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", 373 | "requires": { 374 | "media-typer": "0.3.0", 375 | "mime-types": "~2.1.24" 376 | } 377 | }, 378 | "unpipe": { 379 | "version": "1.0.0", 380 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 381 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 382 | }, 383 | "utils-merge": { 384 | "version": "1.0.1", 385 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 386 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 387 | }, 388 | "vary": { 389 | "version": "1.1.2", 390 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 391 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 392 | } 393 | } 394 | } 395 | -------------------------------------------------------------------------------- /labs/07-http/begin/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-core-concepts-server", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "start": "node server.js" 7 | }, 8 | "dependencies": { 9 | "express": "4.16.3", 10 | "body-parser": "1.18.2" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /labs/07-http/begin/server/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var express = require('express'), 3 | bodyParser = require('body-parser'), 4 | app = express(), 5 | heroes = require('./data/heroes'); 6 | 7 | app.use(bodyParser.urlencoded({ extended: true })); 8 | app.use(bodyParser.json()); 9 | 10 | //CORS 11 | app.use(function(req, res, next) { 12 | res.header("Access-Control-Allow-Origin", "*"); 13 | res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, X-XSRF-TOKEN, Content-Type, Accept"); 14 | res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH'); 15 | next(); 16 | }); 17 | 18 | app.get('/api/heroes', (req, res) => { 19 | res.json(heroes); 20 | }); 21 | 22 | app.put('/api/heroes/:id', (req, res) => { 23 | let index = heroes.findIndex(obj => obj.id === +req.params.id); 24 | heroes[index] = req.body; 25 | res.json(true); 26 | }); 27 | 28 | app.listen(3000); 29 | 30 | console.log('Express listening on port 3000.'); -------------------------------------------------------------------------------- /labs/07-http/begin/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /labs/07-http/begin/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/07-http/begin/src/assets/logo.png -------------------------------------------------------------------------------- /labs/07-http/begin/src/components/hero-detail.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 78 | -------------------------------------------------------------------------------- /labs/07-http/begin/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 80 | -------------------------------------------------------------------------------- /labs/07-http/begin/src/design/_styles.scss: -------------------------------------------------------------------------------- 1 | #app { 2 | margin: 36px 0 0 48px; 3 | } 4 | 5 | html > body { 6 | margin: 0 !important; 7 | } 8 | 9 | .menu-list .active-link, 10 | .menu-list .router-link-active { 11 | color: #fff; 12 | background-color: $link; 13 | } 14 | 15 | .not-found { 16 | i { 17 | font-size: 20px; 18 | margin-right: 8px; 19 | } 20 | .title { 21 | letter-spacing: 0px; 22 | font-weight: normal; 23 | font-size: 24px; 24 | text-transform: none; 25 | } 26 | } 27 | 28 | .title { 29 | font-size: 2rem; 30 | font-weight: 600; 31 | line-height: 1.125; 32 | word-break: break-word; 33 | } 34 | 35 | header { 36 | font-weight: bold; 37 | font-family: Arial; 38 | span { 39 | letter-spacing: 0px; 40 | &.tour { 41 | color: #fff; 42 | } 43 | &.of { 44 | color: #ccc; 45 | } 46 | &.heroes { 47 | color: $primary-light; 48 | } 49 | } 50 | .navbar-item.nav-home { 51 | border: 3px solid transparent; 52 | border-radius: 0%; 53 | &:hover { 54 | border-right: 3px solid $primary-light; 55 | border-left: 3px solid $primary-light; 56 | } 57 | } 58 | .fab { 59 | font-size: 24px; 60 | &.js-logo { 61 | color: $primary-light; 62 | } 63 | } 64 | .buttons { 65 | i.fab { 66 | color: #fff; 67 | margin-left: 20px; 68 | margin-right: 10px; 69 | &:hover { 70 | color: $primary-light; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .edit-detail { 77 | .input[readonly] { 78 | background-color: $shade-light; 79 | } 80 | } 81 | 82 | .content-title-group { 83 | margin-bottom: 16px; 84 | h2 { 85 | border-left: 16px solid $primary; 86 | border-bottom: 2px solid $primary; 87 | padding-left: 8px; 88 | padding-right: 16px; 89 | display: inline-block; 90 | text-transform: uppercase; 91 | color: #555; 92 | letter-spacing: 0px; 93 | &:hover { 94 | color: $link; 95 | } 96 | } 97 | button.button { 98 | border: 0; 99 | color: #999; 100 | &:hover { 101 | color: $link; 102 | } 103 | } 104 | } 105 | ul.list { 106 | box-shadow: none; 107 | } 108 | div.card-content { 109 | background-color: $shade-light; 110 | .name { 111 | font-size: 28px; 112 | color: #000; 113 | } 114 | .description { 115 | font-size: 20px; 116 | color: #999; 117 | } 118 | background-color: $shade-light; 119 | } 120 | .card { 121 | margin-bottom: 2em; 122 | } 123 | 124 | label.label { 125 | font-weight: normal; 126 | } 127 | 128 | p.card-header-title { 129 | background-color: $primary; 130 | text-transform: uppercase; 131 | letter-spacing: 4px; 132 | color: #fff; 133 | display: block; 134 | padding-left: 24px; 135 | } 136 | .card-footer button { 137 | font-size: 16px; 138 | i { 139 | margin-right: 10px; 140 | } 141 | color: #888; 142 | &:hover { 143 | color: $link; 144 | } 145 | } 146 | 147 | .modal-card-foot button { 148 | display: inline-block; 149 | width: 80px; 150 | } 151 | 152 | .modal-card-head, 153 | .modal-card-body { 154 | text-align: center; 155 | } 156 | 157 | .field { 158 | margin-bottom: 0.75rem; 159 | } 160 | 161 | .navbar-burger { 162 | margin-left: auto; 163 | } 164 | 165 | button.link { 166 | background: none; 167 | border: none; 168 | cursor: pointer; 169 | } 170 | -------------------------------------------------------------------------------- /labs/07-http/begin/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /labs/07-http/begin/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma/bulma.sass'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /labs/07-http/begin/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/07-http/end/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/07-http/end/README.md: -------------------------------------------------------------------------------- 1 | # interacting 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/07-http/end/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/07-http/end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "http", 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 | "@fortawesome/fontawesome-svg-core": "^1.2.18", 12 | "@fortawesome/free-solid-svg-icons": "^5.8.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "axios": "^0.19.0", 15 | "bulma": "^0.7.4", 16 | "core-js": "^2.6.5", 17 | "vue": "^2.6.10" 18 | }, 19 | "devDependencies": { 20 | "@vue/cli-plugin-babel": "^3.7.0", 21 | "@vue/cli-plugin-eslint": "^3.7.0", 22 | "@vue/cli-service": "^3.7.0", 23 | "babel-eslint": "^10.0.1", 24 | "eslint": "^5.16.0", 25 | "eslint-plugin-vue": "^5.0.0", 26 | "node-sass": "^4.12.0", 27 | "sass-loader": "^7.1.0", 28 | "vue-template-compiler": "^2.5.21" 29 | }, 30 | "eslintConfig": { 31 | "root": true, 32 | "env": { 33 | "node": true 34 | }, 35 | "extends": [ 36 | "plugin:vue/essential", 37 | "eslint:recommended" 38 | ], 39 | "rules": {}, 40 | "parserOptions": { 41 | "parser": "babel-eslint" 42 | } 43 | }, 44 | "postcss": { 45 | "plugins": { 46 | "autoprefixer": {} 47 | } 48 | }, 49 | "browserslist": [ 50 | "> 1%", 51 | "last 2 versions" 52 | ] 53 | } 54 | -------------------------------------------------------------------------------- /labs/07-http/end/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/07-http/end/public/favicon.ico -------------------------------------------------------------------------------- /labs/07-http/end/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 14 | http 15 | 16 | 17 | 20 |
21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /labs/07-http/end/server/data/heroes.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 10, 4 | "firstName": "Ella", 5 | "lastName": "Papa", 6 | "description": "fashionista" 7 | }, 8 | { 9 | "id": 20, 10 | "firstName": "Madelyn", 11 | "lastName": "Papa", 12 | "description": "the cat whisperer" 13 | }, 14 | { 15 | "id": 30, 16 | "firstName": "Haley", 17 | "lastName": "Papa", 18 | "description": "pen wielder" 19 | }, 20 | { 21 | "id": 40, 22 | "firstName": "Danny", 23 | "lastName": "Wahlin", 24 | "description": "surgeon extraordinaire" 25 | }, 26 | { 27 | "id": 50, 28 | "firstName": "Jeff", 29 | "lastName": "Wahlin", 30 | "description": "gaming strategy master" 31 | } 32 | ] -------------------------------------------------------------------------------- /labs/07-http/end/server/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-core-concepts-server", 3 | "version": "1.0.0", 4 | "lockfileVersion": 1, 5 | "requires": true, 6 | "dependencies": { 7 | "accepts": { 8 | "version": "1.3.7", 9 | "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz", 10 | "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==", 11 | "requires": { 12 | "mime-types": "~2.1.24", 13 | "negotiator": "0.6.2" 14 | } 15 | }, 16 | "array-flatten": { 17 | "version": "1.1.1", 18 | "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz", 19 | "integrity": "sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=" 20 | }, 21 | "body-parser": { 22 | "version": "1.18.2", 23 | "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.18.2.tgz", 24 | "integrity": "sha1-h2eKGdhLR9hZuDGZvVm84iKxBFQ=", 25 | "requires": { 26 | "bytes": "3.0.0", 27 | "content-type": "~1.0.4", 28 | "debug": "2.6.9", 29 | "depd": "~1.1.1", 30 | "http-errors": "~1.6.2", 31 | "iconv-lite": "0.4.19", 32 | "on-finished": "~2.3.0", 33 | "qs": "6.5.1", 34 | "raw-body": "2.3.2", 35 | "type-is": "~1.6.15" 36 | } 37 | }, 38 | "bytes": { 39 | "version": "3.0.0", 40 | "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz", 41 | "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=" 42 | }, 43 | "content-disposition": { 44 | "version": "0.5.2", 45 | "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz", 46 | "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=" 47 | }, 48 | "content-type": { 49 | "version": "1.0.4", 50 | "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz", 51 | "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==" 52 | }, 53 | "cookie": { 54 | "version": "0.3.1", 55 | "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.3.1.tgz", 56 | "integrity": "sha1-5+Ch+e9DtMi6klxcWpboBtFoc7s=" 57 | }, 58 | "cookie-signature": { 59 | "version": "1.0.6", 60 | "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz", 61 | "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw=" 62 | }, 63 | "debug": { 64 | "version": "2.6.9", 65 | "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", 66 | "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==", 67 | "requires": { 68 | "ms": "2.0.0" 69 | } 70 | }, 71 | "depd": { 72 | "version": "1.1.2", 73 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz", 74 | "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=" 75 | }, 76 | "destroy": { 77 | "version": "1.0.4", 78 | "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz", 79 | "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=" 80 | }, 81 | "ee-first": { 82 | "version": "1.1.1", 83 | "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz", 84 | "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=" 85 | }, 86 | "encodeurl": { 87 | "version": "1.0.2", 88 | "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz", 89 | "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=" 90 | }, 91 | "escape-html": { 92 | "version": "1.0.3", 93 | "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz", 94 | "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=" 95 | }, 96 | "etag": { 97 | "version": "1.8.1", 98 | "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz", 99 | "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=" 100 | }, 101 | "express": { 102 | "version": "4.16.3", 103 | "resolved": "https://registry.npmjs.org/express/-/express-4.16.3.tgz", 104 | "integrity": "sha1-avilAjUNsyRuzEvs9rWjTSL37VM=", 105 | "requires": { 106 | "accepts": "~1.3.5", 107 | "array-flatten": "1.1.1", 108 | "body-parser": "1.18.2", 109 | "content-disposition": "0.5.2", 110 | "content-type": "~1.0.4", 111 | "cookie": "0.3.1", 112 | "cookie-signature": "1.0.6", 113 | "debug": "2.6.9", 114 | "depd": "~1.1.2", 115 | "encodeurl": "~1.0.2", 116 | "escape-html": "~1.0.3", 117 | "etag": "~1.8.1", 118 | "finalhandler": "1.1.1", 119 | "fresh": "0.5.2", 120 | "merge-descriptors": "1.0.1", 121 | "methods": "~1.1.2", 122 | "on-finished": "~2.3.0", 123 | "parseurl": "~1.3.2", 124 | "path-to-regexp": "0.1.7", 125 | "proxy-addr": "~2.0.3", 126 | "qs": "6.5.1", 127 | "range-parser": "~1.2.0", 128 | "safe-buffer": "5.1.1", 129 | "send": "0.16.2", 130 | "serve-static": "1.13.2", 131 | "setprototypeof": "1.1.0", 132 | "statuses": "~1.4.0", 133 | "type-is": "~1.6.16", 134 | "utils-merge": "1.0.1", 135 | "vary": "~1.1.2" 136 | }, 137 | "dependencies": { 138 | "statuses": { 139 | "version": "1.4.0", 140 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 141 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 142 | } 143 | } 144 | }, 145 | "finalhandler": { 146 | "version": "1.1.1", 147 | "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.1.tgz", 148 | "integrity": "sha512-Y1GUDo39ez4aHAw7MysnUD5JzYX+WaIj8I57kO3aEPT1fFRL4sr7mjei97FgnwhAyyzRYmQZaTHb2+9uZ1dPtg==", 149 | "requires": { 150 | "debug": "2.6.9", 151 | "encodeurl": "~1.0.2", 152 | "escape-html": "~1.0.3", 153 | "on-finished": "~2.3.0", 154 | "parseurl": "~1.3.2", 155 | "statuses": "~1.4.0", 156 | "unpipe": "~1.0.0" 157 | }, 158 | "dependencies": { 159 | "statuses": { 160 | "version": "1.4.0", 161 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 162 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 163 | } 164 | } 165 | }, 166 | "forwarded": { 167 | "version": "0.1.2", 168 | "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz", 169 | "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=" 170 | }, 171 | "fresh": { 172 | "version": "0.5.2", 173 | "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz", 174 | "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=" 175 | }, 176 | "http-errors": { 177 | "version": "1.6.3", 178 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.3.tgz", 179 | "integrity": "sha1-i1VoC7S+KDoLW/TqLjhYC+HZMg0=", 180 | "requires": { 181 | "depd": "~1.1.2", 182 | "inherits": "2.0.3", 183 | "setprototypeof": "1.1.0", 184 | "statuses": ">= 1.4.0 < 2" 185 | } 186 | }, 187 | "iconv-lite": { 188 | "version": "0.4.19", 189 | "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz", 190 | "integrity": "sha512-oTZqweIP51xaGPI4uPa56/Pri/480R+mo7SeU+YETByQNhDG55ycFyNLIgta9vXhILrxXDmF7ZGhqZIcuN0gJQ==" 191 | }, 192 | "inherits": { 193 | "version": "2.0.3", 194 | "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz", 195 | "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=" 196 | }, 197 | "ipaddr.js": { 198 | "version": "1.9.0", 199 | "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.0.tgz", 200 | "integrity": "sha512-M4Sjn6N/+O6/IXSJseKqHoFc+5FdGJ22sXqnjTpdZweHK64MzEPAyQZyEU3R/KRv2GLoa7nNtg/C2Ev6m7z+eA==" 201 | }, 202 | "media-typer": { 203 | "version": "0.3.0", 204 | "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz", 205 | "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=" 206 | }, 207 | "merge-descriptors": { 208 | "version": "1.0.1", 209 | "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", 210 | "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=" 211 | }, 212 | "methods": { 213 | "version": "1.1.2", 214 | "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz", 215 | "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=" 216 | }, 217 | "mime": { 218 | "version": "1.4.1", 219 | "resolved": "https://registry.npmjs.org/mime/-/mime-1.4.1.tgz", 220 | "integrity": "sha512-KI1+qOZu5DcW6wayYHSzR/tXKCDC5Om4s1z2QJjDULzLcmf3DvzS7oluY4HCTrc+9FiKmWUgeNLg7W3uIQvxtQ==" 221 | }, 222 | "mime-db": { 223 | "version": "1.40.0", 224 | "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.40.0.tgz", 225 | "integrity": "sha512-jYdeOMPy9vnxEqFRRo6ZvTZ8d9oPb+k18PKoYNYUe2stVEBPPwsln/qWzdbmaIvnhZ9v2P+CuecK+fpUfsV2mA==" 226 | }, 227 | "mime-types": { 228 | "version": "2.1.24", 229 | "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.24.tgz", 230 | "integrity": "sha512-WaFHS3MCl5fapm3oLxU4eYDw77IQM2ACcxQ9RIxfaC3ooc6PFuBMGZZsYpvoXS5D5QTWPieo1jjLdAm3TBP3cQ==", 231 | "requires": { 232 | "mime-db": "1.40.0" 233 | } 234 | }, 235 | "ms": { 236 | "version": "2.0.0", 237 | "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz", 238 | "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=" 239 | }, 240 | "negotiator": { 241 | "version": "0.6.2", 242 | "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz", 243 | "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==" 244 | }, 245 | "on-finished": { 246 | "version": "2.3.0", 247 | "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", 248 | "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=", 249 | "requires": { 250 | "ee-first": "1.1.1" 251 | } 252 | }, 253 | "parseurl": { 254 | "version": "1.3.3", 255 | "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz", 256 | "integrity": "sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==" 257 | }, 258 | "path-to-regexp": { 259 | "version": "0.1.7", 260 | "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-0.1.7.tgz", 261 | "integrity": "sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=" 262 | }, 263 | "proxy-addr": { 264 | "version": "2.0.5", 265 | "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.5.tgz", 266 | "integrity": "sha512-t/7RxHXPH6cJtP0pRG6smSr9QJidhB+3kXu0KgXnbGYMgzEnUxRQ4/LDdfOwZEMyIh3/xHb8PX3t+lfL9z+YVQ==", 267 | "requires": { 268 | "forwarded": "~0.1.2", 269 | "ipaddr.js": "1.9.0" 270 | } 271 | }, 272 | "qs": { 273 | "version": "6.5.1", 274 | "resolved": "https://registry.npmjs.org/qs/-/qs-6.5.1.tgz", 275 | "integrity": "sha512-eRzhrN1WSINYCDCbrz796z37LOe3m5tmW7RQf6oBntukAG1nmovJvhnwHHRMAfeoItc1m2Hk02WER2aQ/iqs+A==" 276 | }, 277 | "range-parser": { 278 | "version": "1.2.1", 279 | "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz", 280 | "integrity": "sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==" 281 | }, 282 | "raw-body": { 283 | "version": "2.3.2", 284 | "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.3.2.tgz", 285 | "integrity": "sha1-vNYMd9Prk83gBQKVw/N5OJvIj4k=", 286 | "requires": { 287 | "bytes": "3.0.0", 288 | "http-errors": "1.6.2", 289 | "iconv-lite": "0.4.19", 290 | "unpipe": "1.0.0" 291 | }, 292 | "dependencies": { 293 | "depd": { 294 | "version": "1.1.1", 295 | "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz", 296 | "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=" 297 | }, 298 | "http-errors": { 299 | "version": "1.6.2", 300 | "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.2.tgz", 301 | "integrity": "sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=", 302 | "requires": { 303 | "depd": "1.1.1", 304 | "inherits": "2.0.3", 305 | "setprototypeof": "1.0.3", 306 | "statuses": ">= 1.3.1 < 2" 307 | } 308 | }, 309 | "setprototypeof": { 310 | "version": "1.0.3", 311 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz", 312 | "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=" 313 | } 314 | } 315 | }, 316 | "safe-buffer": { 317 | "version": "5.1.1", 318 | "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", 319 | "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==" 320 | }, 321 | "send": { 322 | "version": "0.16.2", 323 | "resolved": "https://registry.npmjs.org/send/-/send-0.16.2.tgz", 324 | "integrity": "sha512-E64YFPUssFHEFBvpbbjr44NCLtI1AohxQ8ZSiJjQLskAdKuriYEP6VyGEsRDH8ScozGpkaX1BGvhanqCwkcEZw==", 325 | "requires": { 326 | "debug": "2.6.9", 327 | "depd": "~1.1.2", 328 | "destroy": "~1.0.4", 329 | "encodeurl": "~1.0.2", 330 | "escape-html": "~1.0.3", 331 | "etag": "~1.8.1", 332 | "fresh": "0.5.2", 333 | "http-errors": "~1.6.2", 334 | "mime": "1.4.1", 335 | "ms": "2.0.0", 336 | "on-finished": "~2.3.0", 337 | "range-parser": "~1.2.0", 338 | "statuses": "~1.4.0" 339 | }, 340 | "dependencies": { 341 | "statuses": { 342 | "version": "1.4.0", 343 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz", 344 | "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew==" 345 | } 346 | } 347 | }, 348 | "serve-static": { 349 | "version": "1.13.2", 350 | "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.2.tgz", 351 | "integrity": "sha512-p/tdJrO4U387R9oMjb1oj7qSMaMfmOyd4j9hOFoxZe2baQszgHcSWjuya/CiT5kgZZKRudHNOA0pYXOl8rQ5nw==", 352 | "requires": { 353 | "encodeurl": "~1.0.2", 354 | "escape-html": "~1.0.3", 355 | "parseurl": "~1.3.2", 356 | "send": "0.16.2" 357 | } 358 | }, 359 | "setprototypeof": { 360 | "version": "1.1.0", 361 | "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.0.tgz", 362 | "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==" 363 | }, 364 | "statuses": { 365 | "version": "1.5.0", 366 | "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz", 367 | "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=" 368 | }, 369 | "type-is": { 370 | "version": "1.6.18", 371 | "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz", 372 | "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==", 373 | "requires": { 374 | "media-typer": "0.3.0", 375 | "mime-types": "~2.1.24" 376 | } 377 | }, 378 | "unpipe": { 379 | "version": "1.0.0", 380 | "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz", 381 | "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=" 382 | }, 383 | "utils-merge": { 384 | "version": "1.0.1", 385 | "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz", 386 | "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=" 387 | }, 388 | "vary": { 389 | "version": "1.1.2", 390 | "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz", 391 | "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=" 392 | } 393 | } 394 | } 395 | -------------------------------------------------------------------------------- /labs/07-http/end/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-core-concepts-server", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "start": "node server.js" 7 | }, 8 | "dependencies": { 9 | "express": "4.16.3", 10 | "body-parser": "1.18.2" 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /labs/07-http/end/server/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var express = require('express'), 3 | bodyParser = require('body-parser'), 4 | app = express(), 5 | heroes = require('./data/heroes'); 6 | 7 | app.use(bodyParser.urlencoded({ extended: true })); 8 | app.use(bodyParser.json()); 9 | 10 | //CORS 11 | app.use(function(req, res, next) { 12 | res.header("Access-Control-Allow-Origin", "*"); 13 | res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, X-XSRF-TOKEN, Content-Type, Accept"); 14 | res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,PATCH'); 15 | next(); 16 | }); 17 | 18 | app.get('/api/heroes', (req, res) => { 19 | res.json(heroes); 20 | }); 21 | 22 | app.put('/api/heroes/:id', (req, res) => { 23 | let index = heroes.findIndex(obj => obj.id === +req.params.id); 24 | heroes[index] = req.body; 25 | res.json(true); 26 | }); 27 | 28 | app.listen(3000); 29 | 30 | console.log('Express listening on port 3000.'); -------------------------------------------------------------------------------- /labs/07-http/end/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 20 | 21 | -------------------------------------------------------------------------------- /labs/07-http/end/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/07-http/end/src/assets/logo.png -------------------------------------------------------------------------------- /labs/07-http/end/src/components/hero-detail.vue: -------------------------------------------------------------------------------- 1 | 41 | 42 | 83 | -------------------------------------------------------------------------------- /labs/07-http/end/src/components/heroes.vue: -------------------------------------------------------------------------------- 1 | 37 | 38 | 81 | -------------------------------------------------------------------------------- /labs/07-http/end/src/design/_styles.scss: -------------------------------------------------------------------------------- 1 | #app { 2 | margin: 36px 0 0 48px; 3 | } 4 | 5 | html > body { 6 | margin: 0 !important; 7 | } 8 | 9 | .menu-list .active-link, 10 | .menu-list .router-link-active { 11 | color: #fff; 12 | background-color: $link; 13 | } 14 | 15 | .not-found { 16 | i { 17 | font-size: 20px; 18 | margin-right: 8px; 19 | } 20 | .title { 21 | letter-spacing: 0px; 22 | font-weight: normal; 23 | font-size: 24px; 24 | text-transform: none; 25 | } 26 | } 27 | 28 | .title { 29 | font-size: 2rem; 30 | font-weight: 600; 31 | line-height: 1.125; 32 | word-break: break-word; 33 | } 34 | 35 | header { 36 | font-weight: bold; 37 | font-family: Arial; 38 | span { 39 | letter-spacing: 0px; 40 | &.tour { 41 | color: #fff; 42 | } 43 | &.of { 44 | color: #ccc; 45 | } 46 | &.heroes { 47 | color: $primary-light; 48 | } 49 | } 50 | .navbar-item.nav-home { 51 | border: 3px solid transparent; 52 | border-radius: 0%; 53 | &:hover { 54 | border-right: 3px solid $primary-light; 55 | border-left: 3px solid $primary-light; 56 | } 57 | } 58 | .fab { 59 | font-size: 24px; 60 | &.js-logo { 61 | color: $primary-light; 62 | } 63 | } 64 | .buttons { 65 | i.fab { 66 | color: #fff; 67 | margin-left: 20px; 68 | margin-right: 10px; 69 | &:hover { 70 | color: $primary-light; 71 | } 72 | } 73 | } 74 | } 75 | 76 | .edit-detail { 77 | .input[readonly] { 78 | background-color: $shade-light; 79 | } 80 | } 81 | 82 | .content-title-group { 83 | margin-bottom: 16px; 84 | h2 { 85 | border-left: 16px solid $primary; 86 | border-bottom: 2px solid $primary; 87 | padding-left: 8px; 88 | padding-right: 16px; 89 | display: inline-block; 90 | text-transform: uppercase; 91 | color: #555; 92 | letter-spacing: 0px; 93 | &:hover { 94 | color: $link; 95 | } 96 | } 97 | button.button { 98 | border: 0; 99 | color: #999; 100 | &:hover { 101 | color: $link; 102 | } 103 | } 104 | } 105 | ul.list { 106 | box-shadow: none; 107 | } 108 | div.card-content { 109 | background-color: $shade-light; 110 | .name { 111 | font-size: 28px; 112 | color: #000; 113 | } 114 | .description { 115 | font-size: 20px; 116 | color: #999; 117 | } 118 | background-color: $shade-light; 119 | } 120 | .card { 121 | margin-bottom: 2em; 122 | } 123 | 124 | label.label { 125 | font-weight: normal; 126 | } 127 | 128 | p.card-header-title { 129 | background-color: $primary; 130 | text-transform: uppercase; 131 | letter-spacing: 4px; 132 | color: #fff; 133 | display: block; 134 | padding-left: 24px; 135 | } 136 | .card-footer button { 137 | font-size: 16px; 138 | i { 139 | margin-right: 10px; 140 | } 141 | color: #888; 142 | &:hover { 143 | color: $link; 144 | } 145 | } 146 | 147 | .modal-card-foot button { 148 | display: inline-block; 149 | width: 80px; 150 | } 151 | 152 | .modal-card-head, 153 | .modal-card-body { 154 | text-align: center; 155 | } 156 | 157 | .field { 158 | margin-bottom: 0.75rem; 159 | } 160 | 161 | .navbar-burger { 162 | margin-left: auto; 163 | } 164 | 165 | button.link { 166 | background: none; 167 | border: none; 168 | cursor: pointer; 169 | } 170 | -------------------------------------------------------------------------------- /labs/07-http/end/src/design/_variables.scss: -------------------------------------------------------------------------------- 1 | $vue: #42b883; 2 | $vue-light: #42b883; 3 | $primary: $vue; 4 | $primary-light: $vue-light; 5 | $link: $primary; 6 | $info: $primary; 7 | $shade-light: #fafafa; 8 | -------------------------------------------------------------------------------- /labs/07-http/end/src/design/index.scss: -------------------------------------------------------------------------------- 1 | @import 'bulma/bulma.sass'; 2 | @import 'variables'; 3 | @import 'styles'; 4 | -------------------------------------------------------------------------------- /labs/07-http/end/src/heroes.js: -------------------------------------------------------------------------------- 1 | import axios from "axios"; 2 | 3 | const URL = "http://localhost:3000/api/heroes"; 4 | const captains = console; 5 | 6 | export function getHeroes() { 7 | return axios 8 | .get(URL) 9 | .then(res => res.data) 10 | .catch(error => captains.error(error)); 11 | } 12 | 13 | export function updateHero(hero) { 14 | return axios 15 | .put(URL + '/' + hero.id, hero) 16 | .then(res => { 17 | captains.log('PUT status: ' + res.data); 18 | return res.data; 19 | }) 20 | .catch(error => captains.error(error)); 21 | } -------------------------------------------------------------------------------- /labs/07-http/end/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | Vue.config.productionTip = false 5 | 6 | new Vue({ 7 | render: h => h(App), 8 | }).$mount('#app') 9 | -------------------------------------------------------------------------------- /labs/08-routing/begin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/08-routing/begin/README.md: -------------------------------------------------------------------------------- 1 | # base 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/08-routing/begin/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/08-routing/begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10" 13 | }, 14 | "devDependencies": { 15 | "@vue/cli-plugin-babel": "^3.7.0", 16 | "@vue/cli-plugin-eslint": "^3.7.0", 17 | "@vue/cli-service": "^3.7.0", 18 | "babel-eslint": "^10.0.1", 19 | "eslint": "^5.16.0", 20 | "eslint-plugin-vue": "^5.0.0", 21 | "vue-template-compiler": "^2.5.21" 22 | }, 23 | "eslintConfig": { 24 | "root": true, 25 | "env": { 26 | "node": true 27 | }, 28 | "extends": [ 29 | "plugin:vue/essential", 30 | "eslint:recommended" 31 | ], 32 | "rules": {}, 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 | ] 46 | } 47 | -------------------------------------------------------------------------------- /labs/08-routing/begin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/08-routing/begin/public/favicon.ico -------------------------------------------------------------------------------- /labs/08-routing/begin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-project 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/08-routing/begin/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /labs/08-routing/begin/src/assets/global.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | tr:nth-child(1) { 6 | background-color: #000; 7 | color: #fff; 8 | } 9 | 10 | th { 11 | text-align: left; 12 | } 13 | 14 | tr:hover { 15 | background-color: #ccc; 16 | cursor: pointer; 17 | } 18 | 19 | tr:nth-child(even) { 20 | background-color: #efefef; 21 | } 22 | -------------------------------------------------------------------------------- /labs/08-routing/begin/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/08-routing/begin/src/assets/logo.png -------------------------------------------------------------------------------- /labs/08-routing/begin/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/App.vue'; 3 | 4 | Vue.config.productionTip = false; 5 | 6 | new Vue({ 7 | render: h => h(App) 8 | }).$mount('#app'); 9 | -------------------------------------------------------------------------------- /labs/08-routing/begin/src/views/heroes-list.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /labs/08-routing/begin/src/views/not-found.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /labs/08-routing/begin/src/views/orders-list.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 44 | -------------------------------------------------------------------------------- /labs/08-routing/begin/src/views/villains-list.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 40 | -------------------------------------------------------------------------------- /labs/08-routing/end/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/08-routing/end/README.md: -------------------------------------------------------------------------------- 1 | # base 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/08-routing/end/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/08-routing/end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "vue-router": "^3.0.3" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^3.7.0", 17 | "@vue/cli-plugin-eslint": "^3.7.0", 18 | "@vue/cli-service": "^3.7.0", 19 | "babel-eslint": "^10.0.1", 20 | "eslint": "^5.16.0", 21 | "eslint-plugin-vue": "^5.0.0", 22 | "vue-template-compiler": "^2.5.21" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/essential", 31 | "eslint:recommended" 32 | ], 33 | "rules": {}, 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | } 37 | }, 38 | "postcss": { 39 | "plugins": { 40 | "autoprefixer": {} 41 | } 42 | }, 43 | "browserslist": [ 44 | "> 1%", 45 | "last 2 versions" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /labs/08-routing/end/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/08-routing/end/public/favicon.ico -------------------------------------------------------------------------------- /labs/08-routing/end/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-project 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/08-routing/end/src/App.vue: -------------------------------------------------------------------------------- 1 | 10 | 11 | 16 | 17 | 28 | -------------------------------------------------------------------------------- /labs/08-routing/end/src/assets/global.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | tr:nth-child(1) { 6 | background-color: #000; 7 | color: #fff; 8 | } 9 | 10 | th { 11 | text-align: left; 12 | } 13 | 14 | tr:hover { 15 | background-color: #ccc; 16 | cursor: pointer; 17 | } 18 | 19 | tr:nth-child(even) { 20 | background-color: #efefef; 21 | } -------------------------------------------------------------------------------- /labs/08-routing/end/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/08-routing/end/src/assets/logo.png -------------------------------------------------------------------------------- /labs/08-routing/end/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/App.vue'; 3 | import router from './router'; 4 | 5 | Vue.config.productionTip = false; 6 | 7 | new Vue({ 8 | router, 9 | render: h => h(App) 10 | }).$mount('#app'); 11 | -------------------------------------------------------------------------------- /labs/08-routing/end/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import VillainsList from './views/villains-list.vue'; 4 | import HeroesList from './views/heroes-list.vue'; 5 | import NotFound from './views/not-found.vue'; 6 | 7 | Vue.use(Router); 8 | 9 | export default new Router({ 10 | mode: 'history', 11 | base: process.env.BASE_URL, 12 | routes: [ 13 | { 14 | path: '/', 15 | name: 'villains', 16 | component: VillainsList 17 | }, 18 | { 19 | path: '/heroes', 20 | name: 'HeroesList', 21 | component: HeroesList 22 | }, 23 | { 24 | path: '/orders', 25 | name: 'orders', 26 | // route level code-splitting 27 | // this generates a separate chunk (about.[hash].js) for this route 28 | // which is lazy-loaded when the route is visited. 29 | component: () => 30 | import(/* webpackChunkName: "orders" */ './views/orders-list.vue') 31 | }, 32 | { path: '*', component: NotFound } 33 | ] 34 | }); 35 | -------------------------------------------------------------------------------- /labs/08-routing/end/src/views/heroes-list.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /labs/08-routing/end/src/views/not-found.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /labs/08-routing/end/src/views/orders-list.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 46 | -------------------------------------------------------------------------------- /labs/08-routing/end/src/views/villains-list.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 39 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/README.md: -------------------------------------------------------------------------------- 1 | # base 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "vue-router": "^3.0.3" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "^3.7.0", 17 | "@vue/cli-plugin-eslint": "^3.7.0", 18 | "@vue/cli-service": "^3.7.0", 19 | "babel-eslint": "^10.0.1", 20 | "eslint": "^5.16.0", 21 | "eslint-plugin-vue": "^5.0.0", 22 | "vue-template-compiler": "^2.5.21" 23 | }, 24 | "eslintConfig": { 25 | "root": true, 26 | "env": { 27 | "node": true 28 | }, 29 | "extends": [ 30 | "plugin:vue/essential", 31 | "eslint:recommended" 32 | ], 33 | "rules": {}, 34 | "parserOptions": { 35 | "parser": "babel-eslint" 36 | } 37 | }, 38 | "postcss": { 39 | "plugins": { 40 | "autoprefixer": {} 41 | } 42 | }, 43 | "browserslist": [ 44 | "> 1%", 45 | "last 2 versions" 46 | ] 47 | } 48 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/09-vuex-state/begin/public/favicon.ico -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-project 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "id": 11, "name": "Blow torch", "price": 399.99 }, 3 | { "id": 12, "name": "Hammer ", "price": 59.99 }, 4 | { "id": 13, "name": "TV", "price": 899.99 }, 5 | { "id": 14, "name": "Surfboard", "price": 679.0 } 6 | ] -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/assets/global.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | tr:nth-child(1) { 6 | background-color: #000; 7 | color: #fff; 8 | } 9 | 10 | th { 11 | text-align: left; 12 | } 13 | 14 | tr:hover { 15 | background-color: #ccc; 16 | cursor: pointer; 17 | } 18 | 19 | tr:nth-child(even) { 20 | background-color: #efefef; 21 | } -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/09-vuex-state/begin/src/assets/logo.png -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/components/cart.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 46 | 47 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/App.vue'; 3 | 4 | import router from './router'; 5 | 6 | Vue.config.productionTip = false; 7 | 8 | new Vue({ 9 | router, 10 | render: h => h(App) 11 | }).$mount('#app'); 12 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | import NotFound from './views/not-found.vue'; 4 | 5 | Vue.use(Router); 6 | 7 | export default new Router({ 8 | mode: 'history', 9 | base: process.env.BASE_URL, 10 | routes: [ 11 | { 12 | path: '/', 13 | name: 'default', 14 | redirect: '/products' 15 | }, 16 | { 17 | path: '/products', 18 | name: 'products', 19 | // route level code-splitting 20 | // this generates a separate chunk (products.[hash].js) for this route 21 | // which is lazy-loaded when the route is visited. 22 | component: () => 23 | import(/* webpackChunkName: "products" */ './views/products.vue') 24 | }, 25 | { 26 | path: '/purchased', 27 | name: 'purchased', 28 | // route level code-splitting 29 | // this generates a separate chunk (purchased.[hash].js) for this route 30 | // which is lazy-loaded when the route is visited. 31 | component: () => 32 | import(/* webpackChunkName: "purchased" */ './views/purchased.vue') 33 | }, 34 | { path: '*', component: NotFound } 35 | ] 36 | }); 37 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/views/not-found.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/views/products.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 42 | 43 | -------------------------------------------------------------------------------- /labs/09-vuex-state/begin/src/views/purchased.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | # local env files 6 | .env.local 7 | .env.*.local 8 | 9 | # Log files 10 | npm-debug.log* 11 | yarn-debug.log* 12 | yarn-error.log* 13 | 14 | # Editor directories and files 15 | .idea 16 | .vscode 17 | *.suo 18 | *.ntvs* 19 | *.njsproj 20 | *.sln 21 | *.sw? 22 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/README.md: -------------------------------------------------------------------------------- 1 | # base 2 | 3 | ## Project setup 4 | ``` 5 | npm install 6 | ``` 7 | 8 | ### Compiles and hot-reloads for development 9 | ``` 10 | npm run serve 11 | ``` 12 | 13 | ### Compiles and minifies for production 14 | ``` 15 | npm run build 16 | ``` 17 | 18 | ### Run your tests 19 | ``` 20 | npm run test 21 | ``` 22 | 23 | ### Lints and fixes files 24 | ``` 25 | npm run lint 26 | ``` 27 | 28 | ### Customize configuration 29 | See [Configuration Reference](https://cli.vuejs.org/config/). 30 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-project", 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 | "core-js": "^2.6.5", 12 | "vue": "^2.6.10", 13 | "vue-router": "^3.0.3", 14 | "vuex": "^3.0.1" 15 | }, 16 | "devDependencies": { 17 | "@vue/cli-plugin-babel": "^3.7.0", 18 | "@vue/cli-plugin-eslint": "^3.7.0", 19 | "@vue/cli-service": "^3.7.0", 20 | "babel-eslint": "^10.0.1", 21 | "eslint": "^5.16.0", 22 | "eslint-plugin-vue": "^5.0.0", 23 | "vue-template-compiler": "^2.5.21" 24 | }, 25 | "eslintConfig": { 26 | "root": true, 27 | "env": { 28 | "node": true 29 | }, 30 | "extends": [ 31 | "plugin:vue/essential", 32 | "eslint:recommended" 33 | ], 34 | "rules": {}, 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | } 38 | }, 39 | "postcss": { 40 | "plugins": { 41 | "autoprefixer": {} 42 | } 43 | }, 44 | "browserslist": [ 45 | "> 1%", 46 | "last 2 versions" 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/09-vuex-state/end/public/favicon.ico -------------------------------------------------------------------------------- /labs/09-vuex-state/end/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | my-project 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/public/products.json: -------------------------------------------------------------------------------- 1 | [ 2 | { "id": 11, "name": "Blow torch", "price": 399.99 }, 3 | { "id": 12, "name": "Hammer ", "price": 59.99 }, 4 | { "id": 13, "name": "TV", "price": 899.99 }, 5 | { "id": 14, "name": "Surfboard", "price": 679.0 } 6 | ] -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 24 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/assets/global.css: -------------------------------------------------------------------------------- 1 | table { 2 | width: 100%; 3 | } 4 | 5 | tr:nth-child(1) { 6 | background-color: #000; 7 | color: #fff; 8 | } 9 | 10 | th { 11 | text-align: left; 12 | } 13 | 14 | tr:hover { 15 | background-color: #ccc; 16 | cursor: pointer; 17 | } 18 | 19 | tr:nth-child(even) { 20 | background-color: #efefef; 21 | } -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/johnpapa/vue-workshop/a908b9200a546446e20d8024909be6456160a7f1/labs/09-vuex-state/end/src/assets/logo.png -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/components/cart.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 48 | 49 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import App from '@/App.vue'; 3 | 4 | import router from './router'; 5 | import store from './store'; 6 | 7 | Vue.config.productionTip = false; 8 | 9 | new Vue({ 10 | router, 11 | store, 12 | render: h => h(App) 13 | }).$mount('#app'); 14 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/router.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Router from 'vue-router'; 3 | 4 | import NotFound from './views/not-found.vue'; 5 | 6 | Vue.use(Router); 7 | 8 | export default new Router({ 9 | mode: 'history', 10 | base: process.env.BASE_URL, 11 | routes: [ 12 | { 13 | path: '/', 14 | name: 'default', 15 | redirect: '/products' 16 | }, 17 | { 18 | path: '/products', 19 | name: 'products', 20 | // route level code-splitting 21 | // this generates a separate chunk (products.[hash].js) for this route 22 | // which is lazy-loaded when the route is visited. 23 | component: () => 24 | import(/* webpackChunkName: "products" */ './views/products.vue') 25 | }, 26 | { 27 | path: '/purchased', 28 | name: 'purchased', 29 | // route level code-splitting 30 | // this generates a separate chunk (purchased.[hash].js) for this route 31 | // which is lazy-loaded when the route is visited. 32 | component: () => 33 | import(/* webpackChunkName: "purchased" */ './views/purchased.vue') 34 | }, 35 | { path: '*', component: NotFound } 36 | ] 37 | }); 38 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/store.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue'; 2 | import Vuex from 'vuex'; 3 | 4 | Vue.use(Vuex); 5 | 6 | const URL = 'http://localhost:8080/products.json'; 7 | 8 | export default new Vuex.Store({ 9 | state: { 10 | cart: [], 11 | products: [] 12 | }, 13 | mutations: { 14 | addProduct({ products }, product) { 15 | products.push(product); 16 | }, 17 | addToCart({ cart }, product) { 18 | const itemIndex = cart.findIndex(item => item.id === product.id); 19 | if (itemIndex === -1) { 20 | cart.push({ ...product, quantity: 1, total: product.price }); 21 | } else { 22 | let cartItem = cart[itemIndex]; 23 | cartItem.quantity++; 24 | cartItem.total = cartItem.price * cartItem.quantity; 25 | } 26 | }, 27 | removeFromCart({ cart }, item) { 28 | const itemIndex = cart.findIndex(cartItem => cartItem.id === item.id); 29 | cart.splice(itemIndex, 1); 30 | } 31 | }, 32 | actions: { 33 | addToCartAction({ commit }, product) { 34 | commit('addToCart', product); 35 | }, 36 | getProductsAction({ state, commit }) { 37 | if (!state.products.length) { 38 | fetch(URL) 39 | .then(res => res.json()) 40 | .then(products => { 41 | for (let product of products) { 42 | commit('addProduct', { 43 | id: product.id, 44 | name: product.name, 45 | price: product.price 46 | }); 47 | } 48 | }); 49 | } 50 | }, 51 | removeFromCartAction({ commit }, item) { 52 | commit('removeFromCart', item); 53 | } 54 | }, 55 | getters: { 56 | cartTotal: ({ cart }) => { 57 | let total = 0; 58 | for (let item of cart) { 59 | total += item.price * item.quantity; 60 | } 61 | return total; 62 | } 63 | } 64 | }); 65 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/views/not-found.vue: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/views/products.vue: -------------------------------------------------------------------------------- 1 | 25 | 26 | 46 | 47 | -------------------------------------------------------------------------------- /labs/09-vuex-state/end/src/views/purchased.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | --------------------------------------------------------------------------------