vue3项目结构梳理：

news2024/9/17 9:06:47

总览

1.vscode文件：

通常用于存放Visual Studio Code编辑器的插件的配置

2.node_moudles文件夹：

这个文件夹包含了项目所需的所有npm依赖包。（需要在根目录下执行npm i命令安装这个文件夹）

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

1.检查 package.json 文件是否存在，如果不存在则会报错。
2.读取 package.json 文件中的依赖项列表。
3.下载每个依赖项及其所有依赖项（如果有的话）。
4.将下载的依赖项存储在项目的 node_modules 文件夹中（如果没这个文件夹则自动生成）。
5.更新 node_modules 文件夹中的 package-lock.json 文件，以记录确切的版本号和依赖关系。
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.对路由组件一个一个实现

一个可能的路由的配置如下：

//创建一个路由器并暴露出去
//第一步：引入createrRouter
import { createRouter ,createWebHistory} from "vue-router";

//引入一个一个要呈现的组件
import home from "@/components/Home.vue"
import news from "@/components/News.vue"
import about from "@/components/About.vue"
//第二步：创建路由器
const router = createRouter({
    history :createWebHistory(),//路由器的工作模式
    routes:[//一个一个的路由规则(路由的配置)
        {path:'/home',
        component:home
        },
        {path:'/news',
        component:news
        },
        {path:'/about',
        component:about
        },
    ]
})
//暴露出去router
export default router

4.stores文件夹:

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

5.views文件夹

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

6.app.vue文件

是应用程序的根组件，它包含了应用程序的整体布局和结构。包含其他组件

7.main.js 文件

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

import './assets/main.css'
//加载并应用main.css文件中定义的样式规则到相应的HTML元素上(例如index.html中的元素引用本文件时候就会在相应的位置调用main.js中的样式)

import { createApp } from 'vue'
//从'vue'模块中导入createApp函数(准备花盆)
import App from './App.vue'
//从当前目录下的App.vue文件中导入一个名为App的Vue组件（花的根部）（其他引入的vue文件可以理解为花的枝叶）

createApp(App).mount('#app')
//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命令安装依赖包）

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

这样就是在package-lock.json文件中自动生成相应的依赖包的信息

之后：

在Vue组件或其他JavaScript文件中，通过import语句导入所需的依赖包。例如，要导入vue-router并将其添加到Vue应用程序中，可以在main.js文件中添加以下代码：

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  // 定义路由规则和组件映射
});

createApp(App).use(router).mount('#app');