首先看 .vue
是什么奴烙,
.vue
文件是一種可以把樣式、邏輯剖张、模板寫在一個文件里切诀,獨立發(fā)布、便于管理的格式搔弄。但這種格式是需要 transform 的幅虑,可以通過 Webpack
或者 Browserify
進(jìn)行處理。
它需要一個橋梁來重新處理的顾犹,因為它的內(nèi)部把 HTML
倒庵、CSS
、JS
寫在了一起了炫刷。
好了擎宝,那具體通過什么東西處理 .vue
文件呢?
在 Webpack
里面浑玛,是通過官方寫的插件 vue-loader
绍申。
vue-loader
是個啥?顾彰?
vue-loader
是一個 Webpack
的 loader
极阅,可以一定的格式將編寫的 Vue 組件轉(zhuǎn)換為 JavaScript 模塊。
也許應(yīng)該說下 Webpack
是個啥涨享,loader
又是什么筋搏。
Webpack
是一個模塊打包工具。它將一堆文件中的每個文件都作為一個模塊厕隧,找出他們的依賴關(guān)系奔脐,將它們打包為可部署的靜態(tài)資源俄周。
關(guān)于 loader
,Webpack
官方說法是:
Loaders allow you to preprocess files as you require() or “l(fā)oad” 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!
簡單講就是能把一種語言轉(zhuǎn)換為另一種語言的工具。
好吧髓迎,但是我還是不知道 export default{}
是什么.
是 ES6
的語法栈源, export
后面的變量可以作為出口傳出,在另外的文件里通過 import
接受這個變量并使用竖般。
增加了default 意味著默認(rèn)只傳出一個變量出去。
所以茶鹃,在 .vue
文件里面的一個傳出對象涣雕,會被轉(zhuǎn)化為 Vue
對象。