前端开发框架文档

前端开发框架—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.jswebpack 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 件的引 :


Main




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

你可能感兴趣的:(前端开发框架文档)