vue3页面标签<template>,<script>,<style>顺序

dmr

<script setup lang="ts">

</script>

<template>

</template>

<style scoped lang="scss">

</style>

核心规则说明‌

‌1.<template> 必须在前‌

作为组件的结构层，应优先声明 HTML 模板，符合从视觉结构到逻辑行为的阅读顺序。
唯一例外：若使用 <script setup> 语法糖，可允许 <script> 前置（但非官方推荐）。
‌
2.<script> 在中间‌

逻辑层代码紧随模板层，方便开发时快速定位与模板关联的响应式数据或方法。
若使用 <script setup> 语法糖，代码结构更紧凑：
vue
Copy Code
<script setup>
// Composition API 逻辑（推荐顺序仍保持 <template> 在前）
</script>
‌
3.<style> 始终在最后‌

样式层作为视觉补充，放在文件末尾，避免干扰逻辑与模板的关联性。
支持 scoped、module 或预处理器（如 <style lang="scss">），但顺序不变。

微信扫一扫，分享更方便