在Vue的webpack中结合runder函数

2024-10-14 01:07:02

在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 : {

    ...

}

}

最新文章

热门文章