深入理解vue-loader如何使用，深入理解vue-loader

深入理解vue-loader如何使用，深入理解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會解析這個檔案中的每個語言塊，然後傳輸到其它的loaders，最終輸出到module.exports是vue組件的設定物件的CommonJS模組。

vue-loader通過指定語言塊的lang屬性支援css先行編譯、html編譯模板等語言格式。如在組件的style塊中使用sass

<style lang="sass"> /* write SASS! */</style>

語言塊

1. 預設語言：html
2. 每個*.vue最多包含一個塊
3. 塊中的內容作為字串提取出來

src 引入

如果你習慣將*.vue組件分割成多個檔案，可以使用語言塊的src屬性把擴充檔案引入到組件中。

<template src="./template.html"></template><style src="./style.css"></style><script src="./script.js"></script>

文法高亮

在編輯器中可以將*.vue檔案作為HTML處理，實現文法高亮

使用 vue-cli

推薦vue-cli和vue-loader組合使用搭建項目

npm install -g vue-clivue init webpack-simple hello-vuecd hello-vuenpm installnpm run dev # ready to go!

ES2015

當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將會自動把鍵轉換為component-a，是以我們可以在中引入組件。

ES2015

*.vue檔案的的內容會被編譯進js渲染函數，經過 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

當一個style標籤帶有scoped屬性，它的css只應用於當前組件的元素。

<style scoped>.example { color: red;}</style><template> <div class="example">hi</div></template>

轉換為：

<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>

1. 子組件的根節點會受到父組件和本組件的局部css樣式影響
2. Partials are not affected by scoped styles.
3. 有了局部樣式仍然需要類別選取器
4. 在包含迭代組件的組件中小心使用子孫選取器。一條關於.a .b的css規則，如果在類名為a的標籤中使用了子組件，那麼子組件中的類名為b的標籤也會應用這條規則。

CSS 模組化

英文教程

CSS Modules便於實現css模組化，vue-loader通過模仿css的scope提供了module來實現css模組化整合。

使用在

<style module>.red { color: red;}.bold { font-weight: bold;}</style>

這樣開啟CSS Module模式，class對象會作為$style的屬性注入到組件中，進而在中進行動態類綁定

<template> <p :class="$style.red">  This should be red </p></template>

style中的類作為被計算的屬性，也可以在：class中使用數組或者對象文法

<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 1vue: { cssModules: {  // overwrite local ident name  localIdentName: '[path][name]---[local]---[hash:base64:5]',  // enable camelCase  camelCase: true }}// webpack 2module: { rules: [  {   test: '\.vue$',   loader: 'vue',   options: {    cssModules: {     localIdentName: '[path][name]---[local]---[hash:base64:5]',     camelCase: true    }   }  } ]}

PostCSS

任何vue-loader處理輸出的css都經過PostCSS進行局部css重寫，我們也可以增加PostCSS外掛程式進行這些處理，如autoprefixer和 CSSNext。

Webpack 1.x用法：

// webpack.config.jsmodule.exports = { // other configs... vue: {  // use custom postcss plugins  postcss: [require('postcss-cssnext')()] }}

Webpack 2.x用法：

// webpack.config.jsmodule.exports = { // other configs... plugins: [  new webpack.LoaderOptionsPlugin({   vue: {    // use custom postcss plugins    postcss: [require('postcss-cssnext')()]   }  }) ]}

postcss也支援外掛程式數組

postcss: { plugins: [...], // list of plugins options: {  parser: sugarss // use sugarss parser }}

熱載入

熱載入不只是修改檔案後頁面的重新整理。修改某個.vue組件後，頁面中這個組件的所有執行個體都會被替換而不重載頁面，它還儲存了應用的目前狀態以及被替換的組件。

如果使用了vue-cli搭建項目，內建了熱載入。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。