Vue.js新手入门：调用不存在模板报错，刷新页面才发现问题

嘿，作为刚入门Vue的新手，遇到这个问题太正常啦，我来帮你理清楚原因和解决办法～

为什么会出现这个报错？ #

你已经引入了Vue的CDN，但目前的问题出在这两点：

• 页面里没有给Vue指定挂载目标（也就是Vue要接管控制的DOM元素）
• app.js是空的，完全没有初始化Vue实例，Vue启动时找不到对应的模板/挂载点，自然就抛出错误了。至于刷新才注意到错误，大概率是页面首次加载时资源加载顺序的问题，刷新时Vue的初始化检查触发得更直接，错误就显现出来了。

一步一步搞定问题 #

1. 修改index.html，添加Vue挂载容器

在<body>里新增一个带id的div，作为Vue的专属挂载目标：

<html>
<body>
  <!-- 给Vue留个挂载的位置 -->
  <div id="app">{{ message }}</div>
  
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="./app.js"></script>
</body>
</html>

这里的{{ message }}是Vue的插值语法，用来展示数据，后面会用到它。

2. 在app.js里初始化Vue实例

给空的app.js添上最基础的Vue初始化代码：

// 创建Vue实例，绑定到刚才的div上
new Vue({
  el: '#app', // 指定挂载目标的id
  data: {
    message: 'Hello Vue!' // 对应上面插值的内容
  }
});

3. 重启http-server试试

现在重新启动你的http-server，访问页面应该就能正常显示「Hello Vue!」，也不会再报模板不存在的错误了。

额外小提示 #

• Vue实例的el选项必须对应页面上真实存在的DOM元素id/class，不然还是会找不到挂载点报错。
• 如果只是想快速测试最简单的Vue效果，也可以把Vue代码直接写在index.html的script标签里，但分开写app.js会更规范哦～

内容的提问来源于stack exchange，提问作者S7_0