您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— webpack中使用Vue

《和小米一起学Vue.js》— webpack中使用Vue

[ 孤狼 | 2022-07-30 02:54:38 | Vue | 147°C | 0条评论 ]

在使用webpack打包的时候,需要将项目中的vue.js直接打包进项目,这样就可以将项目发布到任何地方运行。


安装vue

通过下面代码来安装vue到项目目录(由于目前已经发布了vue3 所以需要指定版本)

npm install vue@2 --save

需要注意,这里不在使用开发环境,因为vue是需要在生产中也要用的文件,所以没有加开发的--dev 符号    



引用vue

安装完vue之后,需要在js文件里引用vue才能使用

import Vue from "vue";

const app = new Vue({
el:'#app',
data:{
ss:'这是一条信息'
}
})



修改 index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script src="./dist/bundle.js"></script>
<div id="app">{{ss}}</div>
</body>
</html>



vue编译器

默认采用npm安装之后的vue是runtimeonly模式,可以运行但是无法编译模板,所以需要将vue切换到运行时+编译器的版本,通过webpack.config.js文件来修改

module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}



打包运行

输入命令打包  

npx webpack



代码下载

下载地址:  密码:hhah


转载请注明出处:http://gl.paea.cn/n.php?n=185
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索