在webpack中使用vue的一些注意事项
程序员文章站
2022-07-14 20:38:10
...
一、在webpack中安装vue
npm install vue -S //在运行时需要用到的，也就是生产环境
二、使用vue
-
在main.js中引入vue
// 引入vue import Vue from "vue"; const app = new Vue({ el: "#content", data() { return { message: "我在main.js中通过模块化的方式导入了vue" } }, methods: { getMsg() { console.log(this.message); } } }) -
在index.html中设置挂载点
<div id="content"> <h3 v-text="messge"></h3> <p>{{getMsg()}}</p> </div> -
执行webpack打包命名后，运行测试
报错
You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.原因: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TXlz0yE7-1599121821562)(F:\markdown笔记\图片\image-20200903160411703.png)]
解决办法: 在webpack.config.js配置文件中加入
resolve: { // alias 别名 alias: { "vue$": "vue/dist/vue.esm.js" //设置新的解析文件 } }
三、注意
在index.html中.应该以下面的方式写
<body>
<div id="app">
<h3 v-text="message"></h3>
<p>{{getMsg()}}</p>
</div>
<script src="./dist/bundle.js"></script> //函数导入应该写在vue挂载点的后面
</body>
如果将写在head中，会报如下错误
vue.esm.js:629 [Vue warn]: Cannot find element: #app
vue.esm.js:629 [Vue warn]: Cannot find element: #app
原因：js在dom文档加载之前就执行了vue数据渲染,此时的dom结构还未加载，所以vue会找不到挂载点
上一篇： VUE 使用注意事项：