Vue 2.0 開發環境 - 以 webpack2 建立

Vue2.0 樄咳絑ह 犥 webpack 2 ୌ缏 1 styleMe䨝捍ਰ 2017/2/3 julian

Vue2.0 • 硬አ Virtual-DOM • Server-side Rendering • 硬虋膏ीےӞ犚ኞ޸蝰๗獢ୗ •
殾ဳ఺物زկ犋胼䟑斉ک <body> or <html> 2 https://vuefe.cn/v2/guide/instance.html

ୌ缏䌕礯 • VUE-CLI • 犥 webpack 2.2.0 ᛔᤈୌ缏 3

webpack 2.X • module.loaders is now module.rules • loader 殾ےӤ
-loader 盅翖 • ࣁक़䍅蟴ᗝጱ硬ک rules ex. postcss-loader • ES6 Modules 4 https://webpack.js.org/guides/migrating/

奲կ玕 • ֵአ vue-loader 膏 .vue 䲆 5

Hot Reload • webpack-dev-server • vue-hot-reload-api • ୌ缏Ӟඪ server.js 6
webpack.conﬁg.js package.json https://github.com/andyyou/vue-dinner-demo/blob/master/build/server.js

樄咳瞲犤 • 樄咳 webpack-dev-server • ୌ缏 webpack -p • ے獈
npm-script 7

vue-router • ڡত玕ොୗ硬虋 8 v1 v2 https://cn.vuejs.org/v2/guide/migration-vue-router.html#router-redirect-磦ഘ

vue-router • ीےৼ᪠ኧ • view ጱ v-link 硬౮ router-link 9
v1 v2

ࣁ gulp 䌕礯Ӿ蝝疩獈 • gulp-webpack 10

ஞ஑ • Vue ਻ฃӤಋ牧֕獋㮆粚๜舙䷱矑藉螂 v1 Ӟ樄ত䨝磪讨窾㫂 • Vue migration
helper 11

Vue migration helper • npm install --global git://github.com/vuejs/vue- migration-helper.git •
cd vue-project • Vue-migration-helper 12 http://kuro.tw/posts/2016/09/30/Vue-2-0-%E5%8D%87%E7%B4%9A%E5%B0%8F%E5%B9%AB%E6%89%8B-Vue-migration-helper/

㷢ᘍ虻碘 13 Migrating from v1 to v2 https://webpack.js.org/guides/migrating/ vue +
webpack 蚏ಋୗ https://webpack.js.org/guides/migrating/ webpack ᪡ࣗԏ碟 https://webpack.js.org/guides/migrating/ ՗ Vue Router 0.7.x 鉐ᑏ https://cn.vuejs.org/v2/guide/migration-vue-router.html

Vue 2.0 開發環境 - 以 webpack2 建立

Vue 2.0 開發環境 - 以 webpack2 建立

julian7454

More Decks by julian7454

Featured

Transcript

Vue2.0 樄咳絑ह 犥 webpack 2 ୌ缏 1 styleMe䨝捍ਰ 2017/2/3 julian

Vue2.0 • 硬አ Virtual-DOM • Server-side Rendering • 硬虋膏ीےӞ犚ኞ޸蝰๗獢ୗ •

ୌ缏䌕礯 • VUE-CLI • 犥 webpack 2.2.0 ᛔᤈୌ缏 3

webpack 2.X • module.loaders is now module.rules • loader 殾ےӤ

奲կ玕 • ֵአ vue-loader 膏 .vue 䲆 5

Hot Reload • webpack-dev-server • vue-hot-reload-api • ୌ缏Ӟඪ server.js 6

樄咳瞲犤 • 樄咳 webpack-dev-server • ୌ缏 webpack -p • ے獈

vue-router • ڡত玕ොୗ硬虋 8 v1 v2 https://cn.vuejs.org/v2/guide/migration-vue-router.html#router-redirect-磦ഘ

vue-router • ीےৼ᪠ኧ • view ጱ v-link 硬౮ router-link 9

ࣁ gulp 䌕礯Ӿ蝝疩獈 • gulp-webpack 10

ஞ஑ • Vue ਻ฃӤಋ牧֕獋㮆粚๜舙䷱矑藉螂 v1 Ӟ樄ত䨝磪讨窾㫂 • Vue migration

Vue migration helper • npm install --global git://github.com/vuejs/vue- migration-helper.git •

㷢ᘍ虻碘 13 Migrating from v1 to v2 https://webpack.js.org/guides/migrating/ vue +