码迷,mamicode.com
首页 > Web开发 > 详细

在webpack中配置vue.js

时间:2018-11-12 21:45:23      阅读:248      评论:0      收藏:0      [点我收藏+]

标签:报错   语法   undle   type   div   script   style   dev   1.0   

在webpack中配置vue.js

这里有两种在webpack中配置vue.js的方法,如下:

1.在main.js中引入vue的包:

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>Title</title>
    <style>
    </style>
    <!--注意不推荐在这里引入任何包和css文件-->
    <!--由于es6语法浏览器不识别 会报错-->
    <!--<script src="../dist/bundle.js"></script>-->
    <!--<script src="/bundle.js"></script>-->

</head>
<body>

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

<div id="app">
    <p>{{msg}}</p>
</div>
</body>
</html>

main.js:

//在webpack中使用vue
//注意在webpack中 使用 import Vue from  'vue' 导入的vue不完整
import Vue from  '../node_modules/vue/dist/vue.js'

var vm = new Vue({

    el:"#app",
    data:{
        msg:'123'
    }
})

2.在main.js中引入vue的包使用优雅的import Vue from ‘vue‘方式导入

main.js:

//在webpack中使用vue
//注意在webpack中 使用 import Vue from  'vue' 导入的vue不完整
import Vue from  'vue'

var vm = new Vue({

    el:"#app",
    data:{
        msg:'123'
    }
})

这里需要修改下相应的webpack.config.js

webpack.config.js:

module:{
    
    resolve: {
        alias:{//设置vue被导入时候的包的路径
            "vue$":"vue/dist/vue.js"
        }
    }
         
}

在webpack中配置vue.js

标签:报错   语法   undle   type   div   script   style   dev   1.0   

原文地址:https://www.cnblogs.com/charlypage/p/9949256.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!