一、页面引入方式：

组件的注册引入：

<!DOCTYPE html>
  <html lang="en">
    <head>    
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script src="../node_modules/vue/dist/vue.js"></script>    
        <script src="../node_modules/jquery/dist/jquery.js"> </script>
  </head>
  <script>   
      $(function () {  
        //保证页面加载完后才加载js，不然#app会报错找不到      
        //组件定义        
        const login = {           
          template:"<h2>vue的使用</h2>"    
        }      
        var vm = new Vue({    
            el:"#app",          
            data:{},        
            components:{  //组件的注册      
              login         
            }      
        })  
      })
  </script>
  <body>
    <div id="app">
      //组件的使用 
      <login></login>
  </div>
  </body>
</html>

采用render函数来渲染组件：

<!DOCTYPE html>
  <html lang="en">
    <head>    
        	<meta charset="UTF-8">  
          <title>Title</title>   
          <script src="../node_modules/vue/dist/vue.js"></script> 
          <script src="../node_modules/jquery/dist/jquery.js"></script>
    </head>
  <script> 
      $(function () {  
      //保证页面加载完后才加载js，不然#app会报错找不到
      //组件定义       
      const login = {      
        template:"<h2>vue的使用</h2>"    
      }      
      var vm = new Vue({      
          el:"#app",          
          data:{},      
          render:function(createElements) { //render函数渲染组件并输出替换掉app容器           
            return createElements(login);         
          }       
      	})  
      })
  </script>
  <body>
    //render渲染方式此时会将app这个容器完全替换
    <div id="app"></div>
  </body>
</html>

两者的区别：render函数渲染会替换掉app容器，html源码中是没有div标签了，而组件注册方式会将组件放于容器中

二、webpack引入方式

vue的安装：

cnpm i vue -D

1、组件的注册引入

import Vue from 'vue'默认导入的是dist/vue.runtime.common.js这个js文件（vue/package.json中的“main"参数指定），此文件属于runtime-only模板，功能不全，因此我们需要指定其他的js:

1.  import Vue from  'vue/dist/vue.js' 
2.  webpack.config.js中增加节点   
     resolve: {        
       alias: {   
         //vue导包别名    
         'vue#39;:'vue/dist/vue.js'       
       }     
     } 
3.修改vue包中的webpackage.json中的'main'字段 推荐第二种方式

import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 
//指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from  'vue/dist/vue.js' 
$(function () { 
  //页面加载完后才会加载    
  var login = {  
    //定义组件    
    template:"<h2>vue的使用</h2>"   
  }    
  var vm = new Vue({  
    el:"#app",   
    data:{},        
    method:{},        
    components:{ 
      //组件注册 
      login     
    } 
  })
}) 

html中
  <div id="app">  
    <login></login>
  </div>

此方式同前面一样，组件注册方式将组件插入到了容器中。

2、render函数渲染方式

import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式， 
//指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from  'vue/dist/vue.js'
$(function () { 
  //页面加载完后才会加载    
  var login = {  
    //定义组件        
    template:"<h2>vue的使用</h2>"  
  }    
  var vm = new Vue({    
    el:"#app",       
    data:{},     
    method:{},      
    render:function (createElements) { //组件渲染     
      return createElements(login)      
    }  
  })
}) 

html中，此div会被组件完全替换
  <div id="app">  
    
   </div>

此时，html中的app容器会被组件完全替换

三、使用.vue自定义组件文件

组件定义我们现在使用后缀为.vue的组件文件来定义，此时，由于webpack原生只支持.js，因此我们要使用第三方loader来支持.vue的解析。安装第三方loader:

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

webpack.config.js中配置规则：

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

注：由于vue15.0之后需要手动添加plugin配置，webpack.config.js中

//配置VueLoaderPlugin插件
//注册const后的大括号
const {VueLoaderPlugin} = require('vue-loader') 

module.exports = {
  ....
  ....   
  plugins: [      
  new VueLoaderPlugin()  
  ]
}

定义组件文件login.vue

<template>    
 		 <h1>这是vue自定义组件渲染</h1>
</template>
<script>
</script> 
<style>
</style>

main.js引入login.vue

import $ from 'jquery'
//vue模块的package.json的main字段默认为runtime（运行）模式，
//指向了"dist/vue.runtime.common.js"位置。
//修改为compiler（模板）模式
import Vue from  'vue/dist/vue.js'
//引入自定义.vue组件文件
import login from './vue/login.vue'
$(function () {  
  var vm = new Vue({     
    el:"#app",     
    data:{},        
    method:{},   
    components:{  
      //组件注册方式，添加到容器中
      login     
    }      
    //组件渲染方式，替换容器   
    // render:function (createElements) {      
    //     return createElements(login)       
    // }   
  })
})

四时宝库

程序员的知识宝库

关于Vue2.0的引入方式-页面引入与webpack构建引入