项目结构
使用Vite创建Vue3+JS默认项目结构如下：(vmoudle1是项目名)
Vue中提出了组件的概念。
组件是代码复用的一种方式，用于抽象出一个可复用的UI，方便在不同的场景中进行重复使用。
组件根据大小可被分为：(从小到大)
1.组件
2.布局组件
3.页面级别组件
-
.vscode
- 忽略
-
node_modules
- 存储项目依赖
-
public
- 存储公共资源，如 HTML 文件、图像、字体等.
-
src （存储项目的源代码，以下是src内部划分建议）：
-
assets：存储项目中用到的静态资源。
-
components：存储组件相关的文件。
-
layouts ：存储布局组件的文件。
-
pages ：存储页面级别的组件。
-
plugins ：存储 Vite 插件相关的文件。
-
router ：存储 Vue.js 的路由配置文件。
-
store ：存储 Vuex 状态管理相关的文件。
-
utils ：存储一些通用的函数。
-
-
.gitignore
- git配置文件
-
index.html
- 程序默认入口
-
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由三个部分组成：
-
<template>
-
<style>
-
<script>
| .vue中部分 | 传统部分 | 描述 |
|---|---|---|
| <template> | HTML | 代替传统的.html文件 |
| <style> | CSS | 代替传统的.js文件 |
| <script> | JS | 代替传统的.css文件 |
这就是SFC（Single-File Component，简称 SFC,单文件组件）。
在VUE中，就是编写一个个的组件，再将各个组件拼凑成完整的页面。
