Vue 目录结构
Vue 模板语法 

Vue 初识Vue

Vue.js 是一个用于构建用户界面的渐进式框架，它从设计之初就非常注重易用性。创建一个简单的 "Hello World" 应用是开始学习 Vue.js 的好方式。下面是一个基础的 Vue.js "Hello World" 示例，使用中文注释：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Vue.js Hello World</title>
  <!-- 引入Vue.js库 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <!-- 创建一个 Vue 实例或组件 -->
  <div id="app">
    <!-- 使用插值表达式显示数据 -->
    <p>{{ message }}</p>
  </div>
  <script>
    // 创建 Vue 实例，获取id为app的DOM元素
    new Vue({
      el: '#app',
      data: {
        // 定义一个数据属性 message
        message: 'Hello，Vue.js!'
      }
    });
  </script>
</body>
</html>


在这个示例中，我们首先引入了 Vue.js 的 CDN 链接，然后在 HTML 中定义了一个包含插值表达式的段落 <p>{{ message }}</p>。这个插值表达式将会显示 Vue 实例中 data 对象的 message 属性的值。最后，我们通过 JavaScript 创建了一个 Vue 实例，并将 message 属性初始化为 "你好，Vue.js!"。


你可以将上述代码保存为 .html 文件，然后在浏览器中打开它，就可以看到 "Hello World" 的效果了。