你也許不知道的Vuejs - 單文件組件

時間  2019-11-17
標籤 也許 不知道 vuejs 文件 組件 简体版
原文   原文鏈接

by yugasun from yugasun.com/post/you-ma… 本文可全文轉載，但須要保留原做者和出處。javascript

爲何須要單文件組件

在以前的實例中，咱們都是經過 Vue.component 或者 components 屬性的方式來定義組件，這種方式在不少中小規模的項目中還好，但在複雜的項目中，下面這些缺點就很是明顯了：css

字符串模板：缺少高亮，書寫麻煩，特別是 HTML 多行的時候，雖然能夠將模板寫在 html 文件中，可是侵入性太強，不利於組件解耦分離。 不支持CSS：意味着當 HTML 和 JavaScript 組件化時，CSS明顯被遺漏了 沒有構建步驟：限制只能使用 HTML 和 ES5 JavaScript，而不能使用預處理器。html

Vuejs 提供的擴展名爲 .vue 的 單文件組件 爲以上全部問題提供瞭解決方案。vue

初識單文件組件

仍是利用 工欲善其事必先利其器 中的源碼，在 src 目錄下建立 hello.vue 文件，內容以下：java

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

而後在 app.js 中引入使用：node

// ES6 引入模塊語法
import Vue from 'vue';
import hello from './hello.vue';

new Vue({
  el: "#app",
  template: '<hello/>',
  components: {
    hello
  }
});
複製代碼

此時項目是無法運行的，由於 .vue 文件 webpack 是無法是別的，它須要對應的 vue-loader 來處理才行，並且細心的朋友會發現 hello.vue 中用到了 ES6 語法，此時就須要用到相應的語法轉化 loader 將 ES6 轉化成主流瀏覽器兼容的 ES5 語法，這裏就須要用到官方推薦的 babel 工具了。先安裝須要的 loader:webpack

# hello.vue 文件中使用了 css，因此須要 css-loader 來處理，vue-loader 會自動調用
npm install vue-loader css-loader babel-loader babel-core babel-preset-env --save-dev
複製代碼

有的人疑惑只是使用 babel-loader 爲何還須要安裝後面這麼多工具呢，這是由於不少工具都是獨立的，loader 只是爲了配合 webpack 使用的橋樑，而這裏 babel-core 和 babel-preset-env 纔是實現 ES6 到 ES5 的核心。git

咱們再修改 webpack.config.js 配置以下：github

module.exports = {
  // ...
  module: {
    // 這裏用來配置處理不一樣後綴文件所使用的loader
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /.js$/,
        loader: 'babel-loader'
      }
    ]
  }
}
複製代碼

對於 babel 的配置，咱們還需在項目根目錄下剛建立 .babelrc 文件來配置 Babel presets 和 其餘相關插件，內容以下：web

{
  "presets": [ "env" ]
}
複製代碼

可是雖然雖然都配置好了，項目仍是仍是會報錯，報以下錯誤：

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

有人就不高興了，明明是按照官方提示安裝了依賴，並正確的進行配置，爲何仍是會報錯呢？遇到錯誤不要怕，先閱讀下錯誤是什麼，很容易發現，是由於 Cannot find module 'vue-template-compiler'，這是由於 vue-loader 在處理 .vue 文件時，還須要依賴 vue-template-compiler 工具來處理。

剛開始我不知道官方爲何沒有直接告訴用戶須要安裝這個依賴，經過閱讀 vue-loader 才明白其 package.json 文件中是將 vue-template-compiler 和 css-loader 做爲 peerDependencies，而 peerDependencies 在安裝的時候，並不會自動安裝（npm@3.0+），只會給出相關警告，因此這個須要咱們手動安裝的，固然在 .vue 文件中若是須要寫 CSS，也必須用到 css-loader，這個也是在 peerDependencies 中。相關討論：https://github.com/vuejs/vue-loader/issues/1158

知道問題了，直接安裝下就能夠了：

npm install vue-template-compiler css-loader --save-dev
複製代碼

再次運行項目，頁面中出現了咱們的內容，並沒報錯，ok，大功告成~

使用預處理器

咱們已經學會在 .vue 中寫 css 了，那麼若是使用 sass 預處理器呢？首先安裝上篇文章中提到的模塊：

npm install sass-loader node-sass --save-dev
複製代碼

配置只需兩步：

  1. 修改 webpack.config.js 中 vue-loader 配置
module.exports = {
    // ...
    module: {
      // 這裏用來配置處理不一樣後綴文件所使用的loader
      rules: [
        {
          test: /.vue$/,
          loader: 'vue-loader',
          options: {
            loaders: {
              // 這裏也可使用連寫方式，可是不利於自定義話參數配置
              // scss: 'vue-style-loader!css-loader!sass-loader'
              scss: [
                {
                  loader: 'vue-style-loader'
                },
                {
                  loader: 'css-loader'
                },
                {
                  loader: 'sass-loader'
                }
              ]
            }
          }
        },
        // ...
      ]
    }
  }

複製代碼
  1. 給 .vue 文件中的 style 標籤，添加 lang="scss" 屬性。

配置完後，就能夠再 .vue 文件中，愉快地編寫 sass 語法了。

加載全局設置文件

實際開發中，咱們在編寫 sass 文件時，常常會將全局的 scss 變量提取出來，放到一個單獨的文件中，可是這樣就有個問題，每一個須要用到的組件，都須要手動 @import './styles/_var.scss' 進來，很是不友好。插件 sass-resources-loader 就很好地幫咱們解決這個問題，先安裝一下：

npm install sass-resources-loader --save-dev
複製代碼

而後修改 webpack.config.js 文件中 vue-loader 相關配置：

// ...
  {
    test: /.vue$/,
    loader: 'vue-loader',
    options: {
      loaders: {
        scss: [
          {
            loader: 'vue-style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'sass-loader'
          },
          // 看這裏，看這裏，看這裏
          {
            loader: 'sass-resources-loader',
            options: {
              // 這裏的resources 屬性是個數組，能夠放多個想全局引用的文件
              resources: [resolve('./src/styles/_var.scss')]
            }
          }
        ]
      }
    }
  }
  // ...
複製代碼

配置就完成了，咱們再來測試下。

在 src 目錄下分別建立 hello1.vue 和 hello2.vue 文件：

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

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

而後建立一個 styles 目錄，並在其中新建存放全局變量的文件 _var.scss:

$green: rgb(41, 209, 41);
$red: rgb(177, 28, 28);
複製代碼

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

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
  }
});
複製代碼

從新運行項目就能夠了。

有做用域的 style

單文件組件中爲咱們提供了一個很是便利的功能，就是當 style 標籤添加 scoped 屬性時，標籤內的樣式將只做用於當前組件中的元素。

接着上面的例子，運行後會發現 hello1.vue 中的 h1 顏色並非想要的 $green 色，而是被 hello2.vue 中的樣式覆蓋了。因而分別在 hello1.vue 和 hello2.vue 的 style 標籤上添加 scoped 屬性，以下：

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

<!-- hello2.vue -->
<style lang="scss" scoped> h1 { color: $red; } </style>
複製代碼

這樣一來咱們的兩個 h1 標籤顏色都顯示正常了。

自定義塊

在編寫某些開源組件時，有時候咱們須要同時維護多個組件和組件說明，可是每次修改就要同時修改 .vue 和 .md 文件，至關麻煩。.vue 文件的 自定義語言塊 功能，就容許咱們將 markdown 說明同時寫進 .vue 文件中，而後經過插件將其說明部分單獨提取到相應的 .md 文件中，這樣就能夠同時維護說明文檔和組件功能了。

好比咱們將 hello1.vue 文件修改以下：

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

而後修改 webpack.config.js 配置：

const path = require('path');
// 引入相關插件
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: {
      // 由於咱們這裏用的是 require 引入方式，因此應該使用vue.common.js/vue.js/vue.min.js
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    // 這裏定義 webpack-dev-server 開啓的web服務的根目錄
    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 導出 text 插件，和 raw-loader，分別都安裝下就行。

而後運行構建命令 npm run build，等運行結束，根目錄下會同時生成一個 docs.md 文件，這就是咱們想編寫的說明文檔。

總結

關於 單文件組件 就到這裏，實際上 vue-loader 在處理 .vue 文件時，還有不少強大的功能，咱們這裏只是帶着你們感覺通常項目中如何使用，同時解釋了下相關使用原理說明，更多的功能，建議閱讀 vue-loader官方文檔 。

源碼在此

專題目錄

You-May-Not-Know-Vuejs

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程