在webpack中使用vue的一些注意事项

最新推荐文章于 2022-05-26 11:22:44 发布

薛定谔的猫ゼ

最新推荐文章于 2022-05-26 11:22:44 发布

阅读量104

点赞数

分类专栏： Vue 文章标签： vue nodejs

本文链接：https://blog.csdn.net/qq_44832949/article/details/108386483

版权

Vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、在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会找不到挂载点

薛定谔的猫ゼ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在webpack中使用vue的一些注意事项

一、在webpack中安装vuenpm install vue -S //在运行时需要用到的，也就是生产环境二、使用vue在main.js中引入vue// 引入vueimport Vue from "vue";const app = new Vue({ el: "#content", data() { return { message: "我在main.js中通过模块化的方式导入了vue" } }, methods: { getMs
复制链接

扫一扫