Vue单文件组件与vue-loader

单文件组件

Vue.js是一个渐进式的js框架，在使用wewbpack构建Vue项目时，可以使用一种新的构建模式：

.vue单文件组件。

就是一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对.vue格式的文件进行处理。

一个.vue文件一般包含3部分，即<template>、<script>和<style>

<template之间的代码就是该组件的模板HTML,style之间的是CSS样式。

安装插件

使用.vue文件需要先安装vue-loader、vue-style-loaer等加载器并做配置。如果要使用ES6的语法，还需要安装babel和babel-loader等加载器。

使用npm逐个安装：

npm install --save vue

npm install --save-dev vue-loader

npm install --save-dev vue-style-loader

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

npm install --save-dev vue-hot-reload-api

npm install --save-dev babel

npm install --save-dev babel-loader

npm install --save-dev babel-core

npm install --save-dev babel-plugin-transform-runtime

npm install --save-dev babel-preset-es2015

npm install --save-dev babel-runtime

修改配置文件

安装完成后，修改配置文件webpack.config.js来支持对.vue文件以及ES6的解析：

var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
    entry: {
        main: './main'
    },
    output: {
        path: path.join(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'main.js'
    },
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
                options: {
                    loaders: {
                        css: ExtractTextPlugin.extract({
                            use: 'css-loader',
                            fallback: 'vue-style-loader'
                        })
                    }
                }
            },
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    use: 'css-loader',
                    fallback: 'style-loader'
                })
            }
                ]
    },
    plugins: [
        new ExtractTextPlugin("main.css")
    ]
};

module.exports = config;

在项目目录下新建一个名为.babelrc的文件，并写入babel的配置，webpack会依赖此配置

文件来使用babel来编译ES6的的代码：

{
    "presets": ["es2015"],
    "plugins": ["transform-runtime"],
    "comments": false
}

使用.vue文件

配置好上面这些后，就可以使用.vue文件了，记住每个.vue文件代表一个组件，组件之间相互依赖。

在项目目录下新建一个app.vue的文件并写入以下内容：

<template>
    <div>
        <v-title title="Vue组件化"></v-title>
        <v-button @click="handleClick">点击按钮</v-button>
        <p>
            <img src="./images/image.png" style="width: 200px;">
        </p>
    </div>
</template>
<script>
    import vTitle from './title.vue';
    import vButton from './button.vue';

    export default {
        components: {
            vTitle,
            vButton
        },
        methods: {
            handleClick (e) {
                console.log(e);
            }
        }
    }
</script>

.vue的组件是没有名称的，在父组件使用时可以对它自定义。写好了组件，就可以在入口main.js中使用它了。

打开main.js文件，把内容替换为下面的代码：

import Vue from 'vue';
import App from './app.vue';

new Vue({
    el: '#app',
    render: h => {
        return h(App)
    }
});

执行:

npm run dev

运行项目。