Vue技术栈-Vue 3 项目组件入门：单文件组件 (SFC)

最新推荐文章于 2025-06-22 21:40:38 发布
最新推荐文章于 2025-06-22 21:40:38 发布
阅读量1.2k 收藏 29
点赞数 37
CC 4.0 BY-SA版权
分类专栏： 编程学习专栏 # 前端工程学习 文章标签： vue.js 前端 javascript Vite Vue3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_72543266/article/details/141138242

目录

前言

1.简介

2.安装 Vite 和 Vue 3

3.什么是.vue文件?

vue 文件解析

4.什么是VUE的组件?

5.工程化vue项目如何组织这些组件?

6.Vue3关于样式( CSS )的导入方式

7.结语

前言

        本篇是在上一篇Vue技术栈-Vite最新版创建一个Vue3项目的基础上的后续,先对Vite这一构建工具进行简单介绍,如何使用用的话,看链接的那一篇文章即可,然后就是自己结合学习的笔记,来进行自己的一些知识的点的总结和理解.

1.简介

        Vite 是一个由 Vue 团队成员开发的前端构建工具，它利用了 ES 模块（ESM）和 Rollup 来提供极速的开发服务器。Vue 3 作为 Vue.js 的最新版本，引入了 Composition API，使得状态管理和逻辑复用更加灵活。结合 Vite 和 Vue 3，我们可以快速地开发现代前端应用。

2.安装 Vite 和 Vue 3

        前提是你已经安装了 Node.js。然后简单介绍一下使用 npm 创建一个新的 Vite + Vue 3 项目,详细请看上一篇。


                

        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
vue3.0需要学习的技术栈

				
			

			

				

					前端-尔嵘
				

				

					11-04
					
					1872
					
				

			

		

		

			
				
这些是学习 Vue 3.0 所需的基本技术栈，当然具体的学习内容会根据项目需求和个人兴趣来调整和补充。

			
		

	



                

            
              



	

		

			

				
					
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）

				
			

			

				

					朝阳39的博客
				

				

					07-16
					
					1388
					
				

			

		

		

			
				
自定义指令必须遵循命名规范（自定义指令名的首字母必须是v，后续跟首字母大写的自定义指令名称 ）// 在元素上做些操作 } }  < template > < h1 v-my-directive > This is a Heading  const。

			
		

	



              


  
              

                


	

		

			

				
					
现代前端技术栈的实践与应用：Vue3 + TypeScript + Vite + Element Plus

				
			

			

				

					杨不易呀
				

				

					05-22
					
					766
					
				

			

		

		

			
				
TypeScript的类型系统使得我们能够明确变量、函数、对象的类型，避免了运行时错误。id: numberdate: DateVue3：提供了Composition API，使得代码更加模块化，便于维护和复用。TypeScript：通过类型定义，提高了代码的可读性和可维护性。Vite：快速热更新和代码分割功能，显著提升了项目的性能。：丰富的UI组件，方便快速搭建界面。Pinia：状态管理工具，使得数据管理更加清晰。Axios：异步请求库，方便与后端通信。：保证了代码质量，统一了代码风格。

			
		

	





	

		

			

				
					
单文件组件(SFC)

				
			

			

				

					hulin的博客
				

				

					03-28
					
					1155
					
				

			

		

		

			
				
单文件组件(SFC)

			
		

	



		

			
		



	

		

			

				
					
揭秘vue-sfc-cli: 组件研发利器

				
			

			

				

					weixin_30394669的博客
				

				

					07-07
					
					628
					
				

			

		

		

			
				
前言
本文将揭示vue单文件组件的工具vue-sfc-cli的内涵，说明它是如何在整个组件研发流程中提升效率的。
本文可以看成是

			
		

	





	

		

			

				
					
Vue3: 单文件(SFC)输出多组件解决方案.理解defineComponent及如何使用

				
			

			

				

					EvanYYY1的博客
				

				

					06-05
					
					3015
					
				

			

		

		

			
				
Vue3 单文件多组件解决方案

			
		

	





	

		

			

				
					
Vue-Awesome-Swiper项目搭建：从零开始的最佳实践与配置

				
			

			

				

					
				

			

		

		

			
				
![Vue-Awesome-Swiper项目搭建：从零开始的最佳实践与配置]... # 摘要 本文系统地介绍了Vue-Awesome-Swiper的使用与集成方法，并深入探讨了其在V

			
		

	





	

		

			

				
					
【单文件组件的奥秘】：Vue单文件组件剖析与实践

				
			

			

				

					
				

			

		

		

			
				
![【单文件组件的奥秘】：Vue单文件组件剖析与实践]...本文作为Vue单文件组件（Single File Components，SFC）的全面指南，涵盖了从基础入门到高级实践，再到未来展望的完整知识体系。首先介绍了Vue

			
		

	





	

		

			

				
					
Vue.js和Element-Plus新手入门：如何从零开始构建校园交易应用（实战项目解析）

				
			

			

				

					
				

			

		

		

			
				
[Vue.js和Element-Plus新手入门：如何从零开始构建校园交易应用（实战项目解析）](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6fb3cbb188034eb785ab5ea432d495a5~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0...

			
		

	





	

		

			

				
					
Udemy课程：Vue 3零基础入门教程解析

				
			

			

				

					
				

			

		

		

			
				
- **单文件组件 (SFC) 语法改进**: SFC现在支持使用自定义块，允许开发者在组件中添加自己的预处理器逻辑。  ### 知识点二：Udemy课程  Udemy是一个在线学习平台，提供各种课程，涵盖技术、设计、商业等众多领域。...

			
		

	





	

		

			

				
					
Vue框架基础6-单文件组件（SFC）

				
			

			

				

					AKindofo的博客
				

				

					05-22
					
					4081
					
				

			

		

		

			
				
single-file components（单个文件组件）
文件后缀（扩展）名为 .vue，解决的问题：

全局定义组件可能会出现命名冲突
字符串的 template 没有语法高亮
对 CSS 的支持不友好
没有明显的构建过程
…
单文件组件语法：

<template>
  模板语法
</template>

<script>
  // 定义并导出组件的选项对象模块
</script>

<style lang="scss" scoped>
 

			
		

	





	

		

			

				
					
什么是Vue的单文件组件(SFC)

				
			

			

				

					codemami的博客
				

				

					05-02
					
					1217
					
				

			

		

		

			
				
Vue的单文件组件（Single File Components，简称SFC）是Vue.js框架中用来组织和编写组件的一种文件格式。简单来说，一个.vue文件就是一个单独的组件，它封装了组件的HTML模板、CSS样式和JavaScript逻辑。在这个例子中，<template>标签内部是组件的HTML模板，它定义了组件的结构。<script>标签内部是组件的JavaScript逻辑，它导出了一个对象，包含了组件的名字、属性等。<style>标签内部是组件的CSS样式，它定义了组件的样式规则。

			
		

	





	

		

			

				
					
什么是单文件组件？

				
			

			

				

					weixin_40945354的博客
				

				

					10-29
					
					1724
					
				

			

		

		

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

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

<style>
.greeting {
  color: red;
  font-weig

			
		

	





	

		

			

				
					
Vue 单文件组件（SFC）基础详解

				
			

			

				

					weixin_61995809的博客
				

				

					04-18
					
					747
					
				

			

		

		

			
				
Vue 的单文件组件（Single File Component，简称 **SFC**）是 Vue 应用开发的核心组织形式，它将一个组件的模板（HTML）、逻辑（JavaScript/TypeScript）和样式（CSS/Sass/Less）封装在一个 .vue`文件中。

			
		

	





	

		

			

				
					
Vue3之单文件组件(SFC)

				
			

			

				

					youhebuke225的博客
				

				

					06-14
					
					3249
					
				

			

		

		

			
				
就是的文件，必须由  预编译为标准的 JavaScript 与 CSS
样式特性
点击我们可以在标签上写上，这样表示当前的样式只在当前文件中有用，他是通过postCSS来实现的
编译后
选择器

深度选择器


插槽选择器


全局选择器

style标签
全局选择器
moudle
我们可以在标签上写上，这样他会把相关的类封装到一个的对象中,使用的时候使用绑定以及对象的取值语法
在标签中定义的类也是在当前组件有用单文件组件的可以使用函数，他的参数是一个响应式数据，这样css属性可以访问到我们定义的响应式的数

			
		

	





	

		

			

				
					
vue3.0 技术栈：vue3 + js + axios + less

				
			

			

				

					955姜太根的博客
				

				

					03-13
					
					1105
					
				

			

		

		

			
				
vue3笔记

			
		

	





	

		

			

				
					
Vue3 创建单文件组件(SFC)

					
最新发布

				
			

			

				

					likuoelie的博客
				

				

					06-22
					
					849
					
				

			

		

		

			
				
单文件组件（SFC）是一种特殊的文件格式，扩展名为.vue，允许将一个 Vue 组件的 HTML 模板、JavaScript 逻辑和 CSS 样式封装在一个文件中。这种方式使得组件的代码更加模块化和易于管理。单文件组件是 Vue 框架提供的一种文件格式，通常以.vue为扩展名。<template>：定义组件的 HTML 模板，用于渲染用户界面。<script>：定义组件的 JavaScript 逻辑，包括数据、方法、计算属性和生命周期钩子。<style>：定义组件的 CSS 样式，可以通过scoped。

			
		

	





	

		

			

				
					
01. Vue3 技术栈知识全家桶（vue3 + typescript + vite），详细整理，面试必备，持续更新！！！

				
			

			

				

					weixin_44121341的博客
				

				

					01-30
					
					1478
					
				

			

		

		

			
				
Vue3 技术栈知识全家桶（vue3 + typescript + vite），详细整理，面试必备，持续更新！！！

			
		

	





	

		

			

				
					
vue3【详解】单文件组件 SFC（含SFC的优点、缺点、使用场景、原理、使用预处理器、＜script setup＞语法详解、资源拆分）...

				
			

			

				

					weixin_33467546的博客
				

				

					07-24
					
					653
					
				

			

		

		

			
				
SFC 概述将一个组件的逻辑 (JavaScript)，模板 (HTML) 和样式 (CSS) 封装在同一个.vue 文件里，即单文件组件（ Single-File Components，缩写为 SFC）。登录后复制  <script setup>
import { ref } from 'vue'
const...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
​0xSecDebug

			
你的支持，使我更好的创作

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值