vue-loader和單頁組件介紹

1、Vue Loader介紹

　　Vue Loader 是一個 webpack 的loader，它容許你以一種名爲 單文件組件（SFCs）的格式撰寫 Vue 組件。官方文檔地址以下所示：

　　Vue Loader v15及以上版本官方文檔地址

　　Vue Loader v14 或更早的版本官方文檔地址

一、vue-loader 特性

• 默認支持 ES2015；
• 容許對Vue組件的組成部分使用其餘 webpack loader，好比對<style> 使用Sass 和對 <template> 使用 Jade;
• 將 <style> 和 <template> 中的靜態資源看成模塊來對待，並使用 webpack loader 進行處理；
• 對每一個組件模擬出 CSS 做用域；
• 支持開發期組件的熱重載。

　　簡言之，編寫 Vue.js 應用程序時，組合使用 webpack 和 vue-loader 能帶來一個現代、靈活並不是常強大的前端工做流程。

2、項目示例

一、項目準備和組件安裝

　　將 webpack-dev-server 項目複製爲 single-file，安裝 vue-loader 組件：

$ npm install vue-loader@14.2.4 -D

　　安裝vue的模板解析器: vue-template-compiler，注意要安裝對應的版本號，才能適配。

$ npm install vue-template-compiler@2.5.17 -D

二、在webpack中配置vue-loader

　　這裏是在webpack.dev.config.js中配置vue-loader：

// node.js中內容模塊
var path = require('path');

module.exports = {
    // entry入口
    entry: {
        main: './src/main.js'
    },
    // output出口
    output: {
        path:path.resolve('./dist'),  // 相對轉絕對
        filename: './bundle.js'
    },
    watch:true,
    // 模塊中的loader
    module:{
        loaders:[
            {
                test:/\.css$/,  // css結尾的
                loader:'style-loader!css-loader'  // 依次識別
            },
            {
                test:/\.vue$/,
                loader:'vue-loader'
            }
        ]
    }
}

三、Vue組件規格

　　*.vue 文件是用戶用 HTML-like 的語法編寫的 Vue 組件。每一個 *.vue 文件都包括三部分：組件結構（template—>html）、業務邏輯（script—>js）、組件樣式（style—>css）。

　　vue-loader 是一個webpack的loader，能夠將用上面*.vue格式編寫的*.vue組件轉換爲 javascript 模塊。

　　將App.js改寫爲App.vue。

<template>
    <!-- template裏必定是閉合標籤 -->
    <div class="app">
        <h3>{{ msg }}</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                msg: '學習單頁組件!'
            }
        },
        methods:{

        },
        computed:{

        }
    }
</script>

<style>
    h3 {
        color: green;
    }
    .example {
        color: red;
    }
</style>

　　執行npm run dev，自動打開瀏覽器：http://localhost:8081/ 就訪問到剛剛寫好的App.vue頁面了。

　　

三、建立並掛載子組件

（1）建立子組件header

<template>
    <div>
        <h3>{{att}}</h3>
    </div>
</template>

<script>
    export default {   // 組件拋出
        name: "Header",
        data() {
            return {
                att: "中美貿易戰"
            };
        },
    };
</script>

<style lang="css" scoped>

</style>

 　　組件建立完成後拋出。

（2）掛載子組件

　　在App.vue文件中引入並掛載子組件：

<template>
    <!-- template裏必定是閉合標籤 -->
    <div class="app">
        <h3>{{ msg }}</h3>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <Header/>
    </div>
</template>

<script>
    // 1.導入組件
    import Header from './Header.vue'
    export default {
        data () {
            return {
                msg: '學習單頁組件!'
            }
        },
        methods:{

        },
        computed:{

        },
        // 2.使用components掛載組件
        components:{
            Header
        }
    }
</script>
<style> /* 對全局樣式起做用 */
    h3 {
        color: green;
    }
    .example {
        color: red;
    }
</style>

 

　　顯示效果以下所示：

　　

　　注意：vue組件中的style標籤標有scoped屬性時，代表style裏的css只對當前組件的樣式起做用 。