├── .gitignore ├── LICENSE ├── README.md ├── cli-demo ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js ├── component └── index.html ├── data-must-function └── index.html ├── form └── index.html ├── instance └── index.html ├── mvvm-pattern └── index.html ├── named-slot └── index.html ├── qna └── index.html ├── render-function ├── 1.1-render-function.html ├── 1.2-render-tags.html ├── package-lock.json ├── package.json └── test │ ├── 1.1.test.js │ ├── 1.2.test.js │ └── util.js ├── router-auth └── index.html ├── router-named-views └── index.html ├── router-nested-routers └── index.html ├── router └── index.html ├── slides ├── day1 │ ├── css-basic.pdf │ ├── html-basic.pdf │ ├── js-basic.pdf │ └── modern-web-dev.pdf ├── vuejs-beginners.pdf └── vuejs-intermediate.pdf ├── slot └── index.html ├── template-compile └── app.vue ├── template └── index.html ├── todo-app-sfc ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ ├── favicon.ico │ │ └── logo.png │ ├── components │ │ ├── TodoFooter.vue │ │ ├── TodoHeader.vue │ │ ├── TodoInput.vue │ │ ├── TodoList.vue │ │ └── common │ │ │ └── Modal.vue │ └── main.js └── webpack.config.js ├── vue-bootstrap ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ └── main.js └── webpack.config.js ├── vue-chart ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── charts │ │ └── BarChart.vue │ ├── main.js │ └── plugins │ │ └── highchart-plugins.js └── webpack.config.js └── x-template-vs-sfc ├── sfc ├── .babelrc ├── .editorconfig ├── .gitignore ├── README.md ├── index.html ├── package-lock.json ├── package.json ├── src │ ├── App.vue │ ├── assets │ │ └── logo.png │ ├── components │ │ ├── FooterComponent.vue │ │ └── HeaderComponent.vue │ └── main.js └── webpack.config.js └── x-template ├── a.html └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Lottery 2 | luckydraw 3 | 4 | # Logs 5 | logs 6 | *.log 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | 11 | # Runtime data 12 | pids 13 | *.pid 14 | *.seed 15 | *.pid.lock 16 | 17 | # Directory for instrumented libs generated by jscoverage/JSCover 18 | lib-cov 19 | 20 | # Coverage directory used by tools like istanbul 21 | coverage 22 | 23 | # nyc test coverage 24 | .nyc_output 25 | 26 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 27 | .grunt 28 | 29 | # Bower dependency directory (https://bower.io/) 30 | bower_components 31 | 32 | # node-waf configuration 33 | .lock-wscript 34 | 35 | # Compiled binary addons (http://nodejs.org/api/addons.html) 36 | build/Release 37 | 38 | # Dependency directories 39 | node_modules/ 40 | jspm_packages/ 41 | 42 | # Typescript v1 declaration files 43 | typings/ 44 | 45 | # Optional npm cache directory 46 | .npm 47 | 48 | # Optional eslint cache 49 | .eslintcache 50 | 51 | # Optional REPL history 52 | .node_repl_history 53 | 54 | # Output of 'npm pack' 55 | *.tgz 56 | 57 | # Yarn Integrity file 58 | .yarn-integrity 59 | 60 | # dotenv environment variables file 61 | .env 62 | 63 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Captain Pangyo 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 | # vuejs-seminar 2 | 3 | All the concepts and samples to understand how Vue.js works and how you can scale up your applications. 4 | 5 | ## Contents for beginners 6 | 7 | - [instance](https://github.com/joshua1988/vuejs-seminar/tree/master/instance/index.html) 8 | - [component](https://github.com/joshua1988/vuejs-seminar/tree/master/component/index.html) 9 | - [router](https://github.com/joshua1988/vuejs-seminar/tree/master/router/index.html) 10 | - [template](https://github.com/joshua1988/vuejs-seminar/blob/master/template/index.html) 11 | - [template-compile](https://github.com/joshua1988/vuejs-seminar/blob/master/template-compile/app.vue) 12 | - [mvvm-pattern](https://github.com/joshua1988/vuejs-seminar/blob/master/mvvm-pattern/index.html) 13 | - [cli-demo](https://github.com/joshua1988/vuejs-seminar/tree/master/cli-demo) 14 | 15 | ## Contents for experienced Vue developers 16 | 17 | - [nested-routers](https://github.com/joshua1988/vuejs-seminar/blob/master/router-nested-routers/index.html) 18 | - [named-views](https://github.com/joshua1988/vuejs-seminar/blob/master/router-named-views/index.html) 19 | - [router-auth](https://github.com/joshua1988/vuejs-seminar/blob/master/router-auth/index.html) : router code sample to use authentication 20 | - [vue-bootstrap](https://github.com/joshua1988/vuejs-seminar/tree/master/vue-bootstrap) : integration with Bootstrap 21 | - [vue-chart](https://github.com/joshua1988/vuejs-seminar/tree/master/vue-chart) : integration with chart libs using Vue plugins 22 | 23 | ## Examples 24 | 25 | - [todo-app(es5)](https://github.com/joshua1988/vuejs-seminar/blob/todo/complete/todo-app(es5)/index.html) : simple todo app using script tag 26 | - [todo-app-sfc](https://github.com/joshua1988/vuejs-seminar/tree/master/todo-app-sfc) : simple todo app using Single File Components 27 | - [render-function](https://github.com/joshua1988/vuejs-seminar/tree/master/render-function) : simple exercise to implement render functions 28 | 29 | ## Slides 30 | 31 | - [vuejs-beginners.pdf](https://github.com/joshua1988/vuejs-seminar/blob/master/slides/vuejs-beginners.pdf) 32 | - [vuejs-intermediate.pdf](https://github.com/joshua1988/vuejs-seminar/blob/master/slides/vuejs-intermediate.pdf) 33 | 34 | ## References 35 | 36 | - [Vue Template Explorer](https://vue-template-explorer.now.sh/#%3Cdiv%20id%3D%22app%22%3E%7B%7B%20msg%20%7D%7D%3C%2Fdiv%3E) 37 | - [Vue Reactivity](https://vuejs.org/v2/guide/reactivity.html) 38 | - [How browser works - HTML5Rocks](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/) 39 | - [브라우저는 어떻게 동작하는가? - 한글](http://d2.naver.com/helloworld/59361) 40 | - [구글 웹 기술 공식 문서](https://developers.google.com/web/fundamentals/) 41 | 42 | -------------------------------------------------------------------------------- /cli-demo/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /cli-demo/.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 | -------------------------------------------------------------------------------- /cli-demo/.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 | -------------------------------------------------------------------------------- /cli-demo/README.md: -------------------------------------------------------------------------------- 1 | # cli-demo 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 | -------------------------------------------------------------------------------- /cli-demo/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | cli-demo 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /cli-demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cli-demo", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "joshua1988 ", 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 | "vue-loader": "^13.0.5", 29 | "vue-template-compiler": "^2.4.4", 30 | "webpack": "^3.6.0", 31 | "webpack-dev-server": "^2.9.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /cli-demo/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /cli-demo/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/cli-demo/src/assets/logo.png -------------------------------------------------------------------------------- /cli-demo/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 | -------------------------------------------------------------------------------- /cli-demo/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 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | } 25 | // other vue-loader options go here 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.(png|jpg|gif|svg)$/, 35 | loader: 'file-loader', 36 | options: { 37 | name: '[name].[ext]?[hash]' 38 | } 39 | } 40 | ] 41 | }, 42 | resolve: { 43 | alias: { 44 | 'vue$': 'vue/dist/vue.esm.js' 45 | }, 46 | extensions: ['*', '.js', '.vue', '.json'] 47 | }, 48 | devServer: { 49 | historyApiFallback: true, 50 | noInfo: true, 51 | overlay: true 52 | }, 53 | performance: { 54 | hints: false 55 | }, 56 | devtool: '#eval-source-map' 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | sourceMap: true, 70 | compress: { 71 | warnings: false 72 | } 73 | }), 74 | new webpack.LoaderOptionsPlugin({ 75 | minimize: true 76 | }) 77 | ]) 78 | } 79 | -------------------------------------------------------------------------------- /component/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js Component 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /data-must-function/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js Instance 7 | 8 | 9 |
10 |
11 |

Not isolated components

12 | 13 | 14 | 15 | 16 |
17 |
18 |

Isolated components

19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 27 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js Instance 7 | 17 | 18 | 19 |
20 |
21 |
22 | 23 | 24 |
25 |
26 | 27 | 28 |
29 | 30 |
31 |

Response from Server

32 | 
{{ response }}
33 |
34 |
35 |
36 | 37 | 38 | 39 | 63 | 64 | -------------------------------------------------------------------------------- /instance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js Instance 7 | 8 | 9 | 10 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /mvvm-pattern/index.html: -------------------------------------------------------------------------------- 1 | 11 | -------------------------------------------------------------------------------- /named-slot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Named Slots 7 | 22 | 23 | 24 |
25 |

Recent posts

26 | 43 |
44 | 45 | 46 | 62 | 63 | 64 | -------------------------------------------------------------------------------- /qna/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js 세미나 사전 질문 7 | 8 | 9 |
10 |

Q1)프런트엔드 개발자로서의 학습 방향? 다가오는 미래를 어떻게 대응하고 있는지?

11 |

1. 프런트엔드 개발의 현황 파악 -> 과거 학습 -> 미래 예측

12 |

2. 사용자 경험과 UI - 예) 내가 계속 쓰고 싶은 서비스 만들기

13 |

3. 새로운 기술들이 나오면 관심을 갖고 사용해보기, 왜 나왔는지? 어떻게 돌아가는지?

14 |
15 |

Q2)좋은 프런트엔드 개발자가 되기 위해서 매일 매일 하는 노력들?

16 |

1. (영어) Medium, MDN 사이트 탐독

17 |

2. (코딩) 만들고 싶은 서비스 & 프로젝트 구현

18 |

3. (정리) 그날 배운 내용 기록: TIL, 블로그

19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /render-function/1.1-render-function.html: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 |
10 |

{{ msg }}

11 | 12 |
13 | 14 | 27 | -------------------------------------------------------------------------------- /render-function/1.2-render-tags.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 | 6 |
7 | 8 | 9 |
10 |

0

11 |

1

12 |

2

13 |
14 | 15 | 23 | 24 | -------------------------------------------------------------------------------- /render-function/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "render-function-examples", 3 | "version": "1.0.0", 4 | "author": "Captain Pangyo", 5 | "scripts": { 6 | "test": "jest --env node" 7 | }, 8 | "dependencies": { 9 | "jest": "^22.4.3", 10 | "jsdom": "^11.9.0", 11 | "vue": "^2.5.16" 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /render-function/test/1.1.test.js: -------------------------------------------------------------------------------- 1 | require('./util').createTestCase(__filename, (window, logs, done) => { 2 | expect(window.document.getElementById('app').innerHTML).toMatch( 3 | `

This should be red

` 4 | ) 5 | expect(window.document.getElementById('app').innerHTML).toMatch( 6 | `` 7 | ) 8 | 9 | window.$click('button') 10 | setTimeout(() => { 11 | expect(window.document.querySelector('h1').classList.contains('red')).toBe(false) 12 | done() 13 | }, 0) 14 | }) 15 | -------------------------------------------------------------------------------- /render-function/test/1.2.test.js: -------------------------------------------------------------------------------- 1 | require('./util').createTestCase(__filename, (window, logs, done) => { 2 | expect(window.document.getElementById('app').innerHTML).toMatch( 3 | `

0

1

2

` 4 | ) 5 | done() 6 | }) 7 | -------------------------------------------------------------------------------- /render-function/test/util.js: -------------------------------------------------------------------------------- 1 | jest.setTimeout(1000) 2 | 3 | const fs = require('fs') 4 | const path = require('path') 5 | const { JSDOM } = require('jsdom') 6 | 7 | function getFilename (file) { 8 | const dir = path.dirname(file) 9 | const base = path.basename(file) 10 | const files = fs.readdirSync(path.resolve(dir, '../')) 11 | const id = base.match(/^\d+\.\d+/)[0] 12 | return files.filter(f => f.startsWith(id) && f.endsWith('.html'))[0] 13 | } 14 | 15 | exports.createTestCase = (file, fn, extra) => { 16 | const fileToTest = getFilename(file) 17 | it(fileToTest.replace(/\.html$/, ''), done => { 18 | JSDOM.fromFile( 19 | path.resolve(file, `../../${fileToTest}`), 20 | { 21 | resources: 'usable', 22 | runScripts: "dangerously" 23 | } 24 | ).then(({ window }) => { 25 | 26 | // test helper 27 | window.$click = function (target) { 28 | var evt = window.document.createEvent('HTMLEvents') 29 | evt.initEvent('click', false, true) 30 | window.document.querySelector(target).dispatchEvent(evt) 31 | } 32 | 33 | if (extra) { 34 | extra(window) 35 | } 36 | 37 | window.addEventListener('load', () => { 38 | const log = window.console.log = jest.fn(() => {}) 39 | if (window.Vue) { 40 | window.Vue.config.productionTip = false 41 | } 42 | fn(window, log.mock.calls, done) 43 | }) 44 | }) 45 | }) 46 | } 47 | -------------------------------------------------------------------------------- /router-auth/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js Router with Auth 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | 15 | 112 | 113 | 114 | -------------------------------------------------------------------------------- /router-named-views/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Named View Sample 7 | 8 | 9 |
10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /router-nested-routers/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue Nested Router 7 | 8 | 9 |
10 | 11 |
12 | 13 | 14 | 15 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /router/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js Router 7 | 8 | 9 |
10 |

뷰 라우터 예제

11 |

12 | Main 컴포넌트로 이동 13 | Login 컴포넌트로 이동 14 |

15 | 16 |
17 | 18 | 19 | 20 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /slides/day1/css-basic.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/slides/day1/css-basic.pdf -------------------------------------------------------------------------------- /slides/day1/html-basic.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/slides/day1/html-basic.pdf -------------------------------------------------------------------------------- /slides/day1/js-basic.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/slides/day1/js-basic.pdf -------------------------------------------------------------------------------- /slides/day1/modern-web-dev.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/slides/day1/modern-web-dev.pdf -------------------------------------------------------------------------------- /slides/vuejs-beginners.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/slides/vuejs-beginners.pdf -------------------------------------------------------------------------------- /slides/vuejs-intermediate.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/slides/vuejs-intermediate.pdf -------------------------------------------------------------------------------- /slot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Slot 7 | 10 | 11 | 12 |
13 |

Anchor tag list

14 | Page 1 15 | Page 2 16 | 17 | Page 3 18 | 19 | 20 | Page 4 21 | 22 |
23 | 24 | 25 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /template-compile/app.vue: -------------------------------------------------------------------------------- 1 | 2 | 12 | 13 | 14 | 26 | -------------------------------------------------------------------------------- /template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Vue.js Template 7 | 8 | 9 |
10 | {{ message }}, 11 | {{ message.split('').reverse().join('') }} 12 |

인스턴스의 값과 연결

13 | seen 값에 따라 표시 여부 결정 14 | 15 | 16 |
17 | 18 | 19 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /todo-app-sfc/README.md: -------------------------------------------------------------------------------- 1 | # vue-todo 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 | -------------------------------------------------------------------------------- /todo-app-sfc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Vue.js Todo 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /todo-app-sfc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-todo", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "joshua1988 ", 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.4.4" 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 | "vue-loader": "^13.0.5", 29 | "vue-template-compiler": "^2.4.4", 30 | "webpack": "^3.6.0", 31 | "webpack-dev-server": "^2.9.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /todo-app-sfc/src/App.vue: -------------------------------------------------------------------------------- 1 | 9 | 10 | 51 | 52 | 68 | -------------------------------------------------------------------------------- /todo-app-sfc/src/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/todo-app-sfc/src/assets/favicon.ico -------------------------------------------------------------------------------- /todo-app-sfc/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/todo-app-sfc/src/assets/logo.png -------------------------------------------------------------------------------- /todo-app-sfc/src/components/TodoFooter.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 16 | 17 | 31 | -------------------------------------------------------------------------------- /todo-app-sfc/src/components/TodoHeader.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 11 | 12 | 19 | -------------------------------------------------------------------------------- /todo-app-sfc/src/components/TodoInput.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 46 | 47 | 73 | -------------------------------------------------------------------------------- /todo-app-sfc/src/components/TodoList.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 25 | 26 | 69 | -------------------------------------------------------------------------------- /todo-app-sfc/src/components/common/Modal.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 91 | -------------------------------------------------------------------------------- /todo-app-sfc/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 | -------------------------------------------------------------------------------- /todo-app-sfc/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 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | } 25 | // other vue-loader options go here 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.(png|jpg|gif|svg)$/, 35 | loader: 'file-loader', 36 | options: { 37 | name: '[name].[ext]?[hash]' 38 | } 39 | } 40 | ] 41 | }, 42 | resolve: { 43 | alias: { 44 | 'vue$': 'vue/dist/vue.esm.js' 45 | }, 46 | extensions: ['*', '.js', '.vue', '.json'] 47 | }, 48 | devServer: { 49 | historyApiFallback: true, 50 | noInfo: true, 51 | overlay: true 52 | }, 53 | performance: { 54 | hints: false 55 | }, 56 | devtool: '#eval-source-map' 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | sourceMap: true, 70 | compress: { 71 | warnings: false 72 | } 73 | }), 74 | new webpack.LoaderOptionsPlugin({ 75 | minimize: true 76 | }) 77 | ]) 78 | } 79 | -------------------------------------------------------------------------------- /vue-bootstrap/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /vue-bootstrap/.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 | -------------------------------------------------------------------------------- /vue-bootstrap/.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 | -------------------------------------------------------------------------------- /vue-bootstrap/README.md: -------------------------------------------------------------------------------- 1 | # vue-bootstrap 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 | -------------------------------------------------------------------------------- /vue-bootstrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-bootstrap 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue-bootstrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-bootstrap", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "joshua1988 ", 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 | "bootstrap": "^4.1.0", 14 | "jquery": "^3.3.1", 15 | "popper.js": "^1.14.3", 16 | "vue": "^2.5.11" 17 | }, 18 | "browserslist": [ 19 | "> 1%", 20 | "last 2 versions", 21 | "not ie <= 8" 22 | ], 23 | "devDependencies": { 24 | "babel-core": "^6.26.0", 25 | "babel-loader": "^7.1.2", 26 | "babel-preset-env": "^1.6.0", 27 | "babel-preset-stage-3": "^6.24.1", 28 | "cross-env": "^5.0.5", 29 | "css-loader": "^0.28.7", 30 | "file-loader": "^1.1.4", 31 | "vue-loader": "^13.0.5", 32 | "vue-template-compiler": "^2.4.4", 33 | "webpack": "^3.6.0", 34 | "webpack-dev-server": "^2.9.1" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /vue-bootstrap/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /vue-bootstrap/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/vue-bootstrap/src/assets/logo.png -------------------------------------------------------------------------------- /vue-bootstrap/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import 'bootstrap' 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import App from './App.vue' 5 | 6 | $(function() { 7 | $('[data-toggle="popover"]').popover(); 8 | }); 9 | 10 | new Vue({ 11 | el: '#app', 12 | render: h => h(App) 13 | }) 14 | -------------------------------------------------------------------------------- /vue-bootstrap/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: ["vue-style-loader", "css-loader"] 16 | }, 17 | { 18 | test: /\.vue$/, 19 | loader: "vue-loader", 20 | options: { 21 | loaders: {} 22 | // other vue-loader options go here 23 | } 24 | }, 25 | { 26 | test: /\.js$/, 27 | loader: "babel-loader", 28 | exclude: /node_modules/ 29 | }, 30 | { 31 | test: /\.(png|jpg|gif|svg)$/, 32 | loader: "file-loader", 33 | options: { 34 | name: "[name].[ext]?[hash]" 35 | } 36 | } 37 | ] 38 | }, 39 | plugins: [ 40 | new webpack.ProvidePlugin({ 41 | $: "jquery" 42 | }) 43 | ], 44 | resolve: { 45 | alias: { 46 | vue$: "vue/dist/vue.esm.js" 47 | }, 48 | extensions: ["*", ".js", ".vue", ".json"] 49 | }, 50 | devServer: { 51 | historyApiFallback: true, 52 | noInfo: true, 53 | overlay: true 54 | }, 55 | performance: { 56 | hints: false 57 | }, 58 | devtool: "#eval-source-map" 59 | }; 60 | 61 | if (process.env.NODE_ENV === 'production') { 62 | module.exports.devtool = '#source-map' 63 | // http://vue-loader.vuejs.org/en/workflow/production.html 64 | module.exports.plugins = (module.exports.plugins || []).concat([ 65 | new webpack.DefinePlugin({ 66 | 'process.env': { 67 | NODE_ENV: '"production"' 68 | } 69 | }), 70 | new webpack.optimize.UglifyJsPlugin({ 71 | sourceMap: true, 72 | compress: { 73 | warnings: false 74 | } 75 | }), 76 | new webpack.LoaderOptionsPlugin({ 77 | minimize: true 78 | }) 79 | ]) 80 | } 81 | -------------------------------------------------------------------------------- /vue-chart/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /vue-chart/.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 | -------------------------------------------------------------------------------- /vue-chart/.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 | -------------------------------------------------------------------------------- /vue-chart/README.md: -------------------------------------------------------------------------------- 1 | # vue-chart 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 | -------------------------------------------------------------------------------- /vue-chart/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-chart 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /vue-chart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-chart", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "joshua1988 ", 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 | "highcharts": "^6.1.0", 14 | "vue": "^2.5.11" 15 | }, 16 | "browserslist": [ 17 | "> 1%", 18 | "last 2 versions", 19 | "not ie <= 8" 20 | ], 21 | "devDependencies": { 22 | "babel-core": "^6.26.0", 23 | "babel-loader": "^7.1.2", 24 | "babel-preset-env": "^1.6.0", 25 | "babel-preset-stage-3": "^6.24.1", 26 | "cross-env": "^5.0.5", 27 | "css-loader": "^0.28.7", 28 | "file-loader": "^1.1.4", 29 | "vue-loader": "^13.0.5", 30 | "vue-template-compiler": "^2.4.4", 31 | "webpack": "^3.6.0", 32 | "webpack-dev-server": "^2.9.1" 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /vue-chart/src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 17 | 18 | 46 | -------------------------------------------------------------------------------- /vue-chart/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/vue-chart/src/assets/logo.png -------------------------------------------------------------------------------- /vue-chart/src/charts/BarChart.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | -------------------------------------------------------------------------------- /vue-chart/src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import HighChartPlugin from "./plugins/highchart-plugins"; 4 | 5 | Vue.use(HighChartPlugin); 6 | 7 | new Vue({ 8 | el: '#app', 9 | render: h => h(App) 10 | }) 11 | -------------------------------------------------------------------------------- /vue-chart/src/plugins/highchart-plugins.js: -------------------------------------------------------------------------------- 1 | import Highcharts from 'highcharts'; 2 | 3 | const HighChartPlugin = { 4 | install(Vue, options) { 5 | Vue.prototype.Highcharts = Highcharts; 6 | } 7 | } 8 | 9 | // Automatic installation if Vue has been added to the global scope. 10 | if (typeof window !== 'undefined' && window.Vue) { 11 | window.Vue.use(MyPlugin) 12 | } 13 | 14 | export default HighChartPlugin; -------------------------------------------------------------------------------- /vue-chart/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 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | } 25 | // other vue-loader options go here 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.(png|jpg|gif|svg)$/, 35 | loader: 'file-loader', 36 | options: { 37 | name: '[name].[ext]?[hash]' 38 | } 39 | } 40 | ] 41 | }, 42 | resolve: { 43 | alias: { 44 | 'vue$': 'vue/dist/vue.esm.js' 45 | }, 46 | extensions: ['*', '.js', '.vue', '.json'] 47 | }, 48 | devServer: { 49 | historyApiFallback: true, 50 | noInfo: true, 51 | overlay: true 52 | }, 53 | performance: { 54 | hints: false 55 | }, 56 | devtool: '#eval-source-map' 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | sourceMap: true, 70 | compress: { 71 | warnings: false 72 | } 73 | }), 74 | new webpack.LoaderOptionsPlugin({ 75 | minimize: true 76 | }) 77 | ]) 78 | } 79 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { "modules": false }], 4 | "stage-3" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/.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 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/.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 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/README.md: -------------------------------------------------------------------------------- 1 | # sfc 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 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | sfc 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sfc", 3 | "description": "A Vue.js project", 4 | "version": "1.0.0", 5 | "author": "joshua1988 ", 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 | "vue-loader": "^13.0.5", 29 | "vue-template-compiler": "^2.4.4", 30 | "webpack": "^3.6.0", 31 | "webpack-dev-server": "^2.9.1" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/x-template-vs-sfc/sfc/src/assets/logo.png -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/src/components/FooterComponent.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/src/components/HeaderComponent.vue: -------------------------------------------------------------------------------- 1 | 6 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/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 | -------------------------------------------------------------------------------- /x-template-vs-sfc/sfc/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 | test: /\.vue$/, 21 | loader: 'vue-loader', 22 | options: { 23 | loaders: { 24 | } 25 | // other vue-loader options go here 26 | } 27 | }, 28 | { 29 | test: /\.js$/, 30 | loader: 'babel-loader', 31 | exclude: /node_modules/ 32 | }, 33 | { 34 | test: /\.(png|jpg|gif|svg)$/, 35 | loader: 'file-loader', 36 | options: { 37 | name: '[name].[ext]?[hash]' 38 | } 39 | } 40 | ] 41 | }, 42 | resolve: { 43 | alias: { 44 | 'vue$': 'vue/dist/vue.esm.js' 45 | }, 46 | extensions: ['*', '.js', '.vue', '.json'] 47 | }, 48 | devServer: { 49 | historyApiFallback: true, 50 | noInfo: true, 51 | overlay: true 52 | }, 53 | performance: { 54 | hints: false 55 | }, 56 | devtool: '#eval-source-map' 57 | } 58 | 59 | if (process.env.NODE_ENV === 'production') { 60 | module.exports.devtool = '#source-map' 61 | // http://vue-loader.vuejs.org/en/workflow/production.html 62 | module.exports.plugins = (module.exports.plugins || []).concat([ 63 | new webpack.DefinePlugin({ 64 | 'process.env': { 65 | NODE_ENV: '"production"' 66 | } 67 | }), 68 | new webpack.optimize.UglifyJsPlugin({ 69 | sourceMap: true, 70 | compress: { 71 | warnings: false 72 | } 73 | }), 74 | new webpack.LoaderOptionsPlugin({ 75 | minimize: true 76 | }) 77 | ]) 78 | } 79 | -------------------------------------------------------------------------------- /x-template-vs-sfc/x-template/a.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joshua1988/vuejs-seminar/f4610ebd220b5c444bac384a312d64de904f494d/x-template-vs-sfc/x-template/a.html -------------------------------------------------------------------------------- /x-template-vs-sfc/x-template/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue.js Component 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 21 | 22 | 27 | 28 | 29 | 46 | 47 | 48 | 49 | --------------------------------------------------------------------------------