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

Vue 目录结构 vite 项目

news 2025/7/5 12:11:31

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2025/7/4 19:05:31

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

编程新知 2025/7/4 22:56:30

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

编程新知 2025/7/4 23:21:09

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

编程新知 2025/6/21 13:57:28

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/6/25 0:28:07

STM32F4基本定时器使用和原理详解

STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...

编程新知 2025/7/4 15:34:24

postgresql|数据库|只读用户的创建和删除（备忘）

CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...

编程新知 2025/6/21 18:39:26

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/6/20 11:32:51

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/6/19 14:22:44

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/6/19 5:57:06