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

Vue 目录结构 vite 项目

news 2025/9/22 11:42:36

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

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/7/30 7:20:17

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/9/20 11:01:53

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/9/14 12:35:07

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/9/20 4:11:38

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

编程新知 2025/8/25 20:38:36

R语言速释制剂QBD解决方案之三

本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...

编程新知 2025/9/2 17:53:12

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/8/11 2:57:01

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...

编程新知 2025/9/13 22:57:57

Modbus RTU与Modbus TCP详解指南

目录 1. Modbus协议基础 1.1 什么是Modbus？ 1.2 Modbus协议历史 1.3 Modbus协议族 1.4 Modbus通信模型 🎭 主从架构 🔄 请求响应模式 2. Modbus RTU详解 2.1 RTU是什么？ 2.2 RTU物理层 🔌 连接方式 ⚡ 通信参数 2.3 RTU数据帧格式 📦 帧结构详解 🔍…...

编程新知 2025/9/10 17:50:53

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API&#xff0c;让你使用Selenium WebDriver来编写功能/校验测试。 通过Selenium Python的API&#xff0c;你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2025/7/8 0:22:23