4. vue 常用 render() 渲染 组件到指定容器

更新到 webpack 4.x很多插件使用方式，发生了改变，经常报错不知道哪里问题。下面记录下自己使用render()记录：

1.创建 .vue 组件模板：

<template>
  <div>
      <h1>这是登陆组件，使用 .vue 文件渲染出来的</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
    }
  },
  methods: {
  },
  components: {
  }
}
</script>
<style>
</style>

2.安装解析vue组件loader：

• yarn add vue-loader vue-template-compiler

• 在配置文件配置：
  VueLoaderPlugin()这个插件是必须的!它的职责是将你定义过的其它规则复制并应用到 .vue 文件里相应语言的块。例如，如果你有一条匹配 /.js$/ 的规则，那么它会应用到 .vue 文件里的 <script> 块。

const VueLoaderPlugin = require('vue-loader/lib/plugin');
plugins:[
        new VueLoaderPlugin()     请务必引入这个插件！！！
    ],
    module:{
        rules:[
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    }
    ,

3.在main.js配置render()：

• 先引入模板：import login from './login.vue'
• 配置render():

render(comp) {   return comp(login)  },
可以箭头函数表示：
render:comp=>comp(login)