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

Vue 目录结构 vite 项目

news 2026/4/7 8:57:40

Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】

vite目录结构：

dist                          // 打包后生成的文件目录
node_modules                  // 环境依赖
public                        // 公共资源目录
    favicon.ico               // 网站图标
src                           // 项目核心文件夹
    assets                    // 静态资源目录
    components                // 组件目录
    router                    // 路由配置文件目录
        index.js              // 路由配置文件
    stores                    // pinia配置文件目录
        counter.js            // pinia配置文件
    views                     // 页面文件目录
    App.vue                   // 根组件
 main.js                   // 入口文件
.gitignore                    // git忽略提交配置文件
index.html                    // 入口页面
package-lock.json             // 插件版本锁定文件
package.json                  // 插件管理文件
README.md                     // 项目说明文件
vite.config.js                // vite的配置文件

 dist 文件夹：用于存放我们使用 npm run build 命令打包后的项目文件。

 node_modules 文件夹：用于存放项目的各种依赖，比如 axios 等。没有 node_modules 文件夹项目就没法运行，可以使用 npm install 安装项目依赖。

 public 文件夹：用于存放公共的静态资源，这里的资源不会被 vite 打包处理。

 public / favicon.ico 图标：网站标签页中的小图标。

 src 文件夹：项目的核心文件夹，我们所写的代码都放在这个文件夹里。

 src / assets 文件夹：用于存放各种静态资源，img、css 等等。

 src / components 文件夹：用于存放我们的公共组件，如 header、footer 等自定义组件。

 src / router 文件夹：用于存放路由配置文件，路由配置文件可以理解为各个页面的地址路径，用于让我们访问，同时也可以在里边编写全局路由守卫。

src / stores 文件夹：用于存放 pinia 配置文件，pinia 就是一个公共的数据管理文件，里边存放着项目需要用到的数据。

 src / views 文件夹：用于存放我们开发的 vue 页面，如 login、home 等页面。

 src / App.vue 文件：根组件，是项目的主组件，所有的页面都要通过 App.vue 组件显示。

 src / main.js 文件：入口文件，主要用于初始化 Vue 实例，也可以在此文件中引入一些组件库或者全局挂载一些变量。

 .gitignore 文件：用于配置 git 上传时需要忽略上传的文件。

  index.html 文件：项目入口页面，vite 打包后的 js、css 也会自动引入到该页面中，浏览器访问项目的时候会默认打开生成好的 index.html 文件。

 package-lock.json 文件：在 npm install 时生成的一份文件，用于记录当前项目实际安装的各个插件具体来源地址和版本号。并且在 npm install 时，会根据该文件生成 node_modules 文件夹。

 package.json 文件：插件的基本信息，包含项目开发时所需要的插件版本，项目名称等等。

 README.md 文件：项目的说明文件，可以记录项目开发时的版本和开发内容。

 vite.config.js 文件：vue 的配置文件，可以用来设置代理、打包等配置。

 vite 项目运行流程：

一、项目运行时会先执行 index.html 文件

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

如果开发移动端，可以将 meta 标签换成以下内容，禁止用户手动缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

二、执行 src / main.js 文件，在此文件中引入 Vue 与各种插件，并创建 Vue 实例。

// 引入公共 CSS 文件，如果不想要可以删掉
// 也可以将 src/assets 目录中的 base.css 和 main.css 一并删掉。
import "./assets/main.css";// 引入 Vue 中的 createApp 工厂函数
import { createApp } from "vue";
// 引入 pinia 状态管理
import { createPinia } from "pinia";
// 引入 App 根组件
import App from "./App.vue";
// 引入路由配置
import router from "./router";// 创建 Vue 实例，并将 App 根组件添加到页面中
const app = createApp(App);
// 应用 pinia
app.use(createPinia());
// 应用路由
app.use(router);
// 将 id 为 app 的元素挂载到 Vue 实例上
app.mount("#app");

三、执行 main.js 中引入的各种插件，包括 src / router / index.js 路由配置文件

import { createRouter, createWebHistory } from "vue-router";// 引入组件（方式一）
import HomeView from "../views/HomeView.vue";const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL), // 历史模式routes: [{path: "/",             // 这个 / 表示首页name: "home",          // 路由名称component: HomeView,   // 使用组件（方式一）},{path: "/about",        // 路由路径name: "about",         // 路由名称// 路由懒加载（方式二）component: () => import("../views/AboutView.vue"),},],
});export default router;

四、执行 App.vue 根组件，通过 RouterView 加载路由配置的首页（path 为 / 的页面）。

<template><RouterView />
</template>


五、执行路由配置的首页 src / views / HomeView.vue 文件

<template><!-- Vue3 可以不写根标签 --><p class="title">{{ title }}</p>
</template><script>
// Vue3 支持 Vue2 的写法
export default {name: "HomeView",data() {return {title: "首页"}}
}
</script><style scoped>
.title {background-color: aqua;
}
</style>

注：vite 的目录结构并非一成不变，具体的执行流程还需要结合实际情况。

原创作者: 吴小糖

创作时间：2023.8.14

相关文章：

Vue 目录结构 vite 项目

Vue3 项目常用的目录结构和每个文件的作用【通过 vite 创建的项目】 vite目录结构&#xff1a; dist // 打包后生成的文件目录 node_modules // 环境依赖 public // 公共资源目录 favicon.ico …...

编程日记 2023/8/15 9:17:07

TB/TM-商品详情原数据（APP)

一、接口参数说明&#xff1a; item_get_app-获得TB/TMapp商品详情原数据&#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_get_app 名称类型必须描述keyString是调用key&…...

编程日记 2023/8/15 9:16:06

小米发布会：雷军成长故事与创新壮举，AI大模型技术引领未来,雷军探索之路之从创业波折到小米AI领航，成就高端化传奇!

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…...

编程日记 2023/8/15 9:15:05

春秋云镜 CVE-2021-41947

春秋云镜 CVE-2021-41947 Subrion CMS v4.2.1 存在sql注入 靶标介绍 Subrion CMS v4.2.1 存在sql注入。 启动场景 漏洞利用 exp http://localhost/panel/visual-mode.json?getaccess&typeblocks UNION ALL SELECT username, password FROM sbr421_members -- -&o…...

编程日记 2023/8/15 9:14:04

面试题-React(一)：React是什么？它的主要特点是什么？

探索React&#xff1a;前端开发中的重要角色与主要特点 引言&#xff1a; 在现代前端开发领域&#xff0c;React已经成为最受欢迎和广泛使用的JavaScript库之一。它由Facebook开发并于2013年首次发布。随着时间的推移&#xff0c;React在开发社区中获得了强大的支持和认可。本…...

编程日记 2023/8/15 9:13:03

算法笔试 java 输入输出练习

在线编程题刷题训练 所有答案 scancer函数的用法 输入输出总结top&#xff01;&#xff01;&#xff01;&#xff01; java如何调用函数&#xff08;方法&#xff09; java刷acm的各种输入输出 vscode配置java环境 子函数的调用&#xff0c;直接定义一个static子函数调用就…...

编程日记 2023/8/15 9:12:01

5.内置构造函数

在JavaScript中最主要的数据类型有6种: 1.基本数据类型: 字符串、数值、布尔、undefined、 null 2.引用类型&#xff1a;对象 但是&#xff0c;我们会发现有些特殊情况: //普通字符串 const str andy console.1og(str.length) // 4其实字符串、数值、布尔、等基本类型也都有…...

编程日记 2023/8/15 9:11:00

DG故障切换及DG Broker失效配置清理

DG故障切换及DG Broker失效配置清理 DG故障强制切主DG Broker原有配置清理 DG故障强制切主 主库发生故障无法在短时间内恢复时&#xff0c;需要执行主备切换。此时由于DG Broker无法连接到主库&#xff0c;故不能通过Broker切换&#xff0c;只能手动在备库进行切主。 --断开备…...

编程日记 2023/8/15 9:09:58

地毯（暴力+差分两种方法）

题目描述 在 nx n 的格子上有 m 个地毯。 给出这些地毯的信息&#xff0c;问每个点被多少个地毯覆盖。 输入格式 第一行&#xff0c;两个正整数 n,m。意义如题所述。 接下来 m 行&#xff0c;每行两个坐标 (x_1,y_1) 和 (x_2,y_2)&#xff0c;代表一块地毯&#xff0c;左上…...

编程日记 2023/8/15 9:08:58

最新智能AI系统+ChatGPT源码搭建部署详细教程+知识库+附程序源码

近期有网友问宝塔如何搭建部署AI创作ChatGPT&#xff0c;小编这里写一个详细图文教程吧。 使用Nestjs和Vue3框架技术&#xff0c;持续集成AI能力到AIGC系统&#xff01; 增加手机端签到功能、优化后台总计绘画数量逻辑&#xff01;新增 MJ 官方图片重新生成指令功能同步官方 …...

编程日记 2023/8/15 9:07:56

记一次Kafka重复消费解决过程

起因&#xff1a;车联网项目开发&#xff0c;车辆发生故障需要给三个系统推送消息&#xff0c;故障上报较为频繁&#xff0c;所以为了不阻塞主流程&#xff0c;采用了使用kafka。消费方负责推送并保存推送记录&#xff0c;但在一次压测中发现&#xff0c;实际只发生了10次故障&…...

编程日记 2023/8/15 9:06:55

人工智能在公检系统中的应用：校对软件助推刑事侦查工作

人工智能在公检系统中的应用&#xff0c;尤其是校对软件的应用&#xff0c;可以有效地助推刑事侦查工作。 以下是校对软件在刑事侦查工作中的一些应用方面&#xff1a; 1.自动校对和纠错&#xff1a;校对软件可以自动检测和纠正刑事侦查报告中的语法、拼写和标点错误等问题。通…...

编程日记 2023/8/15 9:05:53

OSI七层模型和TCP/IP四层模型

OSI七层模型和TCP/IP四层模型 七层模型(OSI) OSI七层模型&#xff08;Open Systems Interconnection Reference Model&#xff09;是一个用于计算机网络体系结构的标准化框架&#xff0c;旨在定义网络通信中不同层次的功能和协议。 各个层次具体如下&#xff1a; 物理层&am…...

编程日记 2023/8/15 9:04:51

vant金额输入框

1.在components中新建文件夹currency&#xff0c;新建index.js import Currency from ./src/currency.vueCurrency.install function (Vue) {Vue.component(Currency.name, Currency) }export default Currency 2.在currency中新建文件夹src&#xff0c;在src中间currency.v…...

编程日记 2023/8/15 9:03:49

uni-app base64转图片

pathToBase64 pathToBase64(path).then(base64 > {console.log(base64)}).catch(error > {console.error(error)})base64ToPath base64ToPath(base64).then(path > {console.log(path)}).catch(error > {console.error(error)})首先将插件引入项目。按照image-to…...

编程日记 2023/8/15 9:02:47

【webpack】自定义loader

&#x1f4dd;个人主页&#xff1a;爱吃炫迈 &#x1f48c;系列专栏&#xff1a;前端工程化 &#x1f9d1;‍&#x1f4bb;座右铭&#xff1a;道阻且长&#xff0c;行则将至&#x1f497; 文章目录 loaderloader引入方式loader传入/接收参数传入参数接收参数 loader返回值retur…...

编程日记 2023/8/15 9:01:46

【kubernetes】在k8s集群环境上，部署kubesphere

部署kubesphere 学习于尚硅谷kubesphere课程 前置环境配置-部署默认存储类型 这里使用nfs #所有节点安装 yum install -y nfs-utils# 在master节点执行以下命令 echo "/nfs/data/ *(insecure,rw,sync,no_root_squash)" > /etc/exports # 执行以下命令&#xff…...

编程日记 2023/8/15 9:00:45

STM32 F103C8T6学习笔记4：时钟树、滴答计时器、定时器定时中断

今日理解一下STM32F103 C8T6的时钟与时钟系统、滴答计时器、定时器计时中断的配置&#xff0c;文章提供原理&#xff0c;代码&#xff0c;测试工程下载。 目录 时钟树与时钟系统&#xff1a; 滴答计时器&#xff1a; 定时器计时中断&#xff1a; 测试结果&#xff1a; 测…...

编程日记 2023/8/15 8:59:44

代理模式【Proxy Pattern】

什么是代理模式呢&#xff1f;我很忙&#xff0c;忙的没空理你&#xff0c;那你要找我呢就先找我的代理人吧&#xff0c;那代理人总要知道 被代理人能做哪些事情不能做哪些事情吧&#xff0c;那就是两个人具备同一个接口&#xff0c;代理人虽然不能干活&#xff0c;但是被 代…...

编程日记 2023/8/15 8:58:43

Oracle切割字符串的方法，SQL语句完成。

Oracle用正则的方式循环切割字符串 需求&#xff1a;有一个这样子的 Str “‘CNJ-520-180500000001|CNJ-520-181200000001|CNJ-520-190300000001|CNJ-520-190100000001|CNJ-520-181200000002’” &#xff0c;然后我需要拿到每一个单号&#xff0c;每一个单号都要走一遍固定的…...

编程日记 2023/8/15 8:57:38

4步实现代码块专业化管理：技术文档效率提升指南

4步实现代码块专业化管理&#xff1a;技术文档效率提升指南 【免费下载链接】obsidian-better-codeblock Add title, line number to Obsidian code block 项目地址: https://gitcode.com/gh_mirrors/ob/obsidian-better-codeblock 在技术文档创作过程中&#xff0c;代码…...

编程新知 2026/4/7 8:21:00

解锁Dell G15散热潜能：开源Thermal Control Center实战指南

解锁Dell G15散热潜能&#xff1a;开源Thermal Control Center实战指南 【免费下载链接】tcc-g15 Thermal Control Center for Dell G15 - open source alternative to AWCC 项目地址: https://gitcode.com/gh_mirrors/tc/tcc-g15 厌倦了官方AWCC的臃肿和迟缓&#xff1…...

编程新知 2026/4/7 8:14:55

Wan2.2-I2V-A14B高性能推理：C++后端服务开发与优化

Wan2.2-I2V-A14B高性能推理&#xff1a;C后端服务开发与优化 1. 为什么需要C高性能推理服务 在实时图像生成场景中&#xff0c;毫秒级的延迟差异可能直接影响用户体验和业务转化率。传统基于Python的Web框架&#xff08;如Flask/FastAPI&#xff09;虽然开发便捷&#xff0c;…...

编程新知 2026/4/7 7:38:22

南北阁Nanbeige 4.1-3B生成效果：Python入门学习路径规划与习题生成

南北阁Nanbeige 4.1-3B生成效果&#xff1a;Python入门学习路径规划与习题生成 最近在尝试各种AI模型&#xff0c;想看看它们在实际应用场景里到底能帮上什么忙。正好有个朋友想学Python&#xff0c;问我有没有好的学习路线推荐。我手头事情多&#xff0c;没法给他从头到尾规划…...

编程新知 2026/4/7 7:30:16

GLM-OCR嵌入式部署轻量化实践：从服务器到边缘设备的模型压缩

GLM-OCR嵌入式部署轻量化实践&#xff1a;从服务器到边缘设备的模型压缩 最近在做一个智能零售柜的项目&#xff0c;需要实时识别商品包装上的文字信息。一开始我们用的是云端API&#xff0c;识别效果确实不错&#xff0c;但网络延迟和稳定性成了大问题——有时候网络一波动&a…...

编程新知 2026/4/7 6:40:31

Tsuru vs Kubernetes：容器化部署工具终极对比指南

Tsuru vs Kubernetes&#xff1a;容器化部署工具终极对比指南 【免费下载链接】tsuru Open source and extensible Platform as a Service (PaaS). 项目地址: https://gitcode.com/gh_mirrors/ts/tsuru 在当今云原生技术飞速发展的时代&#xff0c;选择合适的容器化部署…...

编程新知 2026/4/7 4:09:35

OpenAI Agents SDK 中文实战指南：从入门到多代理协作

1. 为什么你需要OpenAI Agents SDK 第一次接触这个SDK时&#xff0c;我正为一个客户设计智能客服系统。传统方案需要写大量if-else逻辑判断用户意图&#xff0c;而Agents SDK的多代理协作机制让我眼前一亮——就像组建了一支各有所长的AI团队&#xff0c;数学问题自动转交数学专…...

编程新知 2026/4/7 2:15:15

STM32外设驱动库解析与实战应用

1. 为什么需要STM32外设驱动库&#xff1f;作为一名嵌入式开发者&#xff0c;我深知在STM32项目开发中最耗时的往往不是核心业务逻辑&#xff0c;而是各种外设的初始化和配置。每次新建项目都要重复编写USART、I2C、SPI等外设的初始化代码&#xff0c;不仅效率低下&#xff0c;…...

编程新知 2026/4/7 1:48:55

Soundpad 免安装绿色版 下载 游戏语音与直播的专业音效播放神器

简介说明 Soundpad&#xff1a;游戏语音与直播的专业音效播放神器 Soundpad 是由德国独立开发者 Leppsoft 推出的 Windows 平台专业音效板&#xff08;Soundboard&#xff09;软件&#xff0c;核心功能是将本地音频文件实时混入麦克风信号&#xff0c; 在语音聊天、游戏内语音…...

编程新知 2026/4/7 1:38:41

RT-Thread 4.1.0内核更新与静态HOOK机制解析

1. RT-Thread 4.1.0内核更新概览RT-Thread作为国内领先的物联网实时操作系统&#xff0c;其4.1.0版本的发布标志着内核稳定性和功能性又迈上了一个新台阶。作为一名长期使用RT-Thread进行嵌入式开发的工程师&#xff0c;我发现这次更新虽然看似改动不大&#xff0c;但每个特性都…...

编程新知 2026/4/7 0:17:25