Java登陆第三十五天——Vite+Vue3目录结构、.vue文件理解（SFC）

项目结构

使用Vite创建Vue3+JS默认项目结构如下：(vmoudle1是项目名)
image

Vue中提出了组件的概念。

组件是代码复用的一种方式，用于抽象出一个可复用的UI，方便在不同的场景中进行重复使用。

组件根据大小可被分为：(从小到大)
1.组件
2.布局组件
3.页面级别组件

  • .vscode

    • 忽略

  • node_modules

    • 存储项目依赖

  • public

    • 存储公共资源，如 HTML 文件、图像、字体等.

  • src （存储项目的源代码，以下是src内部划分建议）：

    1. assets：存储项目中用到的静态资源。

    2. components：存储组件相关的文件。

    3. layouts ：存储布局组件的文件。

    4. pages ：存储页面级别的组件。

    5. plugins ：存储 Vite 插件相关的文件。

    6. router ：存储 Vue.js 的路由配置文件。

    7. store ：存储 Vuex 状态管理相关的文件。

    8. utils ：存储一些通用的函数。

  • main.js

    • Vue默认入口

  • .gitignore

    • git配置文件

  • package.json

    • Node.js配置文件。

  • README.md

    • 项目文档。

  • vite.config.js

    • Vite的配置文件。

知道即可，后续的学习中涉及到就理解了。

.vue文件

如下是一个传统页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="./Test.css" rel="stylesheet" type="text/css">
    <script src="./Test.js"></script>
</head>
<body>
    Hello,world!
</body>
</html>

其由三部分组成，第一是HTML，第二是外部的CSS，第三是外部的JS。

类似的，在VUE中被称为多文件组件。

把上述多文件组件改成单文件组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    /*假装有CSS代码*/
    </style>
    <script>
    //假装有JS代码
    </script>
</head>
<body>
    Hello,world!
</body>
</html>

这不就是把外部的文件全部写在内部了吗？

是的，VUE对HTML/CSS/JS进行了统一封装。并提供了新的文件格式.vue

.vue由三个部分组成：

  1. <template>

  2. <style>

  3. <script>

.vue中部分 传统部分 描述
<template> HTML 代替传统的.html文件
<style> CSS 代替传统的.js文件
<script> JS 代替传统的.css文件

这就是SFC（Single-File Component，简称 SFC,单文件组件）。

在VUE中，就是编写一个个的组件，再将各个组件拼凑成完整的页面。
image

posted @ 2024-03-14 14:02  rowbed  阅读(10)  评论(0)  编辑  收藏  举报