首先看 .vue
是什么,
.vue
文件是一种可以把样式、逻辑、模板写在一个文件里,独立发布、便于管理的格式。但这种格式是需要 transform 的,可以通过 Webpack
或者 Browserify
进行处理。
它需要一个桥梁来重新处理的,因为它的内部把 HTML
、CSS
、JS
写在了一起了。
好了,那具体通过什么东西处理 .vue
文件呢?
在 Webpack
里面,是通过官方写的插件 vue-loader
。
vue-loader
是个啥??
vue-loader
是一个 Webpack
的 loader
,可以一定的格式将编写的 Vue 组件转换为 JavaScript 模块。
也许应该说下 Webpack
是个啥,loader
又是什么。
Webpack
是一个模块打包工具。它将一堆文件中的每个文件都作为一个模块,找出他们的依赖关系,将它们打包为可部署的静态资源。
关于 loader
,Webpack
官方说法是:
Loaders allow you to preprocess files as you require() or “load” them. Loaders are kind of like “tasks” in other build tools, and provide a powerful way to handle frontend build steps. Loaders can transform files from a different language like, CoffeeScript to JavaScript, or inline images as data URLs. Loaders even allow you to do things like require() css files right in your JavaScript!
简单讲就是能把一种语言转换为另一种语言的工具。
好吧,但是我还是不知道 export default{}
是什么.
是 ES6
的语法, export
后面的变量可以作为出口传出,在另外的文件里通过 import
接受这个变量并使用。
增加了default 意味着默认只传出一个变量出去。
所以,在 .vue
文件里面的一个传出对象,会被转化为 Vue
对象。
网友评论