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