在Vue的webpack中结合runder函数
Posted 城南少年与猫
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在Vue的webpack中结合runder函数相关的知识,希望对你有一定的参考价值。
在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 : {
...
}
}
以上是关于在Vue的webpack中结合runder函数的主要内容,如果未能解决你的问题,请参考以下文章
Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
VUE学习笔记:20.模块化开发之webpack结合VUE使用
在 vue.js(和 webpack)中结合 v-bind 和 v-for 忽略 v-bind