前端开发框架文档

前端开发框架—Vue.js,webpackVue.js:轻效的前端组件化案.Vue.js 是款极简的mvvm 框架，如果让我个词来形容它，就是“轻·巧”。如果话来描述它，它能够集众多优秀逐流的前端框架之成，但同时保持简单。废话多说，来看个 :{{message}}var vm = new Vue({el: '#demo',data: {

zz475974010

3808人浏览 · 2017-06-11 22:59:40

zz475974010 · 2017-06-11 22:59:40 发布

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

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

<div id="demo">
{{message}}
<input v-model="message">

</div>

el: '#demo',data: {

message: 'Hello Vue.js!'}

})</script>

先，代码分两部分，部分是 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 的作者以及提供个基于它们三者的项示。我们的会贴近实际作的场景，

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

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

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

<dist> (ignored)
<node_modules> (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 件的引 :

<!DOCTYPE html><html>
<head>

加监听

监听加简单，只要在刚才 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 才能看到最新的效果，每次改动之后直接刷新浏览即可。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^