vue单文件组件(SFC)

最新推荐文章于 2024-07-15 17:15:41 发布
最新推荐文章于 2024-07-15 17:15:41 发布
阅读量445 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43962020/article/details/129753032
版权

Vue 的单文件组件是网页开发中 HTML、CSS 和 JavaScript 三种语言经典组合的自然延伸。<template>、<script> 和 <style> 三个块在同一个文件中封装、组合了组件的视图、逻辑和样式。

Vue SFC 是一个框架指定的文件格式，因此必须交由 @vue/compiler-sfc 编译为标准的 JavaScript 和 CSS，一个编译后的 SFC 是一个标准的 JavaScript(ES) 模块，这也意味着在构建配置正确的前提下，你可以像导入其他 ES 模块一样导入 SFC。

 

SFC优点：

1、使用熟悉的 HTML、CSS 和 JavaScript 语法编写模块化的组件
2、让本来就强相关的关注点自然内聚
3、预编译模板，避免运行时的编译开销
4、组件作用域的 CSS
5、在使用组合式 API 时语法更简单
6、通过交叉分析模板和逻辑代码能进行更多编译时优化
7、更好的 IDE 支持，提供自动补全和对模板中表达式的类型检查
8、开箱即用的模块热更新 (HMR) 支持

注：使用 SFC 必须使用构建工具

weixin_43962020
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue远程加载sfc组件思路详解
01-19
问题 在我们的 vue 项目中（特别是后台系统），总会出现一些需要多业务线共同开发同一个项目的场景，如果各业务团队向项目中提供一些公共业务组件，但是这些组件并不能和项目一起打包，因为项目中不能因为某个私有模块的频繁变更而重复构建发布。 ^_^不建议在生产环境使用，代码包含eval  思路 在这种场景下我们需要将公共的业务组件部署到服务端，由客户端请求并渲染组件。 服务端解析.vue文件 使用vue-template-compiler 模板解析器，解析SFC（单文件组件） const compile = require('vue-template-compiler') // 获取sfc组件的源
vue3下vue/compiler-sfc报错问题解决
weixin_43941749的博客
03-31 986
于是卸载台式机的node，重新安装14版本，删除项目的node_modules，重新install然后run server。于是我回忆了一下上午是在笔记本上跑的，下午是在台式。script标签加lang="jsx"发现笔记本上的是14，台式上的是18。马上对比了下两边的node版本。去百度的结果不尽人意...vue安装jsx模块。
【Vue.js】@vue/compiler-sfc] define Props/Emits is a compiler macro and no longer needs to be imported
day day up
06-27 8754
警告信息本身意思是：在 中直接使用defineProps\defineEmits，不需要再import。
Vue学习笔记（一）基础
qq_45090256的博客
06-28 607
根据Vue3官网教程的基础章节整理的学习笔记
关于VUE2旧项目重新安装依赖后@vue/compiler-sfc提示无法运行的解决方案
热门推荐
疋疋 剥壳
02-17 1万+
关于VUE2旧项目重新安装依赖后@vue/compiler-sfc提示无法运行的解决方案；有一段时间因为vue3的出现，大家将vue-cli脚手架进行了升级，导致大部分项目重新安装依赖时出现提示程序中缺少依赖@vue/compiler-sfc ，但是对于vue2而言其实内部已存在 vue-loader 的依赖，但还原版本时，会将本地vue-loader的依赖更新到最新，导致项目启动出现问题。
拉钩教育大前端学习笔记 --- Vite 实现原理
qq_30033213的博客
11-09 741
Vite 是一个面向现代化浏览器的一个更轻、更快的 web 应用应用开发工具 它基于 ECMAScript 标准原生模块系统（ES Module）实现的。 它的出现是为了解决 Webpack 在开发阶段，使用 webpack-dev-server 冷启动时间过长和 Webpack MHR 热更新反应慢的问题。
启动vue报错 vue (＞=3.2.13) or @vue/compiler-sfc
lijun_xiao2009的专栏
06-27 3425
Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree 解决方法
Vue2 重新安装依赖后 @vue/compiler-sfc 编译报 ＞＞＞ and /deep/ 警告
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
09-04 3056
最近突然项目冒出@vue/compiler-sfc 编译报 /deep/警告的问题，一顿对网上操作后，还是没能解决。也不去探究什么原因造成的吧(总之和 Vue 2.7 版本有关)，若按警告的提醒去一个个改显然是不能接受的，直接上解决方案。
Vue单文件组件开发实现过程详解
10-15
Vue单文件组件（Single File Component, SFC）是Vue.js框架中的一种组织代码的方式，它将HTML模板、JavaScript逻辑和CSS样式打包在一个单独的文件中，使得代码更加模块化和易于管理。以下是对Vue单文件组件开发实现...
Vue单文件组件实现列表行添加、删除
04-24
本示例"Vue单文件组件实现列表行添加、删除"旨在演示如何在Vue应用中通过SFC实现动态列表的增删功能，这涉及到组件设计、事件绑定和数据管理等核心概念。 首先，我们需要创建一个基础的Vue项目。你可以使用Vue CLI...
vue-deno-compiler:sfc vue组件的编译器
05-05
Vue deno编译器 sfc vue组件的编译器 用于编译Vue单个文件组件的较低级实用程序 该软件包包含较低级别的实用程序，如果您正在为将Vue单个文件组件（SFC）编译为JavaScript的捆绑器或模块系统编写插件/转换，则可以使用这些实用程序。 浏览器版本说明 浏览器构建依赖于浏览器捆绑的postcss构建， postcss构建可在全局postcss下使用（因为Rollup无法正确捆绑）。 原料药 由于在构建系统中集成Vue SFC时的各种考虑因素，因此该API故意是低级的： 脚本，模板和样式的单独热模块替换（HMR） 模板更新不应重置组件状态 样式更新应在不重新渲染组件的情况下执行 利用该工具的插件系统进行预处理。 例如， <style lang="scss">应该由相应的webpack加载器处理。 在某些情况下，SFC中每个块的转换器不共享相同的执行上下文。 例如，当与
Vue单文件组件基础模板小结
08-29
Vue单文件组件（Single File Component, SFC）是Vue.js框架中的一种组织代码的方式，它将HTML、CSS、JavaScript集中在一个文件中，提高了代码的可读性和可维护性。以下是对Vue单文件组件基础模板的详细说明： 1. **...
Vue单文件组件添加删除列表行并进行列表检索
04-24
在Vue.js框架中，单文件组件（Single File Component, SFC）是一种常见的组织代码的方式，它将HTML、CSS和JavaScript代码封装在一起，提高了代码的可读性和可维护性。本项目"Vue单文件组件添加删除列表行并进行列表...
Vue3 [@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
星夜辰的博客
05-26 8835
vue3处理告警，setup语法糖
Vue 文件是如何被转换并渲染到页面的？
老司机的后备箱
08-19 2288
我们从一个非常简单的 Vue 文件，使用，一步一步地将 Vue 文件进行编译处理，分别编译 script、template、style，并将这三部分组装到一起，最后将其进行打包，打包后的文件就能够在浏览器中正确运行，并渲染出界面。其实的处理过程，与我们手动处理的过程，大致相同，不过还加上了热更新、编译缓存、拆分成虚拟模块等能力。明白这个过程之后，回头看，其实 Vue 的处理，真的没有多复杂，很多时候，一个技术看起来很复杂，但当你潜下心往里面钻研时，其实想要理解它，也并非那么困难。
Syntax Error: Error: Cannot find module ‘vue/compiler-sfc‘
weixin_46176940的博客
04-09 557
由于vue-loader版本过高为@17.0.0。cnpm run dev启动项目时报错。
Cannot find module vue/compiler-sfc
风烟
08-29 2561
我的vue版本是2.5，但是我的vue-loader版本升级到了vue-loader：17.3.0。经查，原来是vue2不能工作在vue-loader17以上，需要降到。
打包组件报错：Error: Cannot find module ‘vue/compiler-sfc‘
xuelong的博客
02-09 1万+
vue组件库搭建过程中使用webpack打包组件时报错，报错内容如下： Error: Cannot find module 'vue/compiler-sfc' Require stack: - D:\vue2\moon-ui\node_modules\vue-loader\dist\index.js - D:\vue2\moon-ui\webpack.config.js at Function.Module._resolveFilename (node:internal/modules/cjs/l
docker将Java、vue、nginx打进镜像（涉及容器打成镜像）
最新发布
qq_37752382的博客
07-15 434
按照上文拉取centos7，然后将需要的东西直接打进脚本，这样最简单，但是在拉取过程中，初始镜像contos7安装nginx需要安装一些工具包，拉取的时候报错了，原因还是在镜像源上，并且还想在上面装一些工具，另外创建容器不应该在里面做很多初始化的东西，每次更新业务包就行，4）准备文件完成后执行下面的就行（如果配置文件不对，比如nginx的配置等先进入镜像手动调整好，没问题了，再删除掉容器和镜像重新制作镜像即可）本文不讲安装docker,安装好安装，镜像源稍微麻烦点。1）生成镜像并创建容器。
NETCore 使用 Vue 的单文件组件 (SFC) 或将 Vue.js 与 Vue CLI 结合使用
07-14
在 ASP.NET Core 中使用 Vue 的单文件组件 (SFC) 或将 Vue.js 与 Vue CLI 结合使用，可以提供更灵活和强大的开发体验。下面是一些步骤来实现这一目标： 1. 确保您的开发环境中已安装 Node.js。您可以从 Node.js 官方网站（https://nodejs.org）下载并安装适合您操作系统的版本。 2. 创建 ASP.NET Core 项目：使用您选择的方法创建一个新的 ASP.NET Core 项目或打开现有项目。 3. 在项目根目录中初始化 Vue CLI：打开命令行界面，导航到您的项目根目录，并运行以下命令来初始化 Vue CLI： ``` vue create clientApp ``` 此命令将在项目根目录下创建一个名为 `clientApp` 的文件夹，并初始化 Vue CLI 项目。 4. 配置 Vue CLI：运行上述命令后，Vue CLI 会引导您进行一些配置选项的选择。您可以根据需求选择不同的配置，例如选择需要的特性和插件。 5. 开发 Vue 单文件组件：在 `clientApp` 文件夹中，您可以开始编写 Vue 的单文件组件 (SFC)。您可以使用 `.vue` 扩展名创建一个新的文件，然后在文件中编写 Vue 组件的模板、样式和逻辑。 6. 集成 Vue.js 到 ASP.NET Core 项目：在 ASP.NET Core 项目中创建一个 Razor 页面或 MVC 视图，然后将 Vue 单文件组件的输出引入到 Razor 页面或视图中。您可以使用 `<script>` 标签引入 Vue.js 运行时或开发版本，使用 `<link>` 或 `<style>` 标签引入样式文件。 7. 配置 ASP.NET Core 以处理 Vue CLI 生成的文件：在 ASP.NET Core 项目中的 `Startup.cs` 文件中，确保在 `Configure` 方法中添加以下配置： ```csharp app.UseStaticFiles(new StaticFileOptions { RequestPath = "/clientApp", FileProvider = new PhysicalFileProvider( Path.Combine(Directory.GetCurrentDirectory(), "clientApp/dist") ) }); ``` 这将配置 ASP.NET Core 以提供 Vue CLI 生成的文件。 8. 运行项目：运行 ASP.NET Core 项目，并访问包含 Vue 单文件组件的页面。您应该能够看到 Vue 单文件组件在浏览器中正常运行。 通过上述步骤，您就可以在 ASP.NET Core 项目中使用 Vue 的单文件组件 (SFC) 或将 Vue.js 与 Vue CLI 结合使用。这样做可以让您更方便地开发和管理 Vue.js 的代码，并与 ASP.NET Core 项目进行集成。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值