Vue + webpack 简介

vue 496849654@qq.com 1年前 (2020-06-15) 447次浏览 0个评论

最近在内部项目中做了一些基于 vue + webpack的项目,在此稍微总结了一下。

首先,我会先简单介绍一下 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 已经全部帮你做好了。
Vue + webpack 简介

我们还可以加入更多的 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: '#demo2',
    data: {
      name: 'taobao',
      url: 'https://www.taobao.com/favicon.ico'
    }
  })
</script>

这里的视图模板加入了一个 标签,同时我们看到了 2 个特性的值都写作了 。这样的话,图片的 title 和 alt 特性值就都会被绑定为字符串 ‘taobao’。

如果想绑定的特性是像 img[src] 这样的不能在 html 中随意初始化的 ,没关系,有 v-attr=”src: url” 这样的写法,把被绑定的数据里的 url 同步过来。

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

如果我们要开发更大型的网页或 web 应用,web 组件化的思维是非常重要的,这也是今天整个前端社区长久不衰的话题。

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

介绍 webpack

Vue + 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 的机制管理起来。一开始对于这种技术形态我个人还是不太喜欢的,不过随着不断的实践和体验,也逐渐习惯并认同了


css315 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Vue + webpack 简介
喜欢 (1)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址