webpack和vue使用

使用入门

    var login = {
      template:'<h1>this is login component</h1>'
    }

使用render函数

      render:function(createElements){//一种方法，调用它会调用指定的模板渲染成HTML
        return createElements(login)
      }

他是Vue实例中的一个属性

和原始的直接使用组件标签的形式不同的是，render会将div中的东西清空将自己放进去，但是使用标签的形式不会，而是直接放在对应的后面

webpack中使用vue

1、首先安装vue

cnpm i vue -D

2、导入vue

import Vue from 'vue'

这种导入功能不完整，只提供运行时候的功能，没有提供web情况的功能，使用下面的形式

直接在webpack.config.js中设置导入包时候的路径

var vm =new Vue({

　　el:'#app',

　　data: {},

})

webpack是无法使用.vue文件需要和之前的一样安装vue相关的loader

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

配置文件中配置相关的项

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

使用render函数渲染，直接import方式的没有在配置文件中配置alias的只能使用render函数渲染

render函数的终极简写方式

render: c=>c(login)
相当于
render: function(createElements){
     return createElements(login)  
}

总结webpack使用vue函数

1、安装vue包：cnpm i vue -D

2、由于webpack推荐使用.vue组件模板定义组件，所以安装能解析这种文件的loader

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

3、在mian.js文件中导入vue模板，import Vue from 'vue'

4、定义一个.vue结尾的文件，有三部分组成，

5、使用import导入组件

6、床vm实例，其中使用render函数渲染render: c=>c(login)

7、在页面中创建一个id是app的实例，作为vm实例控制的区域