Enviar búsqueda
Cargar
Vue 淺談前端建置工具
•
18 recomendaciones
•
2,239 vistas
andyyou
Seguir
vuedinner #3
Leer menos
Leer más
Software
Denunciar
Compartir
Denunciar
Compartir
1 de 77
Descargar ahora
Descargar para leer sin conexión
Recomendados
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Mei-yu Chen
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
Vue business first
Vue business first
Vitalii Ratyshnyi
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
Recomendados
Vue js 大型專案架構
Vue js 大型專案架構
Hina Chen
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
Kuro Hsu
An Introduction to Vuejs
An Introduction to Vuejs
Paddy Lock
以Vue開發電子商務網站 架構與眉角
以Vue開發電子商務網站 架構與眉角
Mei-yu Chen
How to Build SPA with Vue Router 2.0
How to Build SPA with Vue Router 2.0
Takuya Tejima
Vue business first
Vue business first
Vitalii Ratyshnyi
An introduction to Vue.js
An introduction to Vue.js
Javier Lafora Rey
Introduction to VueJS & Vuex
Introduction to VueJS & Vuex
Bernd Alter
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application Framework
Hina Chen
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
Joonas Lehtonen
VueJS Introduction
VueJS Introduction
David Ličen
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016
Caesar Chi
Vue.js
Vue.js
BADR
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
Derek Willian Stavis
Vuex
Vuex
Asaquzzaman Mishu
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue router
Katy Slemon
Vue js for beginner
Vue js for beginner
Chandrasekar G
An Intro into webpack
An Intro into webpack
Squash Apps Pvt Ltd
Vue JS Intro
Vue JS Intro
Muhammad Rizki Rijal
Vuejs for Angular developers
Vuejs for Angular developers
Mikhail Kuznetcov
Using VueJS in front of Drupal 8
Using VueJS in front of Drupal 8
Brian Ward
Why Vue.js?
Why Vue.js?
Jonathan Goode
Vue Introduction
Vue Introduction
Elad Gasner
NodeWay in my project & sails.js
NodeWay in my project & sails.js
Dmytro Ovcharenko
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
Emil Öberg
Enjoy the vue.js
Enjoy the vue.js
TechExeter
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
Vue js and Vue Material
Vue js and Vue Material
Eueung Mulyana
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
Stefan Adolf
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Rhio Kim
Más contenido relacionado
La actualidad más candente
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application Framework
Hina Chen
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
Joonas Lehtonen
VueJS Introduction
VueJS Introduction
David Ličen
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016
Caesar Chi
Vue.js
Vue.js
BADR
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
Derek Willian Stavis
Vuex
Vuex
Asaquzzaman Mishu
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue router
Katy Slemon
Vue js for beginner
Vue js for beginner
Chandrasekar G
An Intro into webpack
An Intro into webpack
Squash Apps Pvt Ltd
Vue JS Intro
Vue JS Intro
Muhammad Rizki Rijal
Vuejs for Angular developers
Vuejs for Angular developers
Mikhail Kuznetcov
Using VueJS in front of Drupal 8
Using VueJS in front of Drupal 8
Brian Ward
Why Vue.js?
Why Vue.js?
Jonathan Goode
Vue Introduction
Vue Introduction
Elad Gasner
NodeWay in my project & sails.js
NodeWay in my project & sails.js
Dmytro Ovcharenko
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
Emil Öberg
Enjoy the vue.js
Enjoy the vue.js
TechExeter
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Takuya Tejima
Vue js and Vue Material
Vue js and Vue Material
Eueung Mulyana
La actualidad más candente
(20)
Famo.us - New generation of HTML5 Web Application Framework
Famo.us - New generation of HTML5 Web Application Framework
Vue.js is boring - and that's a good thing
Vue.js is boring - and that's a good thing
VueJS Introduction
VueJS Introduction
遠端團隊專案建立與管理 remote team management 2016
遠端團隊專案建立與管理 remote team management 2016
Vue.js
Vue.js
Packing it all: JavaScript module bundling from 2000 to now
Packing it all: JavaScript module bundling from 2000 to now
Vuex
Vuex
Vue routing tutorial getting started with vue router
Vue routing tutorial getting started with vue router
Vue js for beginner
Vue js for beginner
An Intro into webpack
An Intro into webpack
Vue JS Intro
Vue JS Intro
Vuejs for Angular developers
Vuejs for Angular developers
Using VueJS in front of Drupal 8
Using VueJS in front of Drupal 8
Why Vue.js?
Why Vue.js?
Vue Introduction
Vue Introduction
NodeWay in my project & sails.js
NodeWay in my project & sails.js
Webpack Tutorial, Uppsala JS
Webpack Tutorial, Uppsala JS
Enjoy the vue.js
Enjoy the vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue 2.0 + Vuex Router & Vuex at Vue.js
Vue js and Vue Material
Vue js and Vue Material
Similar a Vue 淺談前端建置工具
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
Stefan Adolf
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Rhio Kim
Building JavaScript
Building JavaScript
Brady Clifford
Padrino - the Godfather of Sinatra
Padrino - the Godfather of Sinatra
Stoyan Zhekov
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
Stefan Adolf
Webpack and Web Performance Optimization
Webpack and Web Performance Optimization
Chen-Tien Tsai
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?
Alexandr Skachkov
Death of a Themer
Death of a Themer
James Panton
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
Shumpei Shiraishi
HTML 5 - Overview
HTML 5 - Overview
Marcelio Leal
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Lucas Jellema
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fabio Akita
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
treby
Everything-as-code. A polyglot adventure. #DevoxxPL
Everything-as-code. A polyglot adventure. #DevoxxPL
Mario-Leander Reimer
Everything-as-code - A polyglot adventure
Everything-as-code - A polyglot adventure
QAware GmbH
SnapyX
SnapyX
ekino
SnapyX - ParisJS
SnapyX - ParisJS
florianharmel
Improve your web dev workflow in Visual Studio
Improve your web dev workflow in Visual Studio
David Paquette
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
Frank Rousseau
Similar a Vue 淺談前端建置工具
(20)
Webpack Encore - Asset Management for the rest of us
Webpack Encore - Asset Management for the rest of us
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Node.js 기반 정적 페이지 블로그 엔진, 하루프레스
Building JavaScript
Building JavaScript
Padrino - the Godfather of Sinatra
Padrino - the Godfather of Sinatra
(2018) Webpack Encore - Asset Management for the rest of us
(2018) Webpack Encore - Asset Management for the rest of us
Webpack and Web Performance Optimization
Webpack and Web Performance Optimization
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
Consegi 2010 - Dicas de Desenvolvimento Web com Ruby
WebAssembly in Houdini CSS, is it possible?
WebAssembly in Houdini CSS, is it possible?
Death of a Themer
Death of a Themer
WHAT IS HTML5? (at CSS Nite Osaka)
WHAT IS HTML5? (at CSS Nite Osaka)
HTML 5 - Overview
HTML 5 - Overview
Introduction to web application development with Vue (for absolute beginners)...
Introduction to web application development with Vue (for absolute beginners)...
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Fisl 11 - Dicas de Desenvolvimento Web com Ruby
Vue.js + Vuexチーム開発実践の事例
Vue.js + Vuexチーム開発実践の事例
Everything-as-code. A polyglot adventure. #DevoxxPL
Everything-as-code. A polyglot adventure. #DevoxxPL
Everything-as-code - A polyglot adventure
Everything-as-code - A polyglot adventure
SnapyX
SnapyX
SnapyX - ParisJS
SnapyX - ParisJS
Improve your web dev workflow in Visual Studio
Improve your web dev workflow in Visual Studio
20130528 solution linux_frousseau_nopain_webdev
20130528 solution linux_frousseau_nopain_webdev
Último
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
WSO2
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
panagenda
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
Shane Coughlan
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
masabamasaba
The title is not connected to what is inside
The title is not connected to what is inside
shinachiaurasa2
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
masabamasaba
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
9953056974 Low Rate Call Girls In Saket, Delhi NCR
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
VictoriaMetrics
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Medical / Health Care (+971588192166) Mifepristone and Misoprostol tablets 200mg
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
Presentation.STUDIO
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go Platformless
WSO2
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
masabamasaba
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
SelfMade bd
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
VictorSzoltysek
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
masabamasaba
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
kalichargn70th171
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
masabamasaba
Último
(20)
WSO2CON 2024 - Does Open Source Still Matter?
WSO2CON 2024 - Does Open Source Still Matter?
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
W01_panagenda_Navigating-the-Future-with-The-Hitchhikers-Guide-to-Notes-and-D...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
OpenChain - The Ramifications of ISO/IEC 5230 and ISO/IEC 18974 for Legal Pro...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
WSO2Con2024 - From Code To Cloud: Fast Track Your Cloud Native Journey with C...
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
%in kaalfontein+277-882-255-28 abortion pills for sale in kaalfontein
The title is not connected to what is inside
The title is not connected to what is inside
%in Midrand+277-882-255-28 abortion pills for sale in midrand
%in Midrand+277-882-255-28 abortion pills for sale in midrand
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
CHEAP Call Girls in Pushp Vihar (-DELHI )🔝 9953056974🔝(=)/CALL GIRLS SERVICE
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
WSO2Con2024 - WSO2's IAM Vision: Identity-Led Digital Transformation
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Large-scale Logging Made Easy: Meetup at Deutsche Bank 2024
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
Abortion Pill Prices Tembisa [(+27832195400*)] 🏥 Women's Abortion Clinic in T...
AI & Machine Learning Presentation Template
AI & Machine Learning Presentation Template
WSO2CON2024 - It's time to go Platformless
WSO2CON2024 - It's time to go Platformless
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
%in kempton park+277-882-255-28 abortion pills for sale in kempton park
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
WSO2CON 2024 - Cloud Native Middleware: Domain-Driven Design, Cell-Based Arch...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
Crypto Cloud Review - How To Earn Up To $500 Per DAY Of Bitcoin 100% On AutoP...
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
AI Mastery 201: Elevating Your Workflow with Advanced LLM Techniques
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
%in Hazyview+277-882-255-28 abortion pills for sale in Hazyview
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
Payment Gateway Testing Simplified_ A Step-by-Step Guide for Beginners.pdf
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
%+27788225528 love spells in Huntington Beach Psychic Readings, Attraction sp...
Vue 淺談前端建置工具
1.
vuedinner #3 Vue
2.
@wainfo github: andyyou 2
3.
• • • webpack • vue-loader •
vue-cli • vue templates (webpack) •
4.
• HTML • CSS •
Javascript • Assets(Images, Fonts) EB
5.
• HTML -
Templates • CSS - Sass, Less, PostCSS • Javascript - Compile To Javascript • • • • Lint • Debug Tools
6.
7.
• Bower, npm •
Browserify, RequireJS • Grunt • gulp, fly • Brunch • webpack • jspm • rollup
8.
http://j.mp/2bhpkQL
9.
10.
11.
12.
13.
> ls -al
| grep whoami pipe
14.
gulp.src(paths.scripts) .pipe(sourcemaps.init()) .pipe(coffee()) .pipe(uglify()) .pipe(concat('all.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('build/js'));
15.
ES2015 Generator style
16.
Javascript
17.
18.
require('module')
19.
> npm install
-g browserify > browserify [src] -o > [dist]
20.
webpack
21.
• • • ES6
Module Loader Polypill • SystemJS Universal Dynamic Module Loader Any type of module format can be loaded and it will be detected automatically by SystemJS.
22.
jspm?
23.
24.
http://j.mp/2aNmimZ
25.
webpack
26.
• npm + •
grunt, gulp • requires, browserify • webpack + ( ) • jspm + + + ( ) • rollup, fly,
27.
webpack • • / (2014) • • •
HRM • loaders & plugins • Code Splitting (sync, async chunk) • •
28.
webpack • • / • • • HRM •
loaders & plugins • Code Splitting (sync, async chunk) • •
29.
webpack
30.
...
31.
• • • • • • • webpack
32.
1. 1. 2. 2. 3. 4.
33.
vue with webpack http://j.mp/2bzJl36
34.
# npm/nvm > mkdir
vuedinner && cd vuedinner > npm init -y > npm i webpack -D https://github.com/andyyou/vue-dinner-demo
35.
> webpack <entry>
<output> > webpack e1.js e2.js bundle.js > webpack andyyou=./entry.js "[name].js" >> output a andyyou.js file. // webpack.config.js module.exports = { output: { filename: "[name].bundle.js" } }
36.
1. index.html 2. main.js
index.js 3. 4. webpack
37.
loaders Javascript
38.
> npm i
css-loader style-loader file-loader -D !
39.
> webpack main.js
bundle.js —output-public-path=‘/dist/' --module-bind 'css=style!css' --module-bind 'png=file'
40.
41.
webpack-dev-server + plugins
42.
> npm i
webpack-dev-server -D
43.
• dll • css
( ) • , , , • HTML5 Cache mainfest • Offline (ServiceWorker) • HRM • s3 • plugins
44.
ES2015 + Vue
45.
1. 2. webpack.config.js 3. .babelrc 4.
( Vue.js) https://github.com/babel/babel-loader
46.
# webpack: webapck #
webpack-dev-server: # webpack-merge: (webpack.config.js) # css-loader: css # style-loader: css html # file-loader: # url-loader: base64 # babel-core: ES2015 babel # babel-loader: ES2015 # babel-plugin-transform-runtime: polyfilling ( babel-runtime) # babel-preset-es2015: es2015 # babel-preset-stage-0: # babel-runtime: ES2015+ helpers, polyfilling `class MyClass {}` -> `_classCallCheck` AST # vue-loader: vue # vue-html-loader: vue template # vue-style-loader: vue # vue-hot-reload-api: Hot reload API for Vue components
47.
48.
vue-loader vue-loader
49.
50.
• <template> • HTML •
vue <template> • • <script> • javascript ES2015 Babel • vue <script> • JS CommonJS require • import ES2015 • script Vue - Vue.extend() • <style> • css • <style> • `sytle-loader` <head> <style> • webpack css
51.
src CommonJS require •
./ • module/dist/all.css npm <template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
52.
vue-style!css![options]!rewriter(postcss) Source Code • autpprefixer •
scoped • postcss + cssnext
53.
vue-hot-reload-api 2.0.6 Hot Reload
54.
55.
vue-loader loader webpack loader
jade-loader function HTML String jade jade-loader
56.
• file-loader • url-loader
base64 HTTP request url(image.png) > require(‘file!./image.png')
57.
58.
> npm i
vue-loader vue-html-loader vue-style-loader vue-hot-reload- api@1 -D # 1. webpack.config.js # 2. main.js app.vue
59.
> webpack-dev-server --inline
--hot Hot Module Replacement / Hot Reload
60.
webpack-dev-server • Iframe mode http://localhost:8080/webpack-dev-server/index.html •
Inline mode webpack-dev-server client entry bundle
61.
--hot —hot = HotModuleReplacementPlugin
62.
63.
64.
https://github.com/webpack/webpack-dev-server/blob/ 2eef9e64e4528dfda756d61c627d4b5a49bbae8e/bin/ webpack-dev-server.js#L240-L257
65.
66.
https://medium.com/@rajaraodv/webpack- the-confusing-parts-58712f8fcad9#. 6z7z6wx8q
67.
JS
68.
+
69.
70.
vue-loader vue-cli > npm install
-g vue-cli > vue init <template-name> <project-name> > vue init webpack v-project
71.
webpack
72.
webpack dev middleware
plugins • webpack dev middleware • webpack hot middleware • html-webpack-plugin • html-webpack-template • extract-text-webpack-plugin
73.
Vue - PASSER
Descargar ahora