单文件组件SFC及Vue CLI脚手架的安装使用

单文件组件SFC及Vue CLI脚手架的安装使用

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

为什么要使用 SFC

使用 SFC 必须使用构建工具,但作为回报带来了以下优点:

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

如何支持SFC

可通过项目脚手架来进行支持,Vue支持Vite脚手架和Vue CLI脚手架。这里我们先来介绍Vue CLI的基本使用方式。

# 安装
npm install -g @vue/cli
# 创建项目
vue create vue-study
# 选择default
default (babel, eslint)
# 启动脚手架
npm run serve

通过localhost:8080进行访问。

脚手架文件的组成

  • src/main.js -> 主入口模块
  • src/App.vue -> 根组件
  • src/components -> 组件集合
  • src/assets -> 静态资源

单文件的代码组成

  • template -> 编写结构
  • script -> 编写逻辑
  • style -> 编写样式
单文件组件

其中style中的scoped属性,可以让样式成为局部的,不会影响到其他组件,只会作用于当前组件生效,同时在脚手架下支持常见的文件进行模块化操作,例如:图片、样式、.vue文件等。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/735398.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pycharm jupyter server process exited with code 1

Pycharm jupyter server process exited with code 1 1. 问题描述2. 原因和解决方法 1. 问题描述 使用 Pycharm 启动 Jupyter 时,报错如下, jupyter server process exited with code 12. 原因和解决方法 Pycharm 启动 jupyter 时,默认的 …

Linux:开源世界的基石

Linux:开源世界的基石 在信息技术的海洋中,Linux像一座灯塔,照亮了开源文化的道路,成为了无数技术爱好者、开发者和企业的选择。作为一个操作系统的内核,Linux的出现犹如一阵清风,打破了操作系统市场的一统…

Vue class和style绑定:动态美化你的组件

🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课签约作者、上架课程《Vue.js 和 E…

考研经验|如何从考研失败中走出来?

对我来说,太丢人了 其实我在本科的时候在同学眼中,一直很优秀,每年奖学金必有我的,国家励志奖学金,国家奖学金,这种非常难拿的奖学金,我也拿过,本科期间学校有一个公费去新西兰留学的…

初识C语言—字符串、转义字符、注释

字符串 字符串就是一串字符 用英文双引号括起来的字符 int main() {"dasgfhjkasg\n""hello world!"return 0; } 字符串的结束标志是\0这个转义字符 如何证明呢? int main() {//字符数组 - 数组是一组相同类型的元素char arr[] "hel…

基于注解完成基本类型属性赋值 (DI)

在上一篇文章中,介绍了如何基于注解的方式自动为引用类型的属性赋值,这里介绍如何为基本类型的属性赋值。 为基本类型的属性赋值,使用注解Value。通常用于注入外部数据,或者我们可以直接手动赋值。 步骤如下: 声明外…

【个人开发】llama2部署实践(一)——基于CPU部署

1. Anaconda安装 mkdir -p /opt/anaconda cd /opt/anaconda # 参考链接:https://repo.anaconda.com/archive/index.html wget https://repo.anaconda.com/archive/Anaconda3-2023.07-2-Linux-x86_64.sh sh Anaconda3-2023.07-2-Linux-x86_64.sh2.安装git yum inst…

【动态规划】代码随想录算法训练营第四十三天 |1049. 最后一块石头的重量 II,494. 目标和,474.一和零 (待补充)

1049. 最后一块石头的重量 II 1、题目链接:. - 力扣(LeetCode) 2、文章讲解:代码随想录 3、题目: 有一堆石头,每块石头的重量都是正整数。 每一回合,从中选出任意两块石头,然后…

PCB行业IPC标准内容介绍及子标准文件总结

🏡《总目录》 目录 1,概述2,标准内容简介3,IPC标准总结4,总结1,概述 IPC二级标准是针对电路板质量而制定的国际标准。它主要涉及到电路板的设计、制造和检验等方面,旨在确保电路板的质量、可靠性和性能达到一定的标准。 2,标准内容简介 IPC标准主要包括如下四个方面的…

Text Field文本输入框

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 Text Field文本输入框 一、最基本的本文输入框1、基础示例2、一些表单属性3、验证 二、多行文本 一、最基本的本文输入框 1、基础示例 import {Box, TextField} from "…

Ele admin pro和iView Admin pro的用户管理页面对比

Ele admin pro和iView Admin pro都是非常优秀的B端框架,功能大同小异,本文就着重比对一下二者的用户案例页面,让老铁们感知一些细节。 一、用户列表 用户列表 用户列表 二、用户编辑 三、用户添加 四、角色管理 五、权限分配 六、角色添加

我曾走在崩溃的边缘:俞敏洪亲述新东方创业发展之路 -- 读书笔记

读完这本书后,启发很大,尤其说的只要坚持做正确的事情,好的结果自然会来。人生就是一场马拉松,起起伏伏很正常,关键是要坚持做正确的事情,从绝望中寻找希望。这本书,是在微信阅读app上阅读的。 …

基于GIS、RS、VORS模型、CCDM模型、geodetecto、GWR模型集成的生态系统健康的耦合协调分析

城市群是一国经济发展水平的象征,也是一国经济发展到一定阶段的标志,我国城市群建设体量不断增加,将成为全球经济的核心,中国城市群的建设逐步引领全球进入到了21世纪的中国新时代。然而,高速的城镇化发展,…

Elastic Stack--07--JavaAPI----文档(新增 、修改 、 查询 、 删除)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 JavaAPI-文档1.新增 Insert2.修改 Update3.查询 Get4.删除 Delete5.批量操作 BulkRequest批量新增批量删除 高级查询1.查询所有索引数据2.条件查询3.分页查询4.查询…

Mysql数据库-基本表操作

1.表操作 创建表:CREATE TABLE table_name ( field1 datatype, field2 datatype, field3 datatype ) character set 字符集 collate 校验规则 engine 存储引擎; field 表示列名 datatype 表示列的类型 character set 字符集,如果没有指定字符集&#xff…

深入解读 Elasticsearch 磁盘水位设置

本文将带你通过查看 Elasticsearch 源码来了解磁盘使用阈值在达到每个阶段的处理情况。 跳转文章末尾获取答案 环境 本文使用 Macos 系统测试,512M 的磁盘,目前剩余空间还有 60G 左右,所以按照 Elasticsearch 的设定,ES 中分片应…

CatBoost高级教程:分布式训练与大规模数据处理

导言 CatBoost是一种高效的梯度提升算法,可以处理大规模数据集并支持分布式训练。在实际应用中,处理大规模数据集时,分布式训练可以大大加快模型训练的速度,并提高训练效果。本教程将详细介绍如何在Python中使用CatBoost进行分布…

解决 cx-programmer 梯形图中繁体中文乱码问题

我的情况 cx-programmer9.5是繁体版,梯形图编辑区中打出的字体,简体繁体 都是乱码。 但是状态栏显示注解是正常的繁体。 原因 简体和繁体的编码不一样。繁体的BIG5和简体的GB2312不能互转,A编码的用B解码也是乱码。 解决 把系统字体调整为繁…

picGo 图床配置 - gitee

记录一下,怕忘记了 PicGo 下载安装 官网下载地址 从下面随意复制一个链接到浏览器上打开 我下载的是.exe版本的,你可以选择自己想安装的方式 安装完之后打开就是这个样子 配置PicGo 首先安装这个插件 安装完之后会有一个gitee,点击&#xff…

Java性能优化秘籍:内存管理、垃圾回收与性能调优

Java性能优化:内存管理、垃圾回收和性能调优 作为一名软件研发专家,深入理解Java性能优化的重要性不言而喻。本文将围绕Java性能优化的核心主题——内存管理、垃圾回收和性能调优,与大家分享一些实用的技巧和案例。 1. 内存管理 内存管理是…