一、渲染组件

1. 在页面中渲染基本组件

使用components进行渲染得到

<!DOCTYPE html>
<html lang="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>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p>33333</p>
    <login></login>
  </div>

  <script>

    var login = {
      template: '<h1>这是登录组件</h1>'
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      components: {
        login
      }
    });
  </script>
</body>

</html>

使用render
这里 return 的结果，会替换页面中 el 指定的那个容器

<!DOCTYPE html>
<html lang="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>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <p>444444</p>
  </div>

  <script>

    var login = {
      template: '<h1>这是登录组件</h1>'
    }

    // 创建 Vue 实例，得到 ViewModel
    var vm = new Vue({
      el: '#app',
      data: {},
      methods: {},
      render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
        return createElements(login)
        // 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
      }
    });
  </script>
</body>

</html>

注意

使用components相当于之前使用的插值表达式，不会清空原有的内容，而render（相当于v-text）会清空原有的内容。
一个app只能有一个render，而components可以放多个

2. 在vue中结合render函数渲染指定的组件到容器中

在runtime-only中渲染组件
在我之前有一一篇博客中解释了在什么情况下会出现runtime-only
https://blog.csdn.net/Welkin_qing/article/details/81945353
就是在main.js中直接引入vue，且没有在webpack.config.js中声明

这个时候我们需要建一个.vue 的组件（例：login.vue）；这个是由三部分组成的

<template>
  <div>
    <h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
  </div>
</template>

<script>

</script>

<style>

</style>

在main.js中导入.vue组件

import login from './login.vue'

安装第三方包
默认，webpack 无法打包 .vue 文件，需要安装相关的loader：

cnpm i vue-loader vue-template-compiler -D

在配置文件中，新增loader配置项

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

使用render渲染，且在页面中使用<login></login>

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },

  //render: c => c(login) 或者使用下面的方法
  render: function (createElements) { 
  // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
    return createElements(login)
})

总结梳理： webpack 中如何使用 vue :

安装vue的包： cnpm i vue -S
由于在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D
在 main.js 中，导入 vue 模块 import Vue from ‘vue’
定义一个 .vue 结尾的组件，其中，组件有三部分组成： template script style
使用 import login from ‘./login.vue’ 导入这个组件
创建 vm 的实例 var vm = new Vue({ el: ‘#app’, render: c => c(login) })
在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

二、在.vue中定义自己的方法

Node 中向外暴露成员的形式：
在Node中使用 var 名称 = require(‘模块标识符’)导入
使用 module.exports 和 exports 来暴露成员

module.exports = {}

在 ES6中，也通过规范的形式，规定了 ES6 中如何导入和导出模块

ES6中导入模块，使用 import 模块名称 from ‘模块标识符’ import ‘表示路径’
在 ES6 中，使用 export default 和 export 向外暴露成员：

1. 使用export default

var info = {
  name: 'zs',
  age: 20
}

export default info

export default {
  address: '北京'
}

注意

export default 向外暴露的成员，可以使用任意的变量（自定义变量）来接收
在一个模块中，export default 只允许向外暴露1次
在一个模块中，可以同时使用 export default 和 export 向外暴露成员

2. export

export var title = '小星星'
export var content = '哈哈哈'

注意

使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做【按需导出】
export 可以向外暴露多个成员，同时，如果某些成员，我们在 import 的时候，不需要，则可以不在 {} 中定义
使用 export 导出的成员，必须严格按照导出时候的名称，来使用 {} 按需接收；
使用 export 导出的成员，如果就想换个名称来接收，可以使用 as 来起别名；

接收

import m222, { title as title123, content } from './test.js'
console.log(m222)//接收export default
console.log(title123 + ' --- ' + content)

Vue之在vue中使用render