Vue 支持

Nasti 内置 Vue 3 单文件组件（SFC）支持。

安装

Vue 的 SFC 编译器作为可选依赖，需要手动安装：

npm install vue
npm install -D @vue/compiler-sfc

特性

.vue 单文件组件完整支持（script、template、style）
<script setup> 语法支持
Scoped CSS
Vue HMR 热更新（模板/样式修改不丢失状态）
TypeScript 支持（<script setup lang="ts">）

配置

// nasti.config.ts
import { defineConfig } from 'nasti-build'

export default defineConfig({
  framework: 'vue',
})

示例

入口文件

// src/main.ts
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

组件

<!-- src/App.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <h1>Nasti + Vue</h1>
    <button @click="count++">Count: {{ count }}</button>
  </div>
</template>

<style scoped>
h1 { color: #42b883; }
</style>

HMR 行为

<template> 修改：热重渲染，保持组件状态
<style> 修改：CSS 热替换，无需刷新页面
<script> 修改：组件重新加载

注意： 如果没有安装 @vue/compiler-sfc， Nasti 会在控制台输出警告并跳过 .vue 文件的编译。