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