深入理解vue-loader如何使用
.vue格式的文件使用類似HTML的語法描述vue組件。每個.vue文件包含三種最基本的語言塊：,
<template>
<div class="example">{{ msg }}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.example {
color: red;
}
</style>
vue-loader會解析這個文件中的每個語言塊，然后傳輸?shù)狡渌膌oaders，最終輸出到module.exports是vue組件的配置對象的CommonJS模塊。
vue-loader通過指定語言塊的lang屬性支持css預(yù)編譯、html編譯模板等語言格式。如在組件的style塊中使用sass
<style lang="sass"> /* write SASS! */ </style>
語言塊
- 默認(rèn)語言：html
- 每個*.vue最多包含一個塊
- 塊中的內(nèi)容作為字符串提取出來
src 引入
如果你習(xí)慣將*.vue組件分割成多個文件，可以使用語言塊的src屬性把擴展文件引入到組件中。
<template src="./template.html"></template> <style src="./style.css"></style> <script src="./script.js"></script>
語法高亮
在編輯器中可以將*.vue文件作為HTML處理，實現(xiàn)語法高亮
使用 vue-cli
推薦vue-cli和vue-loader組合使用搭建項目
npm install -g vue-cli vue init webpack-simple hello-vue cd hello-vue npm install npm run dev # ready to go!
ES2015
當(dāng)vue-loader在同一個項目中檢測到babel-loader或者buble-loader的存在時，會用他們來處理*.vue文件中
<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'
export default {
components: {
ComponentA,
ComponentB
}
}
</script>
我們可以使用ES2015對象的簡寫來定義子組件，{ ComponentA }是{ ComponentA: ComponentA }的簡寫。vue將會自動把鍵轉(zhuǎn)換為component-a，是以我們可以在中引入組件。
ES2015
*.vue文件的的內(nèi)容會被編譯進(jìn)js渲染函數(shù)，經(jīng)過 Buble等支持ES2015特性的自定義生成工具處理。所以我們可以使用Object shorthand properties 和 computed properties等ES2015特性。
<div :class="[{ active: active }, isButton ? prefix + '-button' : null]">
可以簡寫成：
<div :class="{ active, [`${prefix}-button`]: isButton }">
可以用buble自定義模板的特性支持
處理普通js文件
由于vue-loader只處理*.vue文件，需要在webpack的配置文件中配置babel-loader或者buble-loader來處理普通的js文件。vue-cli在項目中可以做這些事情。
在.babelrc文件中配置babel
局部css
當(dāng)一個style標(biāo)簽帶有scoped屬性，它的css只應(yīng)用于當(dāng)前組件的元素。
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
轉(zhuǎn)換為：
<style>
.example[_v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" _v-f3f3eg9>hi</div>
</template>
注：
1 . 在同一個組件可以包含局部和全局樣式
<style> /* global styles */ </style> <style scoped> /* local styles */ </style>
- 子組件的根節(jié)點會受到父組件和本組件的局部css樣式影響
- Partials are not affected by scoped styles.
- 有了局部樣式仍然需要類選擇器
- 在包含迭代組件的組件中小心使用子孫選擇器。一條關(guān)于.a .b的css規(guī)則，如果在類名為a的標(biāo)簽中使用了子組件，那么子組件中的類名為b的標(biāo)簽也會應(yīng)用這條規(guī)則。
CSS 模塊化
CSS Modules便于實現(xiàn)css模塊化，vue-loader通過模仿css的scope提供了module來實現(xiàn)css模塊化集成。
使用在
<style module>
.red {
color: red;
}
.bold {
font-weight: bold;
}
</style>
這樣打開CSS Module模式，class對象會作為$style的屬性注入到組件中，進(jìn)而在中進(jìn)行動態(tài)的類綁定
<template> <p :class="$style.red"> This should be red </p> </template>
style中的類作為被計算的屬性，也可以在：class中使用數(shù)組或者對象語法
<template>
<div>
<p :class="{ [$style.red]: isRed }">
Am I red?
</p>
<p :class="[$style.red, $style.bold]">
Red and bold
</p>
</div>
</template>
或者在js中獲取使用它
<script>
export default {
created () {
console.log(this.$style.red)
// -> "_1VyoJ-uZOjlOxP7jWUy19_0"
// an identifier generated based on filename and className.
}
}
</script>
自定義注入名
由于一個vue組件可以包含多個
<style module="a"> /* identifiers injected as $a */ </style> <style module="b"> /* identifiers injected as $b */ </style>
配置css-loader
用css-loader來處理CSS Modules，以下是css-loader對
{
modules: true,
importLoaders: true,
localIdentName: '[hash:base64]'
}
通過vue-loader的cssModules配置項定制css-loader
// wepback 1
vue: {
cssModules: {
// overwrite local ident name
localIdentName: '[path][name]---[local]---[hash:base64:5]',
// enable camelCase
camelCase: true
}
}
// webpack 2
module: {
rules: [
{
test: '\.vue$',
loader: 'vue',
options: {
cssModules: {
localIdentName: '[path][name]---[local]---[hash:base64:5]',
camelCase: true
}
}
}
]
}
PostCSS
任何vue-loader處理輸出的css都經(jīng)過PostCSS進(jìn)行局部css重寫，我們也可以增加PostCSS插件進(jìn)行這些處理，如autoprefixer和 CSSNext。
Webpack 1.x用法：
// webpack.config.js
module.exports = {
// other configs...
vue: {
// use custom postcss plugins
postcss: [require('postcss-cssnext')()]
}
}
Webpack 2.x用法：
// webpack.config.js
module.exports = {
// other configs...
plugins: [
new webpack.LoaderOptionsPlugin({
vue: {
// use custom postcss plugins
postcss: [require('postcss-cssnext')()]
}
})
]
}
postcss也支持插件數(shù)組
postcss: {
plugins: [...], // list of plugins
options: {
parser: sugarss // use sugarss parser
}
}
熱加載
熱加載不只是修改文件后頁面的刷新。修改某個.vue組件后，頁面中這個組件的所有實例都會被替換而不重載頁面，它還保存了應(yīng)用的當(dāng)前狀態(tài)以及被替換的組件。
如果使用了vue-cli搭建項目，自帶了熱加載。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 詳解vue-loader在項目中是如何配置的
- vue2.0安裝style/css loader的方法
- Vue2.0結(jié)合webuploader實現(xiàn)文件分片上傳功能
- Vue的移動端多圖上傳插件vue-easy-uploader的示例代碼
- vue webuploader 文件上傳組件開發(fā)
- Vue上傳組件vue Simple Uploader的用法示例
- Vue + Webpack + Vue-loader學(xué)習(xí)教程之相關(guān)配置篇
- Vue + Webpack + Vue-loader學(xué)習(xí)教程之功能介紹篇
- vue的.vue文件是怎么run起來的(vue-loader)
相關(guān)文章
本篇文章主要介紹了Vue監(jiān)聽數(shù)據(jù)變化，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了vue打開子組件彈窗都刷新功能的實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
Vue3如何理解ref toRef和toRefs的區(qū)別
本文主要介紹了Vue3如何理解ref toRef和toRefs的區(qū)別，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
最近一直在做的項目是Vue2搭建的項目，本文主要介紹了Vue全局自定義指令Modal拖拽的實踐，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue.js Ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法
Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。下面通過本文給大家介紹vue.js ajax動態(tài)參數(shù)與列表顯示實現(xiàn)方法，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了Vue.js中的下載和調(diào)用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)經(jīng)典選項卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue中rules的寫法使用小結(jié),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01