前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >在Vue的webpack中结合runder函数

在Vue的webpack中结合runder函数

作者头像
Dream城堡
发布2018-12-12 16:21:11
1.2K0
发布2018-12-12 16:21:11
举报
文章被收录于专栏:Spring相关Spring相关

在Vue的webpack中结合runder函数

1.引入:

代码语言:javascript
复制
<h1>下面是vue的内容:</h1>

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

2.main.js

代码语言:javascript
复制
//默认无法打包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中加入

代码语言:javascript
复制
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 : {

    ...

}

}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.12 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 在Vue的webpack中结合runder函数
    • 1.引入:
      • 2.main.js
        • 3.拉取相关的loader
          • 4.在webpack.config.js中加入
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档