在webpack中配置vue.js

在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"
}
} }
上一篇:shell编程系列18--文本处理三剑客之awk动作中的条件及if/while/do while/for循环语句


下一篇:如何用一个语句判断一个整数是不是二的整数次幂——从一道简单的面试题浅谈C语言的类型提升(type promotion)