webpack 安装vue-loader

18.安装webpack 默认不识别 .vue结尾文件，需要安装loader

安装

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.vue/, use: 'vue-loader'}  //处理.vue结尾的文件
        ]
    },

cnpm i vue-loader vue-template-compiler -D

配置webpack.config.js

 const VueLoaderPlugin =  require('vue-loader/lib/plugin');

    plugins: [
        new VueLoaderPlugin()
    ],

    module: { //这个节点用于配置所有第三方模块，加载器
        rules: [
            {test: /\.vue/, use: 'vue-loader'}  //处理.vue结尾的文件
        ]
    },

 在src下 新建login.vue 内容如下

<template>
	<div>
		<h1>这是用 .vue文件组件</h1>
	</div>
</template>

<script>

</script>

<style>

</style>

在index.js中加入

import login from './login.vue'

var vm = new Vue({
	el: '#app',
	data: {
		msg: 'vue 来了'
	},
	render: function(createElements){
		return createElements(login)
	}
})

render会覆盖div#app的全部内容 

来源：CSDN

作者：zhangleia

链接：https://blog.csdn.net/zhangleia/article/details/103495230