.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>
語言塊
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>
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搭建項目，自帶了熱加載。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
