vue-loader教程介紹
在最初使用webpack+vue時(shí)，看到vue里面各種語法，包括import，export，html和css的寫作方式，我都能依葫蘆畫瓢地實(shí)現(xiàn)各種功能，但是為什么能這樣寫，一直不太理解，直到我了解了vue-loader。
vue-loader功能
如圖，webpack的功能就是將左側(cè)用戶編寫的代碼（只要有相應(yīng)的loader，可以使用任何符合自己習(xí)慣的編寫方式）轉(zhuǎn)換成右側(cè)瀏覽器能識(shí)別的js。
vue-loader就是告訴webpack如何將vue格式的文件轉(zhuǎn)換成js。
vue組件格式
.vue 文件是一個(gè)自定義的文件類型，用類 HTML 語法描述一個(gè) Vue 組件。每個(gè) .vue 文件包含三種類型的頂級(jí)語言塊 <template>, <script> 和 <style>，還允許添加可選的自定義塊：
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data() {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
<custom1>
This could be e.g. documentation for the component.
</custom1>
vue-loader 會(huì)解析文件，提取每個(gè)語言塊，如有必要會(huì)通過其它 loader 處理，最后將他們組裝成一個(gè) CommonJS 模塊，module.exports 出一個(gè) Vue.js 組件對(duì)象。
vue-loader 支持使用非默認(rèn)語言，比如 CSS 預(yù)處理器，預(yù)編譯的 HTML 模版語言，通過設(shè)置語言塊的 lang 屬性。例如，你可以像下面這樣使用 SASS 語法編寫樣式：
<style lang="sass"> /* write SASS! */ </style>
Src 導(dǎo)入
如果喜歡分隔你的 .vue 文件到多個(gè)文件中，你可以通過 src 屬性導(dǎo)入外部文件：
<template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
需要注意的是 src 導(dǎo)入遵循和 require() 一樣的規(guī)則，這意味著你相對(duì)路徑需要以 ./ 開始，你還可以從 NPM 包中直接導(dǎo)入資源，例如：
<!-- import a file from the installed "todomvc-app-css" npm package --> <style src="todomvc-app-css/index.css">
在自定義塊上同樣支持 src 導(dǎo)入，例如：
<unit-test src="./unit-test.js"> </unit-test>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vuejs 切換導(dǎo)航條高亮(路由菜單高亮)的方法示例
這篇文章主要介紹了vuejs 切換導(dǎo)航條高亮路由高亮的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了vue彈窗組件的實(shí)現(xiàn)示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
我們不光要學(xué)會(huì)Vue的組件化實(shí)現(xiàn)過程,還要懂得組件數(shù)據(jù)發(fā)生變化,更新組件的過程,這篇文章主要給大家介紹了關(guān)于Vue3組件更新過程的相關(guān)資料,需要的朋友可以參考下2022-04-04
map()函數(shù)定義在JS的array中,它返回一個(gè)新的數(shù)組,下面這篇文章主要給大家介紹了關(guān)于Vue中map()的用法案例,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
Vue導(dǎo)入Echarts實(shí)現(xiàn)散點(diǎn)圖
這篇文章主要為大家詳細(xì)介紹了Vue導(dǎo)入Echarts實(shí)現(xiàn)散點(diǎn)圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-12-12
解決axios發(fā)送post請(qǐng)求返回400狀態(tài)碼的問題
今天小編就為大家分享一篇解決axios發(fā)送post請(qǐng)求返回400狀態(tài)碼的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要幫助大家簡(jiǎn)單的理解vue中track-by屬性,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
在 Vue.js 應(yīng)用中使用 hash 模式是一種常見的路由配置方式,這種方式利用了 URL 的 hash（即 # 符號(hào)后面的部分）來實(shí)現(xiàn)頁面的跳轉(zhuǎn)和狀態(tài)管理,以下是使用 Vue 2 和 Vue Router 設(shè)置 hash 模式的步驟,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了安裝Vue+webpack出現(xiàn)的問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
作為使用Vue的開發(fā)者，我們對(duì)Vue指令一定不陌生，諸如v-model、v-on、v-for、v-if等，同時(shí)Vue也為開發(fā)者提供了自定義指令的api，熟練的使用自定義指令可以極大的提高了我們編寫代碼的效率，讓我們可以節(jié)省時(shí)間開心的摸魚2022-11-11