先安装一波插件
npm i vue-loader vue-template-compiler -D
在webpack.config.js中配置.vue后缀的匹配规则
const VueLoaderPlugin = require('vue-loader/lib/plugin');
modules.exports = {
plugins : [
new VueLoaderPlugin();
],
modules :{
rules : [
{test : /\.vue$/, use : 'vue-loader'}
]
}
}
在src目录下新建login.vue文件
<template>
<div>
<h1>这是登陆组件</h1>
</div>
</template>
在main.js中,必须使用render函数,而不能使用components
import Vue from '../node_modules/vue/dist/vue.js'
import login from './login.vue'
var vm = new Vue({
el : '#app',
data : {
msg : 123
},
render : function (createElement){
return createElement(login);
}
})