vue文件怎么打开成网页

作者：洃铯哖輪发布日期:2026-05-28 浏览:76

<!DOCTYPE html>
<html>
<head>
  <title>Vue 示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
  <div id="app">
    {{ message }}
  </div>

  <script>
    // 创建一个 Vue 实例
    new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue!'
      }
    });
  </script>
</body>
</html>

解释说明：

HTML 结构：这个 HTML 文件包含了一个 div 元素，其 id 为 app。这是 Vue 实例挂载的元素。
引入 Vue.js：通过 <script> 标签从 CDN 引入 Vue.js 库。
Vue 实例：在 <script> 标签中创建了一个新的 Vue 实例，并将其挂载到 #app 元素上。data 属性中的 message 变量会在页面上显示为 "Hello Vue!"。

要打开这个文件为网页，只需将代码保存为 .html 文件（例如 index.html），然后用浏览器打开该文件即可。

上一篇：vue promise的用法

下一篇：vue vconsole