2. 程式人生 > >Vuejs - 單文件組件

Vuejs - 單文件組件

阿新 • • 發佈：2018-06-25
itl tar nod sta env mpi gas const params

為什麽需要單文件組件

在之前的實例中，我們都是通過 Vue.component 或者 components 屬性的方式來定義組件，這種方式在很多中小規模的項目中還好，但在復雜的項目中，下面這些缺點就非常明顯了：

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

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

初識單文件組件

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<template>
  <h2>{{ msg }}</h2>
</template>
<script>
export default {
  data () {
    return {
      msg: ‘Hello Vue.js 單文件組件~‘
    }
  }
}
</script>
<style>
h2 {
  color: green;
}
</style>

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

1
2
3
4
5
6
7
8
9
10
11
 
// 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:

1
2
 
# 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 的核心。

我們再修改 webpack.config.js 配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
module.exports = {
  // ...
  module: {
    // 這裏用來配置處理不同後綴文件所使用的loader
    rules: [
      {
        test: /.vue$/,
        loader: ‘vue-loader‘
      },
      {
        test: /.js$/,
        loader: ‘babel-loader‘
      }
    ]
  }
}

對於 babel 的配置，我們還需在項目根目錄下剛創建 .babelrc 文件來配置 Babel presets 和 其他相關插件，內容如下：

1
2
3
 
{
  "presets": [ "env" ]
}

但是雖然雖然都配置好了，項目還是還是會報錯，報如下錯誤：

1
2
 
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 在安裝的時候，並不會自動安裝（[email protected]+），只會給出相關警告，所以這個需要我們手動安裝的，當然在 .vue 文件中如果需要寫 CSS，也必須用到 css-loader，這個也是在 peerDependencies 中。相關討論：https://github.com/vuejs/vue-loader/issues/1158

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

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

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

使用預處理器

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

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

配置只需兩步：

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    		 
    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‘
                  }
                ]
              }
            }
          },
          // ...
        ]
      }
    }

  2. 給 .vue 文件中的 style 標簽，添加 lang="scss" 屬性。

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

加載全局設置文件

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
// ...
{
  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 文件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
<!-- 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:

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

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

1
2
3
4
5
6
7
8
9
10
11
12
 
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 屬性，如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!-- 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 文件修改如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
<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 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
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 文件，這就是我們想編寫的說明文檔。

Vuejs - 單文件組件

相關推薦

Vuejs - 單文件組件

itl tar nod sta env mpi gas const params 為什麽需要單文件組件 在之前的實例中，我們都是通過 Vue.component 或者 components 屬性的方式來定義組件，這種方式在很多中小規模的項目中還好，但在復雜的項目中，下面這些

vue單文件組件工程，上下全屏翻頁小案例

整體 eight 重要 sset var rtti 執行 src star 轉載請標明出處，以下純手打，不容易~~~ 先來看下效果圖吧，百度發現一款錄屏制作Gif的小工具，叫ScreentoGif ，終於可以上自己的動態效果圖了 接下來看下整個vue文件的完整代碼： &

Vue 2.0 的路由如何從一個單文件組件啟動？

ima ash pre info vue ren pos lod clas import Vue from ‘vue‘; import App from ‘./app.vue‘; import router from ‘./router‘; var app = new

ES6簡單擴展和單文件組件

功能 一點 文件組 修改文件內容 alt 障礙 整體 urn 我們 es6簡介 ECMAScript是JavaScript語言的國際標準，JavaScript是ECMAScript的實現 ES6新特性 多樣化的聲明方式 1. var 2. let 3. const 4

Vue 定義組件模板的七種方式(一般用單文件組件更好)

value 最有 names 標簽 checked render jsf href this 在 Vue 中定義一個組件模板，至少有七種不同的方式（或許還有其它我不知道的方式）： 字符串 模板字面量 x-template 內聯模板 render 函數 JSF

webpack入坑之旅（五）加載vue單文件組件

file loader clu html中 type 修改 mode hid extension 需要什麽？ 在經過前面的四個練習，相信已經對於webapck有了一定的了解，現在我們就來一個綜合案例，進一步加深對於webpack的理解。 首先我們應該思考要解析.vue類型的

vue單文件組件構建vue項目的若幹技巧或建議

一次 out 構建 ins 復用 mobile func 除了 rom 接觸vue一年了，由於早前都是碎片化的學習與練習，缺乏深入的理解與總結，所以感覺收效甚微。最近利用閑暇時間擼了一個基於vue全家桶的天氣應用webapp並做一些項目總結，以鞏固自己所學，加深對vue的理

vue單文件組件實例2：簡單單文件組件

san spa classes back element tle 定義 comm sca ? Introduce.vue： <template> <div class="intro"> 單位介紹 </div> </

Vue之單文件組件的數據傳遞,axios請求數據及路由router

methods ken 種類型 跳轉頁面 字符 方式 沒有 ret tar 1.傳遞數據 例如,我們希望把父組件的數據傳遞給子組件. 可以通過props屬性來進行傳遞. 傳遞數據三個步驟： 步驟1:在父組件中，調用子組件的組名處，使用屬性值的方式往下傳遞數據

vue小項目總結與筆記【二】——vue的單文件組件模板和路由

home out 展現 pat default rip 項目 routes 例如 vue的單文件組件的基本構成是這樣的： <template> <div> 結構： （註意：template裏只能有一層div

認識單文件組件.vue 文件

編輯 描述 響應式 eight res 有一個 文字 list mod vuejs 自定義了一種.vue文件，可以把html, css, js 寫到一個文件中，從而實現了對一個組件的封裝， 一個.vue 文件就是一個單獨的組件。由於.vue文件是自定義的，瀏覽器不認

10-hibernate單表操作-組件屬性

http -h idt wid 文件 技術 set string alt 組件屬性： 實體類中某個屬性屬於用戶自定義的類的對象，比如在實體類中某個屬性是自定義類的對象： 這個Address是一個用戶自定義類。 該自定義類Address定義如下： //地址類 public

開發指南專題九 JEECG微雲快速開發平臺-表單校驗組件ValidForm

兩個 drag 是否 指南 初始 tails axu 形參 fontsize 開發指南專題九：JEECG微雲快速開發平臺表單校驗組件ValidForm 10.表單校驗組件ValidForm 10.1使用入門 1、引入css 請查看下載文件中的style.css，把

C#輕量級配置文件組件EasyJsonConfig

apt src app 模塊 今天 span 知識點 setting 方式 一、課程介紹 一、本次分享課程《C#輕量級配置文件EasyJsonConfig》適合人群如下： 1、有一定的NET開發基礎。 2、喜歡阿笨的幹貨分享課程的童鞋們。 二、今天我們要如何優雅

封裝jQuery下載文件組件

數據 put color 轉換 clas 添加 += append 如果 使用jQuery導出文檔文件 jQuery添加download組件 jQuery.download = function(url, data, method){ if( url &

vue基礎——組件(組件嵌套)

成了 temp tro inf script 分享圖片 pla 創建 spa 介紹 vue中頁面是由組件組成的，即以.vue結尾的文件。 .vue文件由三部分組成，分別是template、script、style。 分別寫html、js、css代碼。 組件之間可以互相嵌套、

底部導航組件組件react-native-tab-navigator的使用

ntop ner 發現 image res png file col ren 組件react-native-tab-navigator的使用1、npm安裝，導入組件react-native-tab-navigatorimport TabNavigator from ‘rea

中間件組件

mixin emp 功能 認證 以及 tex org add 禁用 一：什麽是中間件 二：中間件有什麽用 三：自定義中間件 四：中間件應用場景 五：CSRF-TOKEN跨站請求偽造 六：組件禁用 一：什麽是中間件 介於request與response處理之間的一道處

jquery加載單文件vue組件

gif -h json enter bsp register replace align console /**註冊組件 */ function registerComponent(name){ dm[name] = {}; Vue

使用Vuejs編寫單js組件

title dal mode log con 請求 function icons event 1.引用方式 我們使用Vue進行普通頁面開發卻不使用webpack等技術時，定義組件可以只依賴單js文件進行開發 然後像正常引用js文件那樣進行引用 <sc