在Vue的webpack中結合runder函式

1.引入:

<h1>下面是vue的內容:</h1>

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

2.main.js

//預設無法打包vue檔案 需安裝vue-loader
import Vue from  'vue'
import  login from './login.vue'

var vm = new Vue({
    el:"#app",
    data:{
        msg:'123'
    },
    // components:{
    //     'login':login
    // },
    render:function (createElement) { //在webpack中如果需要vue放到頁面中展示 vm例項中的render函式可以實現
        return createElement(login)
    }
    
})
 

3.拉取相關的loader

npm i vue-loader vue-template-compiler -D

4.在webpack.config.js中加入

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {

    devtool: "sourcemap",

    entry: './js/entry.js', // 入口檔案

    output: {

        filename: 'bundle.js' // 打包出來的wenjian

    },

    plugins: [

        // make sure to include the plugin for the magic

        new VueLoaderPlugin()

    ],

    module : {

    ...

}

}