webpack搭建Vue环境,.vue里的export default{}是什么?

首先看 .vue 是什么,
.vue 文件是一种可以把样式、逻辑、模板写在一个文件里,独立发布、便于管理的格式。但这种格式是需要 transform 的,可以通过 Webpack 或者 Browserify 进行处理。
它需要一个桥梁来重新处理的,因为它的内部把 HTMLCSSJS 写在了一起了。

好了,那具体通过什么东西处理 .vue 文件呢?
Webpack 里面,是通过官方写的插件 vue-loader

vue-loader 是个啥??
vue-loader 是一个 Webpackloader,可以一定的格式将编写的 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 对象。

你可能感兴趣的:(webpack搭建Vue环境,.vue里的export default{}是什么?)