├── .gitignore ├── 01 - Hello World ├── index-FINAL.html └── index.html ├── 02 - Vue Instance ├── index-FINAL.html └── index.html ├── 03 - Template Basics ├── index-FINAL.html └── index.html ├── 04 - Template Lists ├── index-FINAL.html └── index.html ├── 05 - Styles and CSS ├── index-FINAL.html └── index.html ├── 06 - Handling Events (Basics) ├── index-FINAL.html └── index.html ├── 07 - Handling Events (Accordion) ├── index-FINAL.html └── index.html ├── 08 - Quick Form ├── index-FINAL.html └── index.html ├── 09 - Lifecycle Events ├── index-FINAL.html └── index.html ├── 10 - Getting Real Data (HTTP) ├── index-FINAL.html └── index.html ├── 11 - Gif Overlays ├── index-FINAL.html └── index.html ├── 12 - Gif Search ├── index-FINAL.html └── index.html ├── 13 - Components (Gif Box) ├── index-FINAL.html └── index.html ├── 14 - Components (Gif Grid) ├── index-FINAL.html └── index.html ├── 15 - Component Registration ├── index-FINAL.html └── index.html ├── 16 - Organization ├── index-FINAL.html ├── index.html └── js │ └── components │ ├── gif-box.js │ └── gif-grid.js ├── 17-cli-simple └── index.html ├── 17-cli-webpack-simple ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── index.html ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js ├── LICENSE ├── README.md └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | -------------------------------------------------------------------------------- /01 - Hello World/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 22 | 23 | 24 |

25 |

26 | Hi my name is {{ name }} and my message is: {{ message }} 27 |

28 | 29 | 30 | 31 |

32 | 33 | 34 | 57 | 58 | -------------------------------------------------------------------------------- /01 - Hello World/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Hello World 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

18 |

19 | 20 | 21 |

22 |

23 | 24 | 25 | 28 | 29 | -------------------------------------------------------------------------------- /02 - Vue Instance/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Basics 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 |

18 | Name: {{ name }}
19 | Username: {{ username }}
20 | Email: {{ email }} 21 |

22 | 23 | 24 | Do the Celebration! 25 | 26 |

27 | 28 | 29 | 44 | 45 | -------------------------------------------------------------------------------- /02 - Vue Instance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Vue Basics 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

19 | 20 | 21 | 23 | 24 | -------------------------------------------------------------------------------- /03 - Template Basics/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 | {{ avatar }} 18 | 19 | 20 | 21 | 22 | 23 |

24 | we did it! successful! 25 |

26 | 27 |

28 | we did not do it. not successful 29 |

30 |

31 | 32 | 33 | 42 | 43 | -------------------------------------------------------------------------------- /03 - Template Basics/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 |

18 | 19 | 20 | 25 | 26 | -------------------------------------------------------------------------------- /04 - Template Lists/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 |

17 | 18 |

20 |
21 | Name: {{ user.name }}
22 | Username: {{ user.username }} 23 |

25 |

26 | 27 | 28 | 67 | 68 | -------------------------------------------------------------------------------- /04 - Template Lists/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 |

18 | 19 | 20 | 46 | 47 | -------------------------------------------------------------------------------- /05 - Styles and CSS/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 |

Inline Classes

19 |

20 | I am a notification! 21 |

22 | 23 | We did it! 24 | 25 | 26 |

Object Classes

27 |

28 | I am a notification! 29 |

30 | 31 | 32 |

Array Classes

33 |

34 |

35 | 36 | Info 37 | 38 | 39 | Danger 40 | 41 | 42 | Warning 43 | 44 |

45 |

46 |

47 |

48 | 49 | Small 50 | 51 | 52 | Medium 53 | 54 | 55 | Large 56 | 57 |

58 |

59 | 60 | 63 | 64 | 65 |

66 | 67 | 68 |

Inline Styles

69 |

70 | I am a notification! 71 |

72 | 73 | 74 |

Object Styles

75 |

76 |

77 | I am a notification! 78 |

79 |

80 | 81 |

82 | 83 | 84 | 121 | 122 | -------------------------------------------------------------------------------- /05 - Styles and CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 | 18 |

Inline Classes

19 | 20 | 21 |

Object Classes

22 | 23 | 24 |

Array Classes

25 | 26 | 27 |

28 | 29 | 30 |

Inline Styles

31 | 32 | 33 |

Object Styles

34 | 35 |

36 | 37 | 38 | 43 | 44 | -------------------------------------------------------------------------------- /06 - Handling Events (Basics)/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |

22 | 23 | 24 |

Counter!

25 |

26 |

27 | 28 | Count Up 29 |

30 | 31 | 32 | 36 | Catch me if you can! 37 | 38 |

39 | 40 | 41 | 77 | 78 | -------------------------------------------------------------------------------- /06 - Handling Events (Basics)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

19 | 20 |

21 | 22 | 23 | 28 | 29 | -------------------------------------------------------------------------------- /07 - Handling Events (Accordion)/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |

38 | 39 |

40 |

41 | Hello World 42 |

43 |

44 |

45 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi 46 |

47 |

48 |

49 | 50 |

51 | 52 | 53 | 86 | 87 | -------------------------------------------------------------------------------- /07 - Handling Events (Accordion)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 28 | 29 | 30 | 31 | 32 | 33 | 34 |

35 | 36 |

37 | 38 | 39 | 44 | 45 | -------------------------------------------------------------------------------- /08 - Quick Form/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Signup Form 6 | 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 |

24 |

25 |

Vue.js Form Processing

26 |

27 | 28 | 29 | 62 | 63 |

64 |

65 |

66 |

67 | 68 | 69 | 121 | 122 | -------------------------------------------------------------------------------- /08 - Quick Form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Signup Form 6 | 7 | 8 | 9 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |

23 |

24 |

25 |

Vue.js Form Processing

26 |

27 | 28 | 29 | 49 | 50 |

51 |

52 |

53 |

54 | 55 | 56 | 71 | 72 | -------------------------------------------------------------------------------- /09 - Lifecycle Events/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | {{ count }} 17 | 18 | 19 | Update 20 | 21 |

22 | 23 | 24 | 49 | 50 | -------------------------------------------------------------------------------- /09 - Lifecycle Events/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 |

18 | 19 | 20 | 25 | 26 | -------------------------------------------------------------------------------- /10 - Getting Real Data (HTTP)/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

19 | 20 |

21 | 22 |

23 | 24 | 25 | 53 | 54 | -------------------------------------------------------------------------------- /10 - Getting Real Data (HTTP)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

19 | 20 | 21 | 36 | 37 | -------------------------------------------------------------------------------- /11 - Gif Overlays/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |

33 | 34 |

35 | 36 |

37 | 38 |

39 | 40 | 41 | 42 | 46 | 47 | {{ gif.user.display_name }} 48 | 49 |

50 | 51 | 52 |

53 | 54 |

55 | 56 |

57 | 58 | 59 | 87 | 88 | -------------------------------------------------------------------------------- /11 - Gif Overlays/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |

17 | 18 |

19 | 20 |

21 | 22 |

23 | 24 | 25 | 53 | 54 | -------------------------------------------------------------------------------- /12 - Gif Search/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 |

44 |

45 |

46 | 47 | 48 | 49 | 53 | 54 | {{ gif.user.display_name }} 55 | 56 |

57 |

58 |

59 | 60 | 61 |

80 | 81 | 82 | 119 | 120 | -------------------------------------------------------------------------------- /12 - Gif Search/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |

33 | 34 |

35 | 36 |

37 | 38 |

39 | 40 | 41 | 42 | 46 | 47 | {{ gif.user.display_name }} 48 | 49 |

50 | 51 | 52 |

53 | 54 |

55 | 56 |

57 | 58 | 59 | 87 | 88 | -------------------------------------------------------------------------------- /13 - Components (Gif Box)/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 |

44 |

45 | 46 | 47 | 48 |

49 |

50 | 51 | 52 |

62 | 63 | 64 | 120 | 121 | -------------------------------------------------------------------------------- /13 - Components (Gif Box)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 |

44 |

45 |

46 | 47 | 48 | 49 | 53 | 54 | {{ gif.user.display_name }} 55 | 56 |

57 |

58 |

59 | 60 | 61 |

80 | 81 | 82 | 119 | 120 | -------------------------------------------------------------------------------- /14 - Components (Gif Grid)/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 | 44 | 45 |

49 | 50 | 51 | 119 | 120 | -------------------------------------------------------------------------------- /14 - Components (Gif Grid)/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 |

44 |

45 | 46 | 47 | 48 |

49 |

50 | 51 | 52 |

62 | 63 | 64 | 120 | 121 | -------------------------------------------------------------------------------- /15 - Component Registration/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 | 44 | 45 |

49 | 50 | 51 | 125 | 126 | -------------------------------------------------------------------------------- /15 - Component Registration/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 | 44 | 45 |

49 | 50 | 51 | 119 | 120 | -------------------------------------------------------------------------------- /16 - Organization/index-FINAL.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 |

39 | 40 | 41 |

Search

42 | 43 | 44 | 45 | 46 | 47 |

51 | 52 | 53 | 93 | 94 | -------------------------------------------------------------------------------- /16 - Organization/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |

37 | 38 | 39 |

Search

40 | 41 | 42 | 43 | 44 | 45 |

16 | ` 17 | }; 18 | -------------------------------------------------------------------------------- /16 - Organization/js/components/gif-grid.js: -------------------------------------------------------------------------------- 1 | const GifGrid = { 2 | props: ['gifs'], 3 | components: { 4 | 'gif-box': GifBox 5 | }, 6 | template: ` 7 |

8 |

9 | 10 | 11 | 12 |

13 |

14 | ` 15 | }; -------------------------------------------------------------------------------- /17-cli-simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Welcome to Vue 5 | 6 | 7 | 8 |

9 |

10 |

11 |

13 | To learn more about Vue, visit 14 | 15 | {{ humanizeURL(docsURL) }} 16 | 17 |
19 | For live help with simple questions, check out 20 | 21 | the Discord chat 22 | 23 |
25 | For more complex questions, post to 26 | 27 | the forum 28 | 29 |

31 |

32 | 33 | 51 | 52 | 53 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | yarn-error.log 6 | 7 | # Editor directories and files 8 | .idea 9 | *.suo 10 | *.ntvs* 11 | *.njsproj 12 | *.sln 13 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/README.md: -------------------------------------------------------------------------------- 1 | # 17-cli-webpack-simple 2 | 3 | > A Vue.js project 4 | 5 | ## Build Setup 6 | 7 | ``` bash 8 | # install dependencies 9 | npm install 10 | 11 | # serve with hot reload at localhost:8080 12 | npm run dev 13 | 14 | # build for production with minification 15 | npm run build 16 | ``` 17 | 18 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader). 19 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 17-cli-webpack-simple 6 | 7 | 8 |

9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "17-cli-webpack-simple", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "Chris Sevilleja ", 6 | "license": "MIT", 7 | "private": true, 8 | "scripts": { 9 | "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 10 | "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 11 | }, 12 | "dependencies": { 13 | "vue": "^2.5.11" 14 | }, 15 | "browserslist": [ 16 | "> 1%", 17 | "last 2 versions", 18 | "not ie <= 8" 19 | ], 20 | "devDependencies": { 21 | "babel-core": "^6.26.0", 22 | "babel-loader": "^7.1.2", 23 | "babel-preset-env": "^1.6.0", 24 | "babel-preset-stage-3": "^6.24.1", 25 | "cross-env": "^5.0.5", 26 | "css-loader": "^0.28.7", 27 | "file-loader": "^1.1.4", 28 | "node-sass": "^4.5.3", 29 | "sass-loader": "^6.0.6", 30 | "vue-loader": "^13.0.5", 31 | "vue-template-compiler": "^2.4.4", 32 | "webpack": "^3.6.0", 33 | "webpack-dev-server": "^2.9.1" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/src/App.vue: -------------------------------------------------------------------------------- 1 | 21 | 22 | 32 | 33 | 61 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/scotch-io/vue-starter-course/e5288056f6ae27ab6f368a07768a9c1e373d5093/17-cli-webpack-simple/src/assets/logo.png -------------------------------------------------------------------------------- /17-cli-webpack-simple/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | 4 | new Vue({ 5 | el: '#app', 6 | render: h => h(App) 7 | }) 8 | -------------------------------------------------------------------------------- /17-cli-webpack-simple/webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | module.exports = { 5 | entry: './src/main.js', 6 | output: { 7 | path: path.resolve(__dirname, './dist'), 8 | publicPath: '/dist/', 9 | filename: 'build.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.css$/, 15 | use: [ 16 | 'vue-style-loader', 17 | 'css-loader' 18 | ], 19 | }, 20 | { 21 | test: /\.scss$/, 22 | use: [ 23 | 'vue-style-loader', 24 | 'css-loader', 25 | 'sass-loader' 26 | ], 27 | }, 28 | { 29 | test: /\.sass$/, 30 | use: [ 31 | 'vue-style-loader', 32 | 'css-loader', 33 | 'sass-loader?indentedSyntax' 34 | ], 35 | }, 36 | { 37 | test: /\.vue$/, 38 | loader: 'vue-loader', 39 | options: { 40 | loaders: { 41 | // Since sass-loader (weirdly) has SCSS as its default parse mode, we map 42 | // the "scss" and "sass" values for the lang attribute to the right configs here. 43 | // other preprocessors should work out of the box, no loader config like this necessary. 44 | 'scss': [ 45 | 'vue-style-loader', 46 | 'css-loader', 47 | 'sass-loader' 48 | ], 49 | 'sass': [ 50 | 'vue-style-loader', 51 | 'css-loader', 52 | 'sass-loader?indentedSyntax' 53 | ] 54 | } 55 | // other vue-loader options go here 56 | } 57 | }, 58 | { 59 | test: /\.js$/, 60 | loader: 'babel-loader', 61 | exclude: /node_modules/ 62 | }, 63 | { 64 | test: /\.(png|jpg|gif|svg)$/, 65 | loader: 'file-loader', 66 | options: { 67 | name: '[name].[ext]?[hash]' 68 | } 69 | } 70 | ] 71 | }, 72 | resolve: { 73 | alias: { 74 | 'vue$': 'vue/dist/vue.esm.js' 75 | }, 76 | extensions: ['*', '.js', '.vue', '.json'] 77 | }, 78 | devServer: { 79 | historyApiFallback: true, 80 | noInfo: true, 81 | overlay: true 82 | }, 83 | performance: { 84 | hints: false 85 | }, 86 | devtool: '#eval-source-map' 87 | } 88 | 89 | if (process.env.NODE_ENV === 'production') { 90 | module.exports.devtool = '#source-map' 91 | // http://vue-loader.vuejs.org/en/workflow/production.html 92 | module.exports.plugins = (module.exports.plugins || []).concat([ 93 | new webpack.DefinePlugin({ 94 | 'process.env': { 95 | NODE_ENV: '"production"' 96 | } 97 | }), 98 | new webpack.optimize.UglifyJsPlugin({ 99 | sourceMap: true, 100 | compress: { 101 | warnings: false 102 | } 103 | }), 104 | new webpack.LoaderOptionsPlugin({ 105 | minimize: true 106 | }) 107 | ]) 108 | } 109 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 scotch 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-starter-course-test 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Learning Vue Like a Boss! 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

16 | 17 |

18 | 19 | 20 | 25 | 26 | --------------------------------------------------------------------------------

26 | Hi my name is {{ name }} and my message is: {{ message }} 27 |

Inline Classes

Object Classes

Array Classes

Inline Styles

Object Styles

Inline Classes

Object Classes

Array Classes

Inline Styles

Object Styles

Counter!

{{ count }}

Vue.js Form Processing

Vue.js Form Processing

Search

Trending

Search

Trending

Search

Trending

Search

Trending

Search

Trending

Search

Trending

Search

Trending

Search

Trending

Search

Trending

{{ greeting }}

{{ msg }}

Essential Links

Ecosystem