由于webpack 打包不了vue文件，所以需要第三方的loader，他的安装如下：
1、运行：
npm i vue-loader vue-template-compiler -D2、在main文件导入vue
import Vue from 'vue';3、定义一个 .vue后缀名的文件组件，组件有三部分组成：template,style,script
4、在mian文件导入组件
import login form './login.vue';5、在index.html创建一个#app的div
6、用render函数渲染login.vue组件；
main代码：
import Vue from 'vue';
import login from './login.vue';
var vm=new Vue({
el:'#app',
data:{
message:123
},
render:function(cr){
return cr(login);
}
});login.vue 代码：
<template>
<div>
<h1>我是登陆组件</h1>
</div>
</template>
<style></style>
<script></script>index.html代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
</html>note：最后我们一定要记得配置webpack.config.js文件，在rules规则下面加上：
扫描二维码关注公众号，回复：
4960545 查看本文章
//处理vue文件的loader
{test:/\.vue$/,use: 'vue-loader'}