vue实现的两种模式
Vue 实现的两种模式
Vue.js 主要支持两种开发模式：单文件组件（SFC）模式和非构建步骤模式。这两种模式适用于不同的开发场景和需求。
单文件组件模式（SFC）
单文件组件模式通过 .vue 文件组织代码，将模板、逻辑和样式封装在一个文件中。这种模式需要构建工具（如 Vite 或 Webpack）支持，适合中大型项目开发。
-
文件结构：每个
.vue文件包含<template>、<script>和<style>三个部分。
<template> <div>{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello Vue!' } } } </script> <style scoped> div { color: red; } </style> -
优势：
- 模块化清晰，便于维护。
- 支持预处理器（如 Sass、TypeScript）。
- 支持作用域样式（
scoped）。
非构建步骤模式
非构建步骤模式直接通过 HTML 文件引入 Vue 的 CDN 链接，无需构建工具。适合快速原型开发或小型项目。
-
实现方式：直接在 HTML 中编写 Vue 代码。
<!DOCTYPE html> <html> <head> <title>Vue Non-Build Mode</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> {{ message }} </div> <script> const { createApp } = Vue; createApp({ data() { return { message: 'Hello Vue!' } } }).mount('#app'); </script> </body> </html> -
优势：
- 无需配置构建工具，快速上手。
- 适合简单功能或学习用途。
选择建议
- 需要模块化、工程化开发时，选择 单文件组件模式。
- 需要快速验证想法或教学演示时，选择 非构建步骤模式。
