×î½üÔÚÄÚ²¿ÏîÄ¿ÖÐ×öÁËһЩ»ùÓÚ vue + webpack µÄ³¢ÊÔ£¬ÔÚС·¶Î§ºÍͬÊÂÃÇ̽ÌÖÖ®ºó£¬»¹ÊÇÂù¶àͬѧÈϿɺÍϲ»¶µÄ£¬ËùÒÔͨ¹ý
blog ·ÖÏí¸ø¸ü¶àÈË¡£
Ê×ÏÈ£¬ÎÒ»áÏȼòµ¥½éÉÜһϠvue ºÍ webpack£º
(µ±È»Èç¹ûÄãÒѾ±È½ÏÊìϤËüÃǵĻ°Ç°Á½¸ö²¿·Ö¿ÉÒÔÖ±½ÓÌø¹ý)
½éÉÜ vue

Vue.js ÊÇÒ»¿î¼«¼òµÄ mvvm ¿ò¼Ü£¬Èç¹ûÈÃÎÒÓÃÒ»¸ö´ÊÀ´ÐÎÈÝËü£¬¾ÍÊÇ
¡°ÇᡤÇÉ¡± ¡£Èç¹ûÓÃÒ»¾ä»°À´ÃèÊöËü£¬ËüÄܹ»¼¯ÖÚ¶àÓÅÐãÖðÁ÷µÄǰ¶Ë¿ò¼ÜÖ®´ó³É£¬µ«Í¬Ê±±£³Ö¼òµ¥Ò×Ó᣷ϻ°²»¶à˵£¬À´¿´¼¸¸öÀý×Ó£º
<script src="vue.js"></script>
<div id="demo">
{{message}}
<input v-model="message">
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js!'
}
})
</script> |
Ê×ÏÈ£¬´úÂë·ÖÁ½²¿·Ö£¬Ò»²¿·ÖÊÇ html£¬Í¬Ê±Ò²ÊÇÊÓͼģ°å£¬ÀïÃæ°üº¬Ò»¸öֵΪ
message µÄÎı¾ºÎÒ»¸öÏàֵͬµÄÊäÈë¿ò£»ÁíÒ»²¿·ÖÊÇ script£¬Ëü´´½¨ÁËÒ»¸ö vm ¶ÔÏ󣬯äÖа󶨵Ä
dom ½áµãÊÇ #demo £¬°ó¶¨µÄÊý¾ÝÊÇ {message: 'Hello Vue.js'} £¬×îÖÕÒ³ÃæµÄÏÔʾЧ¹û¾ÍÊÇÒ»¶Î
Hello Vue.js Îı¾¼ÓÒ»¸öº¬ÏàͬÎÄ×ÖµÄÊäÈë¿ò£¬¸ü¹Ø¼üµÄÊÇ£¬ÓÉÓÚÊý¾ÝÊÇË«Ïò°ó¶¨µÄ£¬ËùÒÔÎÒÃÇÐÞ¸ÄÎı¾¿òÄÚÎı¾µÄͬʱ£¬µÚÒ»¶ÎÎı¾ºÍ±»°ó¶¨µÄÊý¾ÝµÄ
message ×ֶεÄÖµ¶¼»áͬ²½¸üСª¡ª¶øÕâµ×²ãµÄ¸´ÔÓÂß¼£¬Vue.js ÒѾȫ²¿°ïÄã×öºÃÁË¡£

ÔÙ¶à½éÉÜÒ»µã
ÎÒÃÇ»¹¿ÉÒÔ¼ÓÈë¸ü¶àµÄ directive£¬±ÈÈ磺
<script src="vue.js"></script>
<div id="demo2">
<img title="{{name}}" alt="{{name}}"
v-attr="src: url">
<input v-model="name">
<input v-model="url">
</div>
<script>
var vm = new Vue({
el: '#demo',
data: {
name: 'taobao',
url: 'https://www.taobao.com/favicon.ico'
}
})
</script> |
ÕâÀïµÄÊÓͼģ°å¼ÓÈëÁËÒ»¸ö <img> ±êÇ©£¬Í¬Ê±ÎÒÃÇ¿´µ½ÁË
2 ¸öÌØÐÔµÄÖµ¶¼Ð´×÷ÁË {{name}} ¡£ÕâÑùµÄ»°£¬Í¼Æ¬µÄ title ºÍ alt ÌØÐÔÖµ¾Í¶¼»á±»°ó¶¨Îª×Ö·û´®
'taobao' ¡£
Èç¹ûÏë°ó¶¨µÄÌØÐÔÊÇÏñ img[src] ÕâÑùµÄ²»ÄÜÔÚ html ÖÐËæÒâ³õʼ»¯µÄ
(¿ÉÄÜĬÈÏ»á²úÉúÔ¤ÆÚÍâµÄÍøÂçÇëÇó)£¬Ã»¹ØÏµ£¬ÓÐ v-attr="src: url"
ÕâÑùµÄд·¨£¬°Ñ±»°ó¶¨µÄÊý¾ÝÀïµÄ url ͬ²½¹ýÀ´¡£
ûÓнéÉܵ½µÄ¹¦ÄÜ»¹ÓÐºÜ¶à£¬ÍÆ¼ö´ó¼ÒÀ´ÎÒ(·¢Æð²¢)·ÒëµÄ Vue.js ÖÐÎÄÎĵµ
web ×é¼þ»¯
×îºóÒª½éÉÜ Vue.js ¶ÔÓÚ web ×é¼þ»¯¿ª·¢µÄ˼¿¼ºÍÉè¼Æ
Èç¹ûÎÒÃÇÒª¿ª·¢¸ü´óÐ͵ÄÍøÒ³»ò web Ó¦Óã¬web ×é¼þ»¯µÄ˼άÊǷdz£ÖØÒªµÄ£¬ÕâÒ²ÊǽñÌìÕû¸öǰ¶ËÉçÇø³¤¾Ã²»Ë¥µÄ»°Ìâ¡£
Vue.js Éè¼ÆÁËÒ»¸ö *.vue ¸ñʽµÄÎļþ£¬Áîÿһ¸ö×é¼þµÄÑùʽ¡¢Ä£°åºÍ½Å±¾¼¯ºÏ³ÉÁËÒ»Õû¸öÎļþ£¬
ÿ¸öÎļþ¾ÍÊÇÒ»¸ö×é¼þ£¬Í¬Ê±»¹°üº¬ÁË×é¼þÖ®¼äµÄÒÀÀµ¹ØÏµ£¬ÂéȸËäСÎåÔà¾ãÈ«£¬Õû¸ö×é¼þ´ÓÍâ¹Ûµ½½á¹¹µ½ÌØÐÔÔÙµ½ÒÀÀµ¹ØÏµ¶¼Ò»ÀÀÎÞÓà
£º

²¢ÇÒÖ§³ÖÔ¤±àÒë¸÷ÖÖ·½ÑÔ£º

ÕâÑùÔÙ´óµÄϵͳ¡¢ÔÚ¸´ÔӵĽçÃæ£¬Ò²¿ÉÒÔÓÃÕâÑùµÄ·½Ê½âÒ¶¡½âÅ£¡£µ±È»ÕâÖÖ×é¼þµÄд·¨ÊÇÐèÒª±àÒ빤¾ß²ÅÄÜ×îÖÕÔÚä¯ÀÀÆ÷¶Ë¹¤×÷µÄ£¬ÏÂÃæ»áÌáµ½Ò»¸ö»ùÓÚ
webpack µÄ¾ßÌå·½°¸¡£
С½á
´Ó¹¦ÄܽǶȣ¬template, directive, data-binding,
components ¸÷ÖÖʵÓù¦Äܶ¼ÆëÈ«£¬¶ø filter, computed var, var watcher,
custom event ÕâÑùµÄ¸ß¼¶¹¦ÄÜÒ²¶¼ÑóÒç×Å×÷ÕßµÄÇÉ˼£»´Ó¿ª·¢ÌåÑé½Ç¶È£¬ÕâЩÉè¼Æ¼¸ºõÊÇÍêÈ«×ÔÈ»µÄ£¬Ã»ÓпÌÒâÉè¼Æ¹ý»òÇ·¿¼Âǵĸоõ£¬Ö»Óиö±ð²»µÃÒѵĵط½´øÁË×Ô¼º¿ò¼ÜרÊôµÄ
v- ǰ׺¡£´ÓÐÔÄÜ¡¢Ìå»ý½Ç¶ÈÆÀ¹À£¬Vue.js Ò²·Ç³£ÓоºÕùÁ¦£¡
½éÉÜ webpack

webpack ÊÇÁíÒ»¸ö½üÆÚ·¢Ïֵĺö«Î÷¡£ËüÖ÷ÒªµÄÓÃ;ÊÇͨ¹ý CommonJS
µÄÓï·¨°ÑËùÓÐä¯ÀÀÆ÷¶ËÐèÒª·¢²¼µÄ¾²Ì¬×ÊÔ´×öÏàÓ¦µÄ×¼±¸£¬±ÈÈç×ÊÔ´µÄºÏ²¢ºÍ´ò°ü¡£
¾Ù¸öÀý×Ó£¬ÏÖÔÚÓиö½Å±¾Ö÷Îļþ app.js ÒÀÀµÁËÁíÒ»¸ö½Å±¾ module.js
// app.js var module = require('./module.js') ... module.x ...
// module.js
exports.x = ... |
Ôòͨ¹ý webpack app.js bundle.js ÃüÁ¿ÉÒÔ°Ñ
app.js ºÍ module.js ´ò°üÔÚÒ»Æð²¢±£´æµ½ bundle.js
ͬʱ webpack ÌṩÁËÇ¿´óµÄ loader »úÖÆºÍ plugin
»úÖÆ£¬loader »úÖÆÖ§³ÖÔØÈë¸÷ÖÖ¸÷ÑùµÄ¾²Ì¬×ÊÔ´£¬²»Ö»ÊÇ js ½Å±¾¡¢Á¬ html, css, images
µÈ¸÷ÖÖ×ÊÔ´¶¼ÓÐÏàÓ¦µÄ loader À´×öÒÀÀµ¹ÜÀíºÍ´ò°ü£»¶ø plugin Ôò¿ÉÒÔ¶ÔÕû¸ö webpack
µÄÁ÷³Ì½øÐÐÒ»¶¨µÄ¿ØÖÆ¡£
±ÈÈçÔÚ°²×°²¢ÅäÖÃÁË css-loader ºÍ style-loader
Ö®ºó£¬¾Í¿ÉÒÔͨ¹ý require('./bootstrap.css') ÕâÑùµÄ·½Ê½¸øÍøÒ³ÔØÈëÒ»·ÝÑùʽ±í¡£·Ç³£·½±ã¡£
webpack ±³ºóµÄÔÀíÆäʵ¾ÍÊǰÑËùÓÐµÄ·Ç js ×ÊÔ´¶¼×ª»»³É js
(Èç°ÑÒ»¸ö css Îļþת»»³É¡°´´½¨Ò»¸ö style ±êÇ©²¢°ÑËü²åÈë document ¡±µÄ½Å±¾¡¢°ÑͼƬת»»³ÉÒ»¸öͼƬµØÖ·µÄ
js ±äÁ¿»ò base64 ±àÂëµÈ)£¬È»ºóÓà CommonJS µÄ»úÖÆ¹ÜÀíÆðÀ´¡£Ò»¿ªÊ¼¶ÔÓÚÕâÖÖ¼¼ÊõÐÎ̬ÎÒ¸öÈË»¹ÊDz»Ì«Ï²»¶µÄ£¬²»¹ýËæ×Ų»¶ÏµÄʵ¼ùºÍÌåÑ飬ҲÖð½¥Ï°¹ß²¢ÈÏͬÁË¡£
×îºó£¬¶ÔÓÚ֮ǰÌáµ½µÄ Vue.js£¬×÷ÕßÒ²ÌṩÁËÒ»¸ö½Ð×ö vue-loader
µÄ npm °ü £¬¿ÉÒÔ°Ñ *.vue Îļþת»»³É webpack °ü£¬ºÍÕû¸ö´ò°ü¹ý³ÌÈÚºÏÆðÀ´¡£ËùÒÔÓÐÁË
Vue.js¡¢webpack ºÍ vue-loader£¬ÎÒÃÇ×ÔÈ»¾Í¿ÉÒÔ°ÑËüÃÇ×éºÏÔÚÒ»ÆðÊÔÊÔ¿´£¡
ÏîĿʵ¼ùÁ÷³Ì
»Øµ½ÕýÌâ¡£½ñÌìÒª·ÖÏíµÄÊÇ£¬ÊÇ»ùÓÚÉÏÃæÁ½¸ö¶«Î÷£ºVue.js ºÍ webpack£¬ÒÔ¼°°ÑËüÃÇ´®ÁªÆðÀ´µÄ
vue-loader
Vue.js µÄ×÷ÕßÒÔ¼°ÌṩÁËÒ»¸ö»ùÓÚËüÃÇÈýÕßµÄ ÏîĿʾÀý ¡£¶øÎÒÃǵÄÀý×Ó»á¸üÌù½üʵ¼Ê¹¤×÷µÄ³¡¾°£¬Í¬Ê±ºÍÍŶÓ֮ǰ×ܽá³öÀ´µÄÏîÄ¿ÌØµãºÍÏîÄ¿Á÷³ÌÏàÎǺϡ£
Ŀ¼½á¹¹Éè¼Æ

´ò°ü
ͨ¹ý gulpfile.js ÎÒÃÇ¿ÉÒÔÉè¼ÆÕûÌ×»ùÓÚ webpack µÄ´ò°ü/¼àÌý/µ÷ÊÔµÄÈÎÎñ
ÔÚ gulp-webpack °üµÄ¹Ù·½ÎĵµÀïÍÆ¼öµÄд·¨ÊÇÕâÑùµÄ£º
var gulp = require('gulp'); var webpack = require('gulp-webpack'); var named = require('vinyl-named'); gulp.task('default', function() { return gulp.src(['src/app.js', 'test/test.js']) .pipe(named()) .pipe(webpack()) .pipe(gulp.dest('dist/')); }); |
ÎÒÃǶÔÕâ¸öÎļþÉÔ¼ÓÐ޸ģ¬Ê×ÏȼÓÈë vue-loader
tnpm install vue-loader --save
.pipe(webpack({
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue'}
]
}
})) |
Æä´Î£¬°ÑÒª´ò°üµÄÎļþÁбí´Ó gulp.src(...) Öгé³öÀ´£¬·½±ã½«À´Î¬»¤£¬Ò²Óлú»á°ÑÕâ¸öÐÅÏ¢¹²Ïíµ½±ðµÄÈÎÎñ
var appList = ['main', 'sub1', 'sub2']
gulp.task('default', function() {
return gulp.src(mapFiles(appList, 'js'))
...
})
/**
* @private
*/
function mapFiles(list, extname) {
return list.map(function (app) {return 'src/'
+ app + '.' + extname})
} |
ÏÖÔÚÔËÐÐ gulp ÃüÁÏàÓ¦µÄÎļþÓ¦¸Ã¾Í´ò°üºÃ²¢Éú³ÉÔÚÁË dist Ŀ¼Ï¡£È»ºóÎÒÃÇÔÚ
src/*.html ÖмÓÈë¶ÔÕâЩÉú³ÉºÃµÄ js ÎļþµÄÒýÈ룺
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Main</title> </head> <body> <div id="app"></div> <script src="../dist/main.js"></script> </body> </html> |
ÓÃä¯ÀÀÆ÷´ò¿ª src/main.html ÕâÊ±Ò³ÃæÒѾ¿ÉÒÔÕý³£¹¤×÷ÁË
¼ÓÈë¼àÌý
¼àÌý¸ü¼Ó¼òµ¥£¬Ö»ÒªÔڸղŠwebpack(opt) µÄ²ÎÊýÖмÓÈë watch:
true ¾Í¿ÉÒÔÁË¡£
.pipe(webpack({ module: { loaders: [ { test: /\.vue$/, loader: 'vue'} ] }, watch: true })) |
µ±È»×îºÃ°Ñ´ò°üºÍ¼àÌýÉè¼Æ³ÉÁ½¸öÈÎÎñ£¬·Ö±ðÆðÃûΪ bundle ºÍ watch
£º
gulp.task('bundle', function() { return gulp.src(mapFiles(appList, 'js')) .pipe(named()) .pipe(webpack(getConfig())) .pipe(gulp.dest('dist/')) })
gulp.task('watch', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig({watch: true})))
.pipe(gulp.dest('dist/'))
})
/**
* @private
*/
function getConfig(opt) {
var config = {
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue'}
]
}
}
if (!opt) {
return config
}
for (var i in opt) {
config[i] = opt
}
return config
} |
ÏÖÔÚÄã¿ÉÒÔ²»±ØÃ¿´ÎÐÞ¸ÄÎļþÖ®ºó¶¼ÔËÐÐ gulp bundle ²ÅÄÜ¿´µ½×îеÄЧ¹û£¬Ã¿´Î¸Ä¶¯Ö®ºóÖ±½ÓË¢ÐÂä¯ÀÀÆ÷¼´¿É¡£
µ÷ÊÔ

´ò°üºÃµÄ´úÂëÒѾ²»ÄÇôÒ×¶ÁÁË£¬Ö±½ÓÔÚÕâÑùµÄ´úÂëÉϵ÷ÊÔ»¹ÊDz»ÄÇô·½±ãµÄ¡£Õâ¸öʱºò£¬webpack
+ vue ÓÐÁíÍâÒ»¸öÏֳɵĶ«Î÷£ºsource map Ö§³Ö¡£Îª webpack ¼ÓÈëÕâ¸öÅäÖÃ×Ö¶Î devtool:
'source-map' £º
var config = { module: { loaders: [
{ test: /.vue$/, loader: 'vue'} ] }, devtool: 'source-map'
}
ÔÙ´ÎÔËÐÐ gulp bundle »ò gulp watch ÊÔÊÔ¿´£¬ÊDz»ÊÇ¿ª·¢Õß¹¤¾ßÀï
debug µÄʱºò£¬¿ÉÒÔ×·×ٶϵ㵽Դ´úÂëÁËÄØ£º£©

ÍêÕûµÄ javascript ´úÂëÈçÏ£º
var gulp = require('gulp') var webpack = require('gulp-webpack') var named = require('vinyl-named')
var appList = ['main']
gulp.task('default', ['bundle'], function() {
console.log('done')
})
gulp.task('bundle', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig()))
.pipe(gulp.dest('dist/'))
})
gulp.task('watch', function() {
return gulp.src(mapFiles(appList, 'js'))
.pipe(named())
.pipe(webpack(getConfig({watch: true})))
.pipe(gulp.dest('dist/'))
})
/**
* @private
*/
function getConfig(opt) {
var config = {
module: {
loaders: [
{ test: /\.vue$/, loader: 'vue'}
]
},
devtool: 'source-map'
}
if (!opt) {
return config
}
for (var i in opt) {
config[i] = opt
}
return config
}
/**
* @private
*/
function mapFiles(list, extname) {
return list.map(function (app) {return 'src/'
+ app + '.' + extname})
} |
×îºó£¬¶ÅÀÀ²»Èç×ÏÂÞÀ¼
×ö³öÒ»¸ö vue + webpack µÄ generator£¬°ÑÕâÑùµÄÏîÄ¿ÌåÑé·ÖÏí¸ø¸ü¶àµÄÈË¡£Ä¿Ç°ÎÒ»ùÓÚÍŶÓÄÚ²¿ÔÚʹÓõÄÇáÁ¿¼¶½ÅÊּܹ¤¾ßдÁËÒ»·ÝÃû½Ð
just-vue µÄ generator£¬Ä¿Ç°Õâ¸ö generator »¹ÔÚС·¶Î§ÊÔÓõ±ÖУ¬´ý±È½Ï³ÉÊìÖ®ºó£¬ÔÙ·ÖÏí³öÀ´
×ܽá
ÆäʵÉÏÃæÌáµ½µÄ just-vue ½ÅÊÖ¼ÜÒѾԶ²»Ö¹ÎÄÕÂÖнéÉܵĶ«Î÷ÁË£¬
ÎÒÃÇÔÚÒµÎñÂ䵨µÄ¡°×îºóÒ»¹«À×öÁ˸ü¶àµÄ³ÁµíºÍ»ýÀÛ£¬±ÈÈç×Ô¶¯Í¼Æ¬ÉÏ´«Óë»ÖÊ´¦Àí¡¢remµ¥Î»×Ô¶¯»»Ëã¡¢·þÎñ¶Ë/¿Í»§¶Ë/Êý¾ÝÂñµã½Ó¿ÚµÄÊáÀíÓëÕûºÏ¡¢×Ô¶¯»¯
htmlone ´ò°üÓë awp ·¢²¼µÈµÈ¡£ËüÃÇΪ֧³ÖÒµÎñµÄ¿ª·¢ÕßÌṩÁ˸ü¼òµ¥¸ßЧµÄ¹¤×÷ÌåÑé¡£ ƪ·ùÓÐÏÞ£¬¸ü¶àÄÚÈÝÎÒҲϣÍû½«À´Óлú»áÔÙ¶à·ÖÏí³öÀ´¡£
×îºóÔÙ´ÎÏ£Íû´ó¼ÒÈç¹ûÓÐÐËȤµÄ»°¿ÉÒÔÀ´ÍæÒ»Ï£¬ÎÞÏßǰ¶Ë×éÄÚµÄͬѧÎÒ¶¼Ô¸ÒâÌṩһ¶ÔÒ»ÈëÃÅÖ¸µ¼£º£©
|