Vue3官网-工具(十八)单文件组件、(SFC)、测试(Jest)、移动端

本文介绍了Vue3的单文件组件(SFC),强调了SFC的工作原理、优势及关注点分离的讨论。接着探讨了Vue应用的测试,包括单元测试(推荐Jest和Mocha)、组件测试(推荐Vue Testing Library和Vue Test Utils)以及端到端测试(推荐Cypress、Nightwatch.js和Puppeteer)。最后提到了使用Capacitor和NativeScript进行Vue移动端开发。
摘要由CSDN通过智能技术生成

Vue3官网-工具(十八)单文件组件、(SFC)、测试(Jest)、移动端

总结:

1. 单文件组件

介绍

Vue 单文件组件(又名 *.vue 文件,缩写为 SFC)是一种特殊的文件格式,它允许将 Vue 组件的模板、逻辑 样式封装在单个文件中。下面是 SFC 示例:

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{
  { greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

正如所见,Vue SFC 是经典的 HTML、CSS 与 JavaScript 三个经典组合的自然延伸。每个 *.vue 文件由三种类型的顶层代码块组成:<template><script><style>

  • <script> 部分是一个标准的 JavaScript 模块。它应该导出一个 Vue 组件定义作为其默认导出。
  • <template> 部分定义了组件的模板。
  • <style> 部分定义了与此组件关联的 CSS。

查阅 SFC 语法规范 查看更多细节。

工作原理

Vue SFC 是框架指定的文件格式,必须由 @vue/compiler-sfc 预编译为标准的 JavaScript 与 CSS。编译后的 SFC 是一个标准的 JavaScript(ES)模块——这意味着通过正确的构建配置,可以像模块一样导入 SFC:

import MyComponent from './MyComponent.vue'

export default {
   
  components: {
   
    MyComponent
  }
}

SFC 中的 <style> 标签通常在开发过程中作为原生 <style> 标签注入以支持热更新。对于生产环境,它们可以被提取并合并到单个 CSS 文件中。

可以在 Vue SFC Playground 中使用 SFC ,探索其是如何编译的。

在实际项目中,通常会将 SFC 编译器与 ViteVue CLI(基于 webpack)等构

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ChrisP3616

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值