<div id="app">
        <p>{{name}}</p>
        <p>{{age}}</p>
</div>
<script>
        const Student={
            data:function(){
                return{
                    name:"ahuinan",
                    age:40
                }
            }
        }
        var app = Vue.createApp(Student).mount("#app");
                console.log(app);

                app.age = 48;//通过该方式可以修改值
</script>

Vite使用：

npm init vite@latest myvue01 -- --template vue
npm install //如果失败，则用管理员命令行控制台cnpm install
npm run dev

Vite 是一个现代化的前端构建工具，主要用于开发 Vue.js 应用程序。它旨在提供一种快速、简单和高效的方式来构建现代化的Web应用程序。

以下是 Vite 的一些主要功能和优势：

1）快速的冷启动：Vite 利用 ES 模块的特性，采用原生 ES 导入方式加载模块，实现了快速的冷启动时间。无需预先打包整个应用程序，只有在需要时才会按需编译和加载模块，从而减少开发过程中的等待时间。

2）即时热更新：Vite 支持即时的热模块替换（HMR），可以在不刷新整个页面的情况下，即时地将修改的代码和样式注入到正在运行的应用程序中，以加快开发周期。

3）真正的按需编译：Vite 通过拦截浏览器对导入模块的请求，并在运行时按需编译它们，无需事先将所有模块打包和编译成静态文件。这种方式可以节省开发人员的等待时间，并且只需要编译修改的部分，提高了开发的效率。

4）内置的开发服务器：Vite 提供了一个内置的开发服务器，支持自动刷新和热模块替换，同时还支持单文件组件（SFC）的预处理和编译，使开发过程更加流畅。

5）支持 Vue 3 和 TypeScript：Vite 是为 Vue.js 3 构建的，并且天然地支持 Vue 3 的特性。此外，它还对 TypeScript 提供了良好的支持，使得在开发过程中可以享受到类型检查和智能提示的好处。

总之，Vite 提供了一种快速、高效和现代化的方式来开发 Vue.js 应用程序，通过即时编译、按需加载和热模块替换等特性，提供了更好的开发体验和性能表现。

另外一种写法参考：

<div id="app">
        <button @click="count++">{{count}}</button>
</div>
<script type="module">
      import { createApp } from 'vue'
      const app = createApp({
        data(){
            return{
              count:0
            }
        }
      })
      var local = app.mount('#app');
      local.count = 1000;
</script>

如果出现"template option but runtime compilation is not supported in this build of Vue. "则打开vite.config.js，增加：

alias: {
      'vue':'vue/dist/vue.esm-bundler.js'
}