开发者学堂课程【前端自动化构建工具 Webpack：在 Vue 中结合 render 函数渲染指定的组件到容器中】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/587/detail/8229
在 Vue 中结合 render 函数渲染指定的组件到容器中
在 runtime_only 中怎样渲染一个组件
1）在 webpack 中尝试使用 vue：
注意:在 webpack中，使用 import Vue from 'vue' 导入的Vue构造函数,功能不完整,只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式;
2）在 render 中放一个组件
实例代码：
<DOCTYPE html>
<html leng="en"><!--这是容器-->
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width,initial-scale=1.0"><meta http-equiv="x-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{(msg}}</p>
</div>
</body>
</html>
Var login={
Template:’<h1>这是login组件，是使用网页中形式创建出来的组件</h1>’
<mataname=”viewport”content=”width=device-width,initial-scale=0.1”>
<mata http-equiv=”X-UA-Compatibel” content=”ie=edge”>
<title>Document<title>
<script src=”./lib/vue-2.4.0.js”></script>
</head>
<body>
<div id=”app”>
<p> {{msg}}</p>
<login></login>
<div>
</body>
</html>
代码运行结果：
所以这种方式可行。
如果把网页中的形式把它注释掉，用 runtime-only 的方式：import vue from ‘vue’//import vue from’../node_ modules/vue/dist/vue .js’
运行结果：
（显然不行）
报错：你正在使用 runtime-only 的方式构建这个包，包里并没有提供传统的形式。
3）在 webpack 中尝试使用 Vue :注意:
在 webpack 中，使用 import Vue from 'vue' 导入的Vue 构造函数,功能不完整，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方式;
4）回顾包的查找规则:找项目根目录中有没有node_ modules 的文件夹
·在node_ modules 中根据包名，找对应的vue 文件夹
·在vue文件夹中，找一个叫做 package.json 的包配置文件
·在 package.json 文件中，查找一个 main 属性[main 属性指定了这个包在被加载时候，的入口文件]
5）在 runtime-only 中怎样渲染一个组件：
1.单独在 src 目录下定义一个 login.vue 的 vue文件。.vue文件就是纯粹的组件，它里面由三部分构成：
<template>
<div>
<h1>这里是登录组件，使用.Vue文件定义出来的<h1>
(.vue就是一个纯粹的组件)
</div>
<template>
<script>
</script>
<style>
</style>
2.怎样把 login.vue 渲染到 index.html 文件中去
1.导入 login 组件
·Import login from ‘./login.vue’得到组件的模板对象
·默认 webpack 无法打包.Vue 文件,需要安装相关的 loader，把。Vue 文件解析到js:
cnpm i vue-loader vue-template-compiler-D，先安装这两个包
·.vue出来的文件解析不了，所以需要新增loader配置项，把.vue 文件显示成js文件。
·在配置文件中，新增 loader 配置项：
{text:/\.vue$/,use:’vue:-loader’}（处理.Vue文件的loader
）
Import login from'./login,vue‘{test:/\.vue$/,use’loader’}
Var xm = mew vue ({
el:’#app’,
Data:{
Msg:’123’
},
//components:{
//login
//}
2）在 vm 实例以标签形式去注册一个组件再引入就不行，再传统页面里面，先注册一个组件，然后以标签形式就能放到页面中去，除了以标签形式注册的形式以外，也可以用 rander 去渲染。
举例：
Render:function(createElements){//在 webpack 中，如果想要通过 vue,把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现}
returncreateElements(login)
})
运行结果：
3）如果想通过 vm 实例渲染一个组件的话，就只能用 rander 函数。
varVm=newVue((
el:'#app',如果只有一个参数，小括号是可以省略的/
data:{
msg:'123'
},
//components:{
//login
//}
render:function(createElements) /
return createElements (login)
}
}}
Render:c=> c(login):通过render函数来获得一个形参，形参一开始调用，就把login渲染到页面上去。
