這篇文章給大家分享的是有關(guān)vue-loader的使用方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都創(chuàng)新互聯(lián)公司成立與2013年，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元杞縣做網(wǎng)站,已為上家服務(wù),為杞縣各地企業(yè)和個人服務(wù),聯(lián)系電話:18982081108

.vue格式的文件使用類似HTML的語法描述vue組件。每個.vue文件包含三種最基本的語言塊：,

vue-loader會解析這個文件中的每個語言塊，然后傳輸?shù)狡渌膌oaders，最終輸出到module.exports是vue組件的配置對象的CommonJS模塊。

vue-loader通過指定語言塊的lang屬性支持css預(yù)編譯、html編譯模板等語言格式。如在組件的style塊中使用sass

 /* write SASS! */

語言塊

1. 默認(rèn)語言：html

2. 每個*.vue最多包含一個塊

3. 塊中的內(nèi)容作為字符串提取出來

src 引入

如果你習(xí)慣將*.vue組件分割成多個文件，可以使用語言塊的src屬性把擴(kuò)展文件引入到組件中。

語法高亮

在編輯器中可以將*.vue文件作為HTML處理，實(shí)現(xiàn)語法高亮

使用 vue-cli

推薦vue-cli和vue-loader組合使用搭建項(xiàng)目

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在同一個項(xiàng)目中檢測到babel-loader或者buble-loader的存在時，會用他們來處理*.vue文件中

我們可以使用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特性。

可以簡寫成：

可以用buble自定義模板的特性支持

處理普通js文件

由于vue-loader只處理*.vue文件，需要在webpack的配置文件中配置babel-loader或者buble-loader來處理普通的js文件。vue-cli在項(xiàng)目中可以做這些事情。

在.babelrc文件中配置babel

局部css

當(dāng)一個style標(biāo)簽帶有scoped屬性，它的css只應(yīng)用于當(dāng)前組件的元素。

.example {
 color: red;
}

轉(zhuǎn)換為：

注：

1 . 在同一個組件可以包含局部和全局樣式

/* local styles */

1. 子組件的根節(jié)點(diǎn)會受到父組件和本組件的局部css樣式影響

2. Partials are not affected by scoped styles.

3. 有了局部樣式仍然需要類選擇器

4. 在包含迭代組件的組件中小心使用子孫選擇器。一條關(guān)于.a .b的css規(guī)則，如果在類名為a的標(biāo)簽中使用了子組件，那么子組件中的類名為b的標(biāo)簽也會應(yīng)用這條規(guī)則。

CSS 模塊化

英文教程

CSS Modules便于實(shí)現(xiàn)css模塊化，vue-loader通過模仿css的scope提供了module來實(shí)現(xiàn)css模塊化集成。

使用在

.red {
 color: red;
}
.bold {
 font-weight: bold;
}

這樣打開CSS Module模式，class對象會作為$style的屬性注入到組件中，進(jìn)而在中進(jìn)行動態(tài)的類綁定

style中的類作為被計(jì)算的屬性，也可以在：class中使用數(shù)組或者對象語法

或者在js中獲取使用它

自定義注入名

由于一個vue組件可以包含多個

 /* identifiers injected as $a */



 /* identifiers injected as $b */

配置css-loader

用css-loader來處理CSS Modules，以下是css-loader對

{
 modules: true,
 importLoaders: true,
 localIdentName: '[hash:base64]'
}

通過vue-loader的cssModules配置項(xiàng)定制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組件后，頁面中這個組件的所有實(shí)例都會被替換而不重載頁面，它還保存了應(yīng)用的當(dāng)前狀態(tài)以及被替換的組件。

感謝各位的閱讀！關(guān)于“vue-loader的使用方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！