当前位置: 首页 > news >正文

Vue 3第二章:Vite文件目录结构及SFC语法

文章目录

    • 1. Vite 文件目录结构
    • 2. Vue3 SFC 语法规范介绍

1. Vite 文件目录结构

Vue3 并没有强制规定文件目录结构,开发者可以按照自己喜欢的方式组织代码。不过,通常情况下,我们会按照以下方式组织文件目录:

├── public
│   ├── favicon.ico
├── src
│   ├── assets
│   ├── components
│   ├── router
│   ├── store
│   ├── views
│   ├── App.vue
│   └── main.js
├── index.html
├── README.md
├── tsconfig.json
├── vite.config.ts
└── package.json
  • public 目录用于存放静态文件,例如 index.html 文件和图片等。
  • src 目录用于存放源代码。
  • assets 目录用于存放静态资源,例如图片、字体等。
  • components 目录用于存放组件。
  • router 目录用于存放路由文件。
  • store 目录用于存放 Vuex 相关文件。
  • views 目录用于存放页面组件。
  • App.vue 文件是应用程序的根组件。
  • main.js 文件是应用程序的入口文件。
  • README.md 说明文件
  • tsconfig.json typescript配置文件
  • vite.config.ts vite配置文件

以上是一个常见的文件目录结构,您可以根据自己的需求进行调整。同时,在使用 Vue CLI 创建项目时,也可以选择不同的 preset 来生成不同的文件目录结构。

2. Vue3 SFC 语法规范介绍

Vue3 支持使用单文件组件(SFC)来组织代码。SFC 将一个组件的模板、样式和逻辑封装在一个文件中,使得组件的代码更加清晰和易于维护。以下是一个简单的 SFC 的例子:

<template><div>{{ message }}</div>
</template><script setup>import { ref } from 'vue'let message = ref('Hello, world!')
</script><style scoped>div {font-size: 24px;color: #333;}
</style>

SFC 包含了 <template><script><style> 三个标签,分别用于表示组件的模板、逻辑和样式。

  • <template> 标签中的内容就是组件的模板,可以使用 Vue 的模板语法来编写页面
  • <script> 标签中的内容是组件的逻辑,可以使用 JavaScript 来编写业务逻辑。
  • <style>标签中的内容是组件的样式,可以使用 CSS 来编写样式。scoped 属性表示这个样式只作用于当前组件,不会影响其他组件。
http://www.lryc.cn/news/20747.html

相关文章:

  • Leetcode 剑指 Offer II 016. 不含重复字符的最长子字符串
  • TCP 的演化史-sack 与 reordering metric
  • 【Spring6】| Spring的入门程序、集成Log4j2日志框架
  • 包子凑数(完全背包)
  • Spring超级全家桶,学完绝对是惊艳面试官的程度
  • Redis主要数据类型
  • 【Linux | ELK 8.2】搭建ELKB集群Ⅰ—— 实验环境说明和搭建Elasticsearch集群
  • 不同情况下*p和*p的区别(指针)
  • Vuex基础语法
  • 刚上岸字节测试开发岗,全网最真实的大厂面试真题
  • Mac监控键盘输入并执行动作
  • Transformer输出张量的值全部相同?!
  • 港科夜闻|全国政协副主席梁振英先生率香港媒体高管团到访香港科大(广州)...
  • XML调用 CAPL Test Function
  • Linux网络配置(NAT)
  • 数据结构——第二章 线性表(8)——线性表总结
  • 3.7寸按键翻页工牌
  • 西北工业大学大学物理(II)选填解析2019-2020期末
  • [计算机网络(第八版)]第一章 概述(章节测试/章节作业)
  • 华为OD机试真题大全,用 Python 解华为机试题 | 机试宝典
  • 电子科技大学数据库与软件工程三
  • 华为开源自研AI框架昇思MindSpore数据变换:Transforms
  • 软件测试之边界值测试法
  • 【华为OD机试模拟题】用 C++ 实现 - 最近的点(2023.Q1)
  • Qt windeployqt.exe 打包qml
  • 【人脸识别】CurricularFace:自适应课程学习人脸识别损失函数
  • springmvc之rest风格(RESTFUL)
  • django项目实战十四(django+bootstrap实现增删改查)进阶混合数据使用modelform上传
  • 2023年CDGA考试模拟题库(1-100)
  • HTML常用基础内容总结