Vuejs 單文件組件實(shí)例詳解

更新時(shí)間：2018年02月09日 09:34:58 作者：yugasun

這篇文章主要介紹了Vuejs 單文件組件實(shí)例詳解,需要的朋友可以參考下

在之前的實(shí)例中，我們都是通過 Vue.component 或者 components 屬性的方式來定義組件，這種方式在很多中小規(guī)模的項(xiàng)目中還好，但在復(fù)雜的項(xiàng)目中，下面這些缺點(diǎn)就非常明顯了：

字符串模板：缺乏高亮，書寫麻煩，特別是 HTML 多行的時(shí)候，雖然可以將模板寫在 html 文件中，但是侵入性太強(qiáng)，不利于組件解耦分離。

不支持CSS：意味著當(dāng) HTML 和 JavaScript 組件化時(shí)，CSS明顯被遺漏了

沒有構(gòu)建步驟：限制只能使用 HTML 和 ES5 JavaScript，而不能使用預(yù)處理器。

Vuejs 提供的擴(kuò)展名為 .vue 的單文件組件為以上所有問題提供了解決方案。

初識(shí)單文件組件

還是利用工欲善其事必先利其器中的源碼，在 src 目錄下創(chuàng)建 hello.vue 文件，內(nèi)容如下：

<template>
 <h2>{{ msg }}</h2>
</template>
<script>
export default {
data () {
return {
msg:'Hello Vue.js 單文件組件~'
}
}
}
</script>
<style>
h2 {
color: green;
}
</style>

然后在 app.js 中引入使用：

// ES6 引入模塊語法
import Vue from 'vue';
import hello from './hello.vue';
new Vue({
 el: "#app",
 template: '<hello/>',
 components: {
  hello
 }
});

此時(shí)項(xiàng)目是沒法運(yùn)行的，因?yàn)?.vue 文件 webpack 是沒法是別的，它需要對(duì)應(yīng)的 vue-loader 來處理才行，而且細(xì)心的朋友會(huì)發(fā)現(xiàn) hello.vue 中用到了 ES6 語法，此時(shí)就需要用到相應(yīng)的語法轉(zhuǎn)化 loader 將 ES6 轉(zhuǎn)化成主流瀏覽器兼容的 ES5 語法，這里就需要用到官方推薦的 babel 工具了。先安裝需要的 loader :

# hello.vue 文件中使用了 css，所以需要 css-loader 來處理，vue-loader 會(huì)自動(dòng)調(diào)用
npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev

有的人疑惑只是使用 babel-loader 為什么還需要安裝后面這么多工具呢，這是因?yàn)楹芏喙ぞ叨际仟?dú)立的， loader 只是為了配合 webpack 使用的橋梁，而這里 babel-core 和 babel-preset-env 才是實(shí)現(xiàn) ES6 到 ES5 的核心。

我們?cè)傩薷?webpack.config.js 配置如下：

module.exports = {
 // ...
 module: {
  // 這里用來配置處理不同后綴文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader'
   },
   {
    test: /.js$/,
    loader: 'babel-loader'
   }
  ]
 }
}

對(duì)于 babel 的配置，我們還需在項(xiàng)目根目錄下剛創(chuàng)建 .babelrc 文件來配置 Babel presets 和其他相關(guān)插件，內(nèi)容如下：

{
 "presets": [ "env" ]
}

但是雖然雖然都配置好了，項(xiàng)目還是還是會(huì)報(bào)錯(cuò)，報(bào)如下錯(cuò)誤：

ERROR in ./src/hello.vue
Module build failed: Error: Cannot find module 'vue-template-compiler'

有人就不高興了，明明是按照官方提示安裝了依賴，并正確的進(jìn)行配置，為什么還是會(huì)報(bào)錯(cuò)呢？遇到錯(cuò)誤不要怕，先閱讀下錯(cuò)誤是什么，很容易發(fā)現(xiàn)，是因?yàn)?Cannot find module 'vue-template-compiler' ，這是因?yàn)?vue-loader 在處理 .vue 文件時(shí)，還需要依賴 vue-template-compiler 工具來處理。

剛開始我不知道官方為什么沒有直接告訴用戶需要安裝這個(gè)依賴，通過閱讀 vue-loader 才明白其 package.json 文件中是將 vue-template-compiler 和 css-loader 作為 peerDependencies ，而 peerDependencies 在安裝的時(shí)候，并不會(huì)自動(dòng)安裝（npm@3.0+），只會(huì)給出相關(guān)警告，所以這個(gè)需要我們手動(dòng)安裝的，當(dāng)然在 .vue 文件中如果需要寫 CSS，也必須用到 css-loader ，這個(gè)也是在 peerDependencies 中。相關(guān)討論： https://github.com/vuejs/vue-loader/issues/1158

知道問題了，直接安裝下就可以了：

npm install vue-template-compiler css-loader --save-dev

再次運(yùn)行項(xiàng)目，頁面中出現(xiàn)了我們的內(nèi)容，并沒報(bào)錯(cuò)，ok，大功告成~

使用預(yù)處理器

我們已經(jīng)學(xué)會(huì)在 .vue 中寫 css 了，那么如果使用 sass 預(yù)處理器呢？首先安裝上篇文章中提到的模塊：

npm install sass-loader node-sass --save-dev

配置只需兩步：

修改 webpack.config.js 中 vue-loader 配置

module.exports = {
 // ...
 module: {
  // 這里用來配置處理不同后綴文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
     loaders: {
      // 這里也可以使用連寫方式，但是不利于自定義話參數(shù)配置
      // scss: 'vue-style-loader!css-loader!sass-loader'
      scss: [
       {
        loader: 'vue-style-loader'
       },
       {
        loader: 'css-loader'
       },
       {
        loader: 'sass-loader'
       }
      ]
     }
    }
   },
   // ...
  ]
 }
}

給 .vue 文件中的 style 標(biāo)簽，添加 lang="scss" 屬性。

配置完后，就可以再 .vue 文件中，愉快地編寫 sass 語法了。

加載全局設(shè)置文件

實(shí)際開發(fā)中，我們?cè)诰帉?sass 文件時(shí)，經(jīng)常會(huì)將全局的 scss 變量提取出來，放到一個(gè)單獨(dú)的文件中，但是這樣就有個(gè)問題，每個(gè)需要用到的組件，都需要手動(dòng) @import './styles/_var.scss' 進(jìn)來，非常不友好。插件 sass-resources-loader 就很好地幫我們解決這個(gè)問題，先安裝一下：

npm install sass-resources-loader --save-dev

然后修改 webpack.config.js 文件中 vue-loader 相關(guān)配置：

// ...
{
 test: /.vue$/,
 loader: 'vue-loader',
 options: {
  loaders: {
   scss: [
    {
     loader: 'vue-style-loader'
    },
    {
     loader: 'css-loader'
    },
    {
     loader: 'sass-loader'
    },
    // 看這里，看這里，看這里
    {
     loader: 'sass-resources-loader',
     options: {
      // 這里的resources 屬性是個(gè)數(shù)組，可以放多個(gè)想全局引用的文件
      resources: [resolve('./src/styles/_var.scss')]
     }
    }
   ]
  }
 }
}
// ...

配置就完成了，我們?cè)賮頊y試下。

在 src 目錄下分別創(chuàng)建 hello1.vue 和 hello2.vue 文件：

<!-- hello1.vue -->
<template>
 <h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello1',
data () {
return {
msg:'Hello Vue.js 單文件組件~'
}
}
}
</script>
<stylelang="scss">
h1 {
color: $green;
}
</style>

<!-- hello2.vue -->
<template>
 <h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello2',
data () {
return {
msg:'Hello Vue.js 單文件組件~'
}
}
}
</script>
<stylelang="scss">
h1 {
color: $red;
}
</style>

然后創(chuàng)建一個(gè) styles 目錄，并在其中新建存放全局變量的文件 _var.scss :

$green: rgb(41, 209, 41);
$red: rgb(177, 28, 28);

接下來，在 app.js 中引用兩個(gè)組件：

import Vue from 'vue';
import hello1 from './hello1.vue';
import hello2 from './hello2.vue';
new Vue({
 el: "#app",
 template: '<div><hello1/><hello2/></div>',
 components: {
  hello1,
  hello2
 }
});

重新運(yùn)行項(xiàng)目就可以了。

有作用域的 style

單文件組件中為我們提供了一個(gè)非常便利的功能，就是當(dāng) style 標(biāo)簽添加 scoped 屬性時(shí)，標(biāo)簽內(nèi)的樣式將只作用于當(dāng)前組件中的元素。

接著上面的例子，運(yùn)行后會(huì)發(fā)現(xiàn) hello1.vue 中的 h1 顏色并不是想要的 $green 色，而是被 hello2.vue 中的樣式覆蓋了。于是分別在 hello1.vue 和 hello2.vue 的 style 標(biāo)簽上添加 scoped 屬性，如下：

<!-- hello1.vue -->
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>
<!-- hello2.vue -->
<stylelang="scss"scoped>
h1 {
color: $red;
}
</style>

這樣一來我們的兩個(gè) h1 標(biāo)簽顏色都顯示正常了。

自定義塊

在編寫某些開源組件時(shí)，有時(shí)候我們需要同時(shí)維護(hù)多個(gè)組件和組件說明，但是每次修改就要同時(shí)修改 .vue 和 .md 文件，相當(dāng)麻煩。 .vue 文件的自定義語言塊功能，就允許我們將 markdown 說明同時(shí)寫進(jìn) .vue 文件中，然后通過插件將其說明部分單獨(dú)提取到相應(yīng)的 .md 文件中，這樣就可以同時(shí)維護(hù)說明文檔和組件功能了。

比如我們將 hello1.vue 文件修改如下：

<docs>
 # 標(biāo)題
  這是標(biāo)題內(nèi)容，[倉庫地址](https://github.com/yugasun/You-Dont-Know-Vuejs)
 ## 子標(biāo)題
  這是子標(biāo)題內(nèi)容
</docs>
<template>
 <h1>{{ msg }}</h1>
</template>
<script>
export default {
name:'hello1',
data () {
return {
msg:'Hello Vue.js 單文件組件~'
}
}
}
</script>
<stylelang="scss"scoped>
h1 {
color: $green;
}
</style>

然后修改 webpack.config.js 配置：

const path = require('path');
// 引入相關(guān)插件
const ExtractTextPlugin = require('extract-text-webpack-plugin');
function resolve(dir){
 return path.resolve(__dirname, dir);
}
module.exports = {
 // 入口文件
 entry: './src/app.js',
 // 編譯輸出文件
 output: {
  path: resolve('./'),
  filename: 'build.js'
 },
 resolve: {
  alias: {
   // 因?yàn)槲覀冞@里用的是 require 引入方式，所以應(yīng)該使用vue.common.js/vue.js/vue.min.js
   'vue$': 'vue/dist/vue.common.js'
  }
 },
 devServer: {
  // 這里定義 webpack-dev-server 開啟的web服務(wù)的根目錄
  contentBase: resolve('./')
 },
 module: {
  // 這里用來配置處理不同后綴文件所使用的loader
  rules: [
   {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
     loaders: {
      scss: [
       {
        loader: 'vue-style-loader'
       },
       {
        loader: 'css-loader'
       },
       {
        loader: 'sass-loader'
       },
       {
        loader: 'sass-resources-loader',
        options: {
         resources: [resolve('./src/styles/_var.scss')]
        }
       }
      ],
      docs: ExtractTextPlugin.extract('raw-loader')
     }
    }
   },
   {
    test: /.js$/,
    loader: 'babel-loader'
   }
  ]
 },
 plugins: [
  new ExtractTextPlugin('docs.md')
 ]
}

這里用到了 extract-text-webpack-plugin 導(dǎo)出 text 插件，和 raw-loader ，分別都安裝下就行。

然后運(yùn)行構(gòu)建命令 npm run build ，等運(yùn)行結(jié)束，根目錄下會(huì)同時(shí)生成一個(gè) docs.md 文件，這就是我們想編寫的說明文檔。

點(diǎn)擊查看源碼：https://github.com/yugasun/You-Dont-Know-Vuejs/tree/master/chapter2/2

總結(jié)

以上所述是小編給大家介紹的Vuejs 單文件組件實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: