如何在webpack中渲染一个vue的组件

在webpack构建的项目中渲染一个vue的组件有两种方法：
方法一：
1，在main.js中进行以下导入：

import Vue from "../node_modules/vue/dist/vue"

2，在vm实例中注册一个组件

 components:{
    login:{ 
    template:'<h1>这是一个网页组件定义111</h1>'
}
 }

方法二：
1，安装vue-loader vue-template-compiler

npm i vue-loader vue-template-compiler -D

2，在webpack.config.js中module节点中配置vue-loader的匹配规则

  {test:/\.vue$/,use:'vue-loader'}

由于vue-loader 的版本是15.x 以上，所以还需要进行一下配置
在webpack.config.js的头部定义vue-loader-plugin，定义方式可以有两种

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

或者

const { VueLoaderPlugin } = require('vue-loader');

然后还在此文件中配置 plugins 节点

  new VueLoaderPlugin()

3，在src目录下新建一个login.vue的文件，并在其中定义一个组件

    <template>
    <div>  <h1> 这是一个login.vue的一个组件</h1> </div>
  </template>
    <script> 这里写逻辑代码</script>
     <style>这里写模板中样式 </style>

4，在main.js中导入相应的包及login组件

import Vue from "vue"
import login from './login.vue'

5，在vm实例中，与methods平级定义render属性，返回要定义的组件

render:function(createElements){
        return createElements(login)
    }