在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"
}
}
}