webpack中使用vue

先安装一波插件

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);
    }
})