vue3项目布局梳理：

 总览

                                

1.vscode文件：

通常用于存放Visual Studio Code编辑器的插件的设置
2.node_moudles文件夹：

这个文件夹包含了项目所需的所有npm依靠包。（需要在根目录下执行npm i命令安装这个文件夹）
或者在项目根目录（package.json的上一级）下执行：npm install命令；它会根据项目根目录下的 package.json 文件中列出的依靠项列表，下载并安装这些依靠包到项目的 node_modules 文件夹中。

1. 1.检查 package.json 文件是否存在，如果不存在则会报错。
2. 2.读取 package.json 文件中的依赖项列表。
3. 3.下载每个依赖项及其所有依赖项（如果有的话）。
4. 4.将下载的依赖项存储在项目的 node_modules 文件夹中（如果没这个文件夹则自动生成）。
5. 5.更新 node_modules 文件夹中的 package-lock.json 文件，以记录确切的版本号和依赖关系。
6. 6.最后，可以在项目中通过 require() 或 import 语句来引用和使用这些依赖项。

复制代码

3.public文件夹：

这个文件夹用于存放静态资源（不需要经过服务器处理的文件，也就是说：这个文件夹中的资源可以被Web服务器直接提供给用户访问，不需要后端处理的），如图像、字体等。这些资源可以直接通过URL访问，无需经过构建过程。
此中favion.ico文件是小图标,通常表现在浏览器的标签栏。
4.src文件夹：（最重要）

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

这是源代码的主要目录，包含应用程序的所有源代码文件。
1.assets文件夹:

存放静态资源，如图像、字体等
assets文件夹存放内容本身是静态或者经过后端服务器处理过后的返回的静态资源。
而public文件夹存放内容本身是静态资源
2.components文件夹：

存放一样平常的vue组件（除了路由组件），相当于app.vue文件大树干的小分支）
3.router文件夹：

包含Vue Router的设置，用于管理应用程序的页面导航。
路由项目的思路：
1.确定导航区，展示区
2.npm install vue-router命令安装路由并在main.ts文件中设置好
3.在router文件夹创建一个路由设置文件（如index.ts文件）中设置好路由的具体规则
4.对路由组件一个一个实现
一个可能的路由的设置如下：

1. //创建一个路由器并暴露出去
2. //第一步：引入createrRouter
3. import { createRouter ,createWebHistory} from "vue-router";
5. //引入一个一个要呈现的组件
6. import home from "@/components/Home.vue"
7. import news from "@/components/News.vue"
8. import about from "@/components/About.vue"
9. //第二步：创建路由器
10. const router = createRouter({
11.     history :createWebHistory(),//路由器的工作模式
12.     routes:[//一个一个的路由规则(路由的配置)
13.         {path:'/home',
14.         component:home
15.         },
16.         {path:'/news',
17.         component:news
18.         },
19.         {path:'/about',
20.         component:about
21.         },
22.     ]
23. })
24. //暴露出去router
25. export default router

复制代码

4.stores文件夹:

用于存放Vuex（或者pinia）推荐使用pi的状态管理模块，用于集中管理和共享应用程序的状态。
5.views文件夹

目任命于存放应用程序的页面级组件。每个页面通常由一个 .vue 文件构成，而且通过路由进行导航。
6.app.vue文件 

是应用程序的根组件，它包含了应用程序的整体布局和布局。包含其他组件
7.main.js 文件

用于初始化 Vue3 应用程序和设置一些全局设置。

1. import './assets/main.css'
2. //加载并应用main.css文件中定义的样式规则到相应的HTML元素上(例如index.html中的元素引用本文件时候就会在相应的位置调用main.js中的样式)
4. import { createApp } from 'vue'
5. //从'vue'模块中导入createApp函数(准备花盆)
6. import App from './App.vue'
7. //从当前目录下的App.vue文件中导入一个名为App的Vue组件（花的根部）（其他引入的vue文件可以理解为花的枝叶）
9. createApp(App).mount('#app')
10. //createApp函数创建一个Vue应用实例，并将其挂载到HTML文档中的id为app的容器上(把花的根插入花盆里面)

复制代码

8.utils文件夹： 

mitt使用场景
5..gitignore文件

一个文本文件，内容决定了哪些文件和文件夹不会被提交到代码堆栈。
用于告诉Git哪些文件或目录不应该被纳入版本控制体系（即不会纳入代码库）。
6.env.d.ts: 文件

是用来定义 TypeScript 项目中需要用到的环境变量的范例（理解：这个文件可以给ts变量中的范例起别名，而且可以修改某些变量的作用域）
（初始的vue3项目中的env.d.ts文件的作用是让ts"认识".txt,.jpg等文件）
7.index.html文件

应用程序入口文件（vite和webpack的区别之一），Vue应用将挂载于此文件中的特定元素上
8.package-lock.json文件

包含了项目所需的所有依靠包及其准确的版本号。
（通过npm install命令安装依靠包）

1. npm install vue-router
2. //安装vue-router依赖包，之后可以在组件中配置相应的依赖包

复制代码

这样就是在package-lock.json文件中主动天生相应的依靠包的信息
之后：
在Vue组件或其他JavaScript文件中，通过import语句导入所需的依靠包。比方，要导入vue-router并将其添加到Vue应用程序中，可以在main.js文件中添加以下代码：

1. import { createRouter, createWebHistory } from 'vue-router';
3. const router = createRouter({
4.   // 定义路由规则和组件映射
5. });
7. createApp(App).use(router).mount('#app');

复制代码

9.package.json 文件

是Node.js 项目的设置文件，此中包含了项目的元数据和依靠信息。您可以在此中设置脚本、安装依靠、指定启动命令等。
10.README.md文件

Markdown格式的文本文件，对项目的介绍
11.tsconfig.app.json文件，tsconfig.json文件，tsconfig.node.json文件

TypeScript编译器的设置文件
12.hooks文件夹：

        ​​​​​​​        ​​​​​​​        ​​​​​​​        

hooks文件夹（src目录下）通常用于存放自定义的Hooks函数，这些函数可以在Vue组件中导入和使用，以实现代码的复用和构造。（可以理解把ts中的代码逻辑给封装了）。
函数式编程思想：Hooks将这些逻辑封装成一个可复用的函数，避免代码重复，进步代码的复用性。
定名规范：自定义Hooks应该以“use”为前缀。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。