vue-loader和单页组件介绍

一、Vue Loader介绍

　　Vue Loader 是一个 webpack 的loader，它允许你以一种名为 单文件组件（SFCs）的格式撰写 Vue 组件。官方文档地址如下所示：

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

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

1、vue-loader 特性

• 默认支持 ES2015；
• 允许对Vue组件的组成部分使用其他 webpack loader，比如对<style> 使用Sass 和对 <template> 使用 Jade;
• 将 <style> 和 <template> 中的静态资源当作模块来对待，并使用 webpack loader 进行处理；
• 对每个组件模拟出 CSS 作用域；
• 支持开发期组件的热重载。

　　简言之，编写 Vue.js 应用程序时，组合使用 webpack 和 vue-loader 能带来一个现代、灵活并非常强大的前端工作流程。

二、项目示例

1、项目准备和组件安装

　　将 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

2、在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'
            }
        ]
    }
}

3、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页面了。

　　

3、创建并挂载子组件

（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只对当前组件的样式起作用 。