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實例控制的區域