前端开发框架文档

前端开发框架—Vue.js,webpackVue.js:轻 效的前端组件化 案.

Vue.js 是 款极简的 mvvm 框架，如果让我 个词来形容它，就是 “轻·巧” 。如果 话来描述它，它能够集众多优秀逐流的前端框架之 成，但同时保持简单 。废话 多说，来看 个 :

{{message}}

先，代码分两部分， 部分是 html，同时也是视图模板， 包含 个值为 message 的 本何 个相同值的输 框;另 部分是 script，它创建 个 vm 对象，其中绑定的 dom 结点是 #demo，绑定的数据是 {message: 'Hello Vue.js'}，最终 的显示效果就是 段 Hello Vue.js 本加 个含相同 字的输 框， 关键的是，由于数据是双向绑定的，所以我们修改 本框内 本的同时，第 段 本和被绑定的数据的 message 字段的值都会同步 新—— 这底层的复杂逻辑，Vue.js 已经全部帮你做好 。

web 组件化
最后要介绍 Vue.js 对于 web 组件化开发的思考和设计

如果我们要开发 型的 或 web 应 ，web 组件化的思维是 常重要的，这也是今天整个前端社区 久 衰的话题。

Vue.js 设计 个 *.vue 格式的 件，令每 个组件的样式、模板和脚本集合成 整个 件， 每个 件就是 个组件，同时还包含 组件之间的依赖关系，麻雀虽 五脏俱全，整个组件从外观到结构到特性再到依赖关系都 览 余 :

从功能 度，template, directive, data-binding, components 各种实 功能都 全， filter,computed var, var watcher, custom event 这样的 级功能也都洋溢着作者的巧思;从开发体验 度，这些设计 乎是完全 然的，没有刻意设计过或 考虑的感觉，只有个别 得已的地 带 框架专属的 v- 前缀。从性能、体积 度评估，Vue.js 也 常有竞争 !

webpack 是另 个近期发现的好东 。它主要的 途是通过 CommonJS 的语法把所有浏览 端需要发布的静态资源做相应的准备， 如资源的合并和打包。

举个 ，现在有个脚本主 件 app.js 依赖 另 个脚本 module.js// app.js

var module = require('./module.js')... module.x ...

// module.jsexports.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 的机制管 起来。 开始对于这种技术形态我个 还是 太喜欢的， 过随着 断的实践和体验，也逐渐习惯并认同 。

最后，对于之前提到的 Vue.js，作者也提供 个叫做 vue-loader 的 npm 包，可以把 *.vue 件转换成 webpack 包，和整个打包过程融合起来。所以有 Vue.js、webpack 和 vue-loader，我们 然就可以把它们组合在 起试试看!

项 实践流程
回到正题。今天要分享的是，是基于上 两个东 :Vue.js 和 webpack，以及把它们 联起来的

vue-loader
Vue.js 的作者以及提供 个基于它们三者的项 示 。 我们的 会 贴近实际 作的场景，

同时和团队之前总结出来的项 特点和项 流程相吻合。
 录结构设计

组件 录， 个组件 个 .vue 件
a.vue
b.vue
如果实在有 能算组件，但也 来 外部 (tnpm) 的代码，可以放在这 foo.css

bar.js
主应 / 相关 件
app.html 主 html
app.vue 主 vue
app.js 通常做的事情只是 var Vue = require('vue'); new Vue(require('./app.vue'))

(ignored)
(ignored)
gulpfile.js 设计项 打包/监听等任务
package.json 记录项 基本信息，包括模块依赖关系README.md 项 基本介绍
打包

通过 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 件的引 :

浏览 打开 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 才能看到最新的效果，每次改动之后直接刷新浏览 即可。