Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Vue 2.0 開發環境 - 以 webpack2 建立

Avatar for julian7454 julian7454
February 03, 2017
0
76

Vue 2.0 開發環境 - 以 webpack2 建立

Avatar for julian7454

julian7454

February 03, 2017
Tweet

More Decks by julian7454

See All by julian7454
Vue testing library - avoriaz
Avatar for julian7454 julian7454
0
75
houdini drafts
Avatar for julian7454 julian7454
0
62
PostCSS 與 cssnext
Avatar for julian7454 julian7454
0
98
javascript品質檢測工具 - ESLint
Avatar for julian7454 julian7454
0
170

Featured

See All Featured
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
620
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
20
1.2k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
332
24k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
352
21k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
248
1.3M
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
27
2k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
23
1.5k

Transcript

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

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

    殾ဳ఺物زկ犋胼䟑斉ک <body> or <html> 2 https://vuefe.cn/v2/guide/instance.html

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

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

    -loader 盅翖 • ࣁक़䍅蟴ᗝጱ硬ک rules ex. postcss-loader • ES6 Modules 4 https://webpack.js.org/guides/migrating/

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

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

    webpack.config.js package.json https://github.com/andyyou/vue-dinner-demo/blob/master/build/server.js

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

    npm-script 7

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

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

    v1 v2

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

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

    helper 11

  12. 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. 㷢ᘍ虻碘 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