├── .babelrc ├── .gitignore ├── README.md ├── build └── server.js ├── index.html ├── package.json ├── src ├── components │ ├── .gitkeep │ └── app.vue ├── images │ ├── .gitkeep │ ├── bg.png │ └── logo.png ├── main.js └── styles │ ├── .gitkeep │ └── base.css └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015"], 3 | "plugins": ["transform-runtime"] 4 | } 5 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dist 3 | *.bundle.js 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Vue.js Dinner #3 範例 2 | --- 3 | 4 | # 使用 5 | 6 | ``` 7 | $ npm run dev 8 | $ npm run build 9 | $ npm run dashboard 10 | ``` 11 | 12 | --- 13 | 14 | # Commit #1 15 | 16 | 事前準備： 17 | 18 | * 安裝 Nodejs 環境(npm/nvm) 19 | 20 | ``` 21 | $ mkdir vuedinner && cd vuedinner 22 | $ npm init -y 23 | $ npm i webpack -D 24 | $ webpack sandbox.js bundle.js 25 | $ webpack e1.js e2.js bundle.js 26 | $ webpack andy=./e1.js you=./e2.js "[name].bundle.js" 27 | $ ls -al |grep bundle 28 | 29 | # 移除產生的檔案 30 | $ find . -type 'f' | grep bundle | xargs rm 31 | ``` 32 | 33 | # Commit #2 起手式 34 | 35 | 1. 加入 `index.html` 36 | 2. 組織目錄架構 37 | 3. 加入 `main.js` 與使用模組化概念(`components/app.js`) 38 | 4. 使用 webpack 指令 39 | 40 | ``` 41 | $ webpack ./src/main.js bundle.js 42 | $ python -m SimpleHTTPServer 43 | # 瀏覽器開啟 http://localhost:8000/ 44 | ``` 45 | 46 | # Commit #3 Loaders 47 | 48 | 重點在於 `loaders` 使用 `!` 49 | 50 | ``` 51 | $ npm i css-loader style-loader file-loader -D 52 | # 1. 準備幾張圖片置放於 images 目錄 53 | # 2. 撰寫簡單的測試 css (styles/base.css) 54 | # 3. 撰寫元件 (components/app.js) 55 | # 4. 更新 main.js 56 | $ webpack src/main.js bundle.js 57 | $ python -m SimpleHTTPServer 58 | 59 | # CTRL + D 停止 Server 60 | ``` 61 | 62 | # Commit #4 63 | 64 | * 修改 `!` 語法，使用指令搭配參數 65 | * 將輸出整理到 `dist/` 66 | 67 | ``` 68 | $ webpack src/main.js dist/bundle.js --module-bind 'css=style!css' --module-bind 'png=file' --output-public-path='/dist/' 69 | ``` 70 | 71 | # Commit #5 72 | 73 | 1.加入 `webpack.config.js` 設定檔 74 | 75 | ``` 76 | $ rm -rf dist 77 | $ webpack 78 | $ python -m SimpleHTTPServer 79 | ``` 80 | 81 | # Commit #6 82 | 83 | * 使用 `webpack-dev-server` 協助開發 84 | * 加入 `npm scripts` 85 | 86 | ``` 87 | $ npm i webpack-dev-server -D 88 | $ webpack-dev-server 89 | 90 | $ npm run build 91 | $ npm run dev 92 | ``` 93 | 94 | # Commit #7 95 | 96 | 導入 `babel` 97 | 98 | 1. 安裝 babel 所需的套件 99 | 2. 更新 `webapck.config.js` 100 | 3. 加入 `.babelrc` 101 | 102 | ``` 103 | $ npm i babel-core babel-loader babel-plugin-transform-runtime babel-preset-es2015 babel-runtime -D 104 | # 更新 config 與使用 ES2015 語法 105 | $ npm run dev 106 | ``` 107 | 108 | # Commit #8 109 | 110 | 安裝與使用 `vue.js` 111 | 112 | ``` 113 | $ npm i vue -S 114 | # 更新 main.js 與 app.js 115 | $ npm run dev 116 | ``` 117 | 118 | # Commit #9 119 | 120 | 使用 `vue-loader` 121 | 122 | 1. 補上 `webpack.config.js` 123 | 2. 更新 `main.js` 與 `app.vue` 124 | 125 | ``` 126 | $ npm i vue-loader vue-html-loader vue-style-loader vue-hot-reload-api@1 -D 127 | # 記得 app.js -> app.vue 和 main.js 載入路徑 128 | 129 | $ webpack-dev-server 130 | $ webpack-dev-server --inline --hot 131 | ``` 132 | 133 | # Commit #10 134 | 135 | 於 `webpack.config.js` 加上 `devServer` 設定 136 | 137 | ``` 138 | $ webpack-dev-server 139 | ``` 140 | 141 | 旨於說明我們可以使用 142 | 143 | ``` 144 | devServer: { 145 | historyApiFallback: true, 146 | hot: true, 147 | inline: true, 148 | progress: true, 149 | stats: 'errors-only' 150 | }, 151 | plugins: [ 152 | new webpack.HotModuleReplacementPlugin() 153 | ] 154 | ``` 155 | 156 | 或者 157 | 158 | ``` 159 | $ webpack-dev-server --inline --hot 160 | ``` 161 | 162 | # Commit #11 客製化開發伺服器 163 | 164 | 使用 `express` 搭配 `webpack-dev-middleware` 與 `webpack-hot-middleware` 建置開發伺服器 165 | 166 | ``` 167 | $ npm i express webpack-dev-middleware webpack-hot-middleware -D 168 | # 新增 build/server.js 169 | $ node build/server.js 170 | ``` 171 | 172 | 記得在 `entry` 加上兩隻 scripts 173 | 174 | ``` 175 | entry: [ 176 | 'webpack/hot/dev-server', 177 | 'webpack-hot-middleware/client', 178 | './src/main.js' 179 | ] 180 | ``` 181 | 182 | > [教學 express + webpack-dev-middleware](http://madole.github.io/blog/2015/08/26/setting-up-webpack-dev-middleware-in-your-express-application/) 183 | 184 | # Commit #12 webpack-dashboard 185 | 186 | ``` 187 | $ npm i webpack-dashboard -D 188 | # 更新 build/server.js 189 | ``` 190 | 191 | ``` 192 | var path = require('path') 193 | var express = require('express') 194 | var webpack = require('webpack') 195 | var config = require('../webpack.config') 196 | var Dashboard = require('webpack-dashboard') 197 | var DashboardPlugin = require('webpack-dashboard/plugin') 198 | 199 | var app = express() 200 | var compiler = webpack(config) 201 | var dashboard = new Dashboard() 202 | compiler.apply(new DashboardPlugin(dashboard.setData)) 203 | 204 | app.use(express.static('public')) 205 | app.use(require('webpack-dev-middleware')(compiler, { 206 | publicPath: config.output.publicPath, 207 | stats: { colors: true }, 208 | quiet: true 209 | })) 210 | app.use(require("webpack-hot-middleware")(compiler)) 211 | 212 | app.get('/', function(req, res) { 213 | res.sendFile(path.join(__dirname, '..', '/index.html')) 214 | }) 215 | 216 | app.listen(8080, "0.0.0.0", function (err) { 217 | if (err) { 218 | console.log(err) 219 | return 220 | } 221 | 222 | console.log('Running server at http://0.0.0.0:8080') 223 | }) 224 | ``` 225 | -------------------------------------------------------------------------------- /build/server.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var express = require('express') 3 | var webpack = require('webpack') 4 | var config = require('../webpack.config') 5 | var Dashboard = require('webpack-dashboard') 6 | var DashboardPlugin = require('webpack-dashboard/plugin') 7 | 8 | var app = express() 9 | var compiler = webpack(config) 10 | var dashboard = new Dashboard() 11 | compiler.apply(new DashboardPlugin(dashboard.setData)) 12 | 13 | app.use(express.static('public')) 14 | app.use(require('webpack-dev-middleware')(compiler, { 15 | publicPath: config.output.publicPath, 16 | stats: { colors: true }, 17 | quiet: true 18 | })) 19 | app.use(require("webpack-hot-middleware")(compiler)) 20 | 21 | app.get('/', function(req, res) { 22 | res.sendFile(path.join(__dirname, '..', '/index.html')) 23 | }) 24 | 25 | app.listen(8080, "0.0.0.0", function (err) { 26 | if (err) { 27 | console.log(err) 28 | return 29 | } 30 | 31 | console.log('Running server at http://0.0.0.0:8080') 32 | }) 33 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue Dinner #3 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuedinner3", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "webpack-dev-server --colors --progress", 9 | "build": "webpack -p", 10 | "dashboard": "node build/server.js" 11 | }, 12 | "keywords": [], 13 | "author": "andyyou (http://andyyou.github.io)", 14 | "license": "MIT", 15 | "devDependencies": { 16 | "babel-core": "^6.13.2", 17 | "babel-loader": "^6.2.5", 18 | "babel-plugin-transform-runtime": "^6.12.0", 19 | "babel-preset-es2015": "^6.13.2", 20 | "babel-runtime": "^6.11.6", 21 | "css-loader": "^0.23.1", 22 | "express": "^4.14.0", 23 | "file-loader": "^0.9.0", 24 | "style-loader": "^0.13.1", 25 | "vue-hot-reload-api": "^1.3.3", 26 | "vue-html-loader": "^1.2.3", 27 | "vue-loader": "^8.5.2", 28 | "vue-style-loader": "^1.0.0", 29 | "webpack": "^1.13.2", 30 | "webpack-dashboard": "^0.1.7", 31 | "webpack-dev-middleware": "^1.6.1", 32 | "webpack-dev-server": "^1.15.0", 33 | "webpack-hot-middleware": "^2.12.2" 34 | }, 35 | "dependencies": { 36 | "vue": "^1.0.26" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/components/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andyyou/vue-dinner-demo/69d9241857368fdc7967397f0c1e51f43ee466ac/src/components/.gitkeep -------------------------------------------------------------------------------- /src/components/app.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 25 | 26 | 31 | -------------------------------------------------------------------------------- /src/images/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andyyou/vue-dinner-demo/69d9241857368fdc7967397f0c1e51f43ee466ac/src/images/.gitkeep -------------------------------------------------------------------------------- /src/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andyyou/vue-dinner-demo/69d9241857368fdc7967397f0c1e51f43ee466ac/src/images/bg.png -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andyyou/vue-dinner-demo/69d9241857368fdc7967397f0c1e51f43ee466ac/src/images/logo.png -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import styles from './styles/base.css' 3 | import App from './components/app.vue' 4 | 5 | new Vue({ 6 | el: 'body', 7 | components: { 8 | App 9 | } 10 | }) 11 | -------------------------------------------------------------------------------- /src/styles/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/andyyou/vue-dinner-demo/69d9241857368fdc7967397f0c1e51f43ee466ac/src/styles/.gitkeep -------------------------------------------------------------------------------- /src/styles/base.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: pink; 3 | background-repeat: no-repeat; 4 | background-size: 100%; 5 | } 6 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var webpack = require('webpack') 3 | 4 | var config = { 5 | entry: [ 6 | 'webpack/hot/dev-server', 7 | 'webpack-hot-middleware/client', 8 | './src/main.js' 9 | ], 10 | output: { 11 | path: path.join(__dirname, 'dist'), 12 | filename: 'bundle.js', 13 | publicPath: '/dist/' 14 | }, 15 | module: { 16 | loaders: [ 17 | { 18 | test: /\.css$/, 19 | loaders: ['style', 'css'] 20 | }, 21 | { 22 | test: /\.(png|jpg|svg)$/, 23 | loader: 'file' 24 | }, 25 | { 26 | test: /\.js$/, 27 | loader: 'babel', 28 | exclude: /node_modules/ 29 | }, 30 | { 31 | test: /\.vue$/, 32 | loader: 'vue' 33 | } 34 | ] 35 | }, 36 | devServer: { 37 | historyApiFallback: true, 38 | hot: true, 39 | inline: true, 40 | progress: true, 41 | stats: 'errors-only' 42 | }, 43 | plugins: [ 44 | new webpack.HotModuleReplacementPlugin() 45 | ] 46 | } 47 | 48 | module.exports = config 49 | --------------------------------------------------------------------------------