Vue 目录结构 vite 项目

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/36246.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入探析设计模式:工厂模式的三种姿态

深入探析设计模式&#xff1a;工厂模式的三种姿态 1. 简单工厂模式1.1 概念1.2 案例1.3 优缺点 2. 抽象工厂模式2.1 概念2.2 案例&#xff1a;跨品牌手机生产2.3 优缺点 3. 超级工厂模式3.1 概念3.2 案例&#xff1a;动物园游览3.3 优缺点 4. 总结 欢迎阅读本文&#xff0c;今天…

go入门实践四-go实现一个简单的tcp-socks5代理服务

文章目录 前言socks协议简介go实现一个简单的socks5代理运行与压测抓包验证 前言 SOCKS是一种网络传输协议&#xff0c;主要用于客户端与外网服务器之间通讯的中间传递。协议在应用层和传输层之间。 本文使用先了解socks协议。然后实现一个socks5的tcp代理服务端。最后&#…

英语词法——代词

代词是用来代替名词、起名词作用的短语、分句和句子的词。英语中代词根据其意义和作用可分为九类:人称代词、物主代词、反身代词、相互代词、指示代词、疑问代词、不定代词、关系代词和连接代词。 第一节 人称代词 一、人称代词的形式和用法 人称代词单数复数第一人称第二人…

【ARM 嵌入式 编译系列 4 -- GCC 编译属性 __read_mostly 详细介绍】

文章目录 __read_mostly 介绍__read_mostly 在 linux 中的使用.data.read_mostly 介绍 __read_mostly 介绍 __read_mostly 是一个在Linux内核编程中用到的宏定义&#xff0c;这是一个gcc编译器的属性&#xff0c;用于告诉编译器此变量主要用于读取&#xff0c;很少进行写入&am…

MYSQL中用字符串2022-07去匹配Date类型大于2022-07-01并小于2022-07-31

正文 需求上&#xff0c;是有个日期字符串&#xff0c;例如2022-07&#xff0c;代表着年月。数据库中表对于这个字段存的是年月日&#xff0c;例如&#xff1a;2022-07-15。 我希望的是&#xff1a;获取到2022-07-01到2022-07-31&#xff0c;之间的数据&#xff0c;条件是&…

21款美规奔驰GLS450更换中规高配主机,汉化操作更简单

很多平行进口的奔驰GLS都有这么一个问题&#xff0c;原车的地图在国内定位不了&#xff0c;语音交互功能也识别不了中文&#xff0c;原厂记录仪也减少了&#xff0c;使用起来也是很不方便的。 可以实现以下功能&#xff1a; ①中国地图 ②语音小助手&#xff08;你好&#xf…

【BASH】回顾与知识点梳理(二十六)

【BASH】回顾与知识点梳理 二十六 二十六. 二十一至二十五章知识点总结及练习26.1 总结26.2 模拟26.3 简答题 该系列目录 --> 【BASH】回顾与知识点梳理&#xff08;目录&#xff09; 二十六. 二十一至二十五章知识点总结及练习 26.1 总结 Linux 操作系统上面&#xff0c…

unittest单元测试

当你在编写测试用例时&#xff0c;可以使用Python内置的unittest模块来进行单元测试。下面是一个逐步指南&#xff0c;帮助你理解如何编写和运行基本的单元测试。 导入必要的模块&#xff1a; 首先&#xff0c;你需要导入unittest模块和需要测试的模块&#xff08;例如&#xf…

运维监控学习笔记8

在服务器端&#xff0c;我们添加了nginx-server的主机&#xff1a; 在解决Error问题的过程中&#xff0c;我还通过zabbix_get这个命令进行了测试&#xff0c;发现是没有的&#xff0c;后来确认是在web页面配置的过程中&#xff0c;我输错了密码。 yum install zabbix-getzabbi…

uniapp-原生地图截屏返回base64-进行画板编辑功能

一、场景 vue写uniapp打包安卓包&#xff0c;实现原生地图截屏&#xff08;andirod同事做的&#xff09;-画板编辑功能 实现效果&#xff1a; 二、逻辑步骤简略 1. 由 原生地图nvue部分&#xff0c;回调返回 地图截屏生成的base64 数据&#xff0c; 2. 通过 uni插件市场 im…

《图解HTTP》——HTTP协议详解

一、HTTP协议概述 HTTP是一个属于应用层的面向对象协议&#xff0c;由于其简捷、快速的方式&#xff0c;适用于分布式超媒体信息系统。它于1990年提出&#xff0c;经过几年的使用与发展&#xff0c;得到不断地完善和扩展。目前在WWW中使用的是HTTP/1.0的第六版&#xff0c;HTTP…

muduo 29 异步日志

目录 Muduo双缓冲异步日志模型: 异步日志实现: 为什么要实现非阻塞的日志

SQL 语句解析过程详解

SQL 语句解析过程详解&#xff1a; 1&#xff0e;输入SQL语句 2&#xff0e;词法分析------flex 使用词法分析器&#xff08;由Flex生成&#xff09;将 SQL 语句分解为一个个单词&#xff0c;这些单词被称为“标记“。标记包括关键字、标识符、运算符、分隔符等。 2.1 flex 原…

【CSS 布局】水平垂直方向居中

【CSS 布局】水平垂直方向居中 单行元素 <div class"container"><div class"item"></div> </div>方式一&#xff1a;relative 和 absolute .container {position: relative;height: 400px;border: 1px solid #ccc;.item {posit…

20个互联网用户Python数据分析项目

这篇文章给大家整理了20个互联网用户数据分析的项目。所有收录的项目&#xff0c;进行了严格的筛选&#xff0c;标准有二&#xff1a; 1.有解说性文字&#xff0c;大家能知道每一步在干嘛&#xff0c;新手友好 2.数据集公开&#xff0c;保证大家可以在原文的基础上自行探索 更…

[保研/考研机试] KY96 Fibonacci 上海交通大学复试上机题 C++实现

题目链接&#xff1a; KY96 Fibonacci https://www.nowcoder.com/share/jump/437195121692000803047 描述 The Fibonacci Numbers{0,1,1,2,3,5,8,13,21,34,55...} are defined by the recurrence: F00 F11 FnFn-1Fn-2,n>2 Write a program to calculate the Fibon…

【STM32】FreeRTOS互斥量学习

互斥量&#xff08;Mutex&#xff09; 互斥量又称互斥信号量&#xff08;本质也是一种信号量&#xff0c;不具备传递数据功能&#xff09;&#xff0c;是一种特殊的二值信号量&#xff0c;它和信号量不同的是&#xff0c;它支持互斥量所有权、递归访问以及防止优先级翻转的特性…

人文景区有必要做VR云游吗?如何满足游客出行需求?

VR云游在旅游行业中的应用正在快速增长&#xff0c;为游客带来沉浸式体验的同时&#xff0c;也为文旅景区提供了新的营销方式。很多人说VR全景展示是虚假的&#xff0c;比不上真实的景区触感&#xff0c;人文景区真的有必要做VR云游吗&#xff1f;我的答案是很有必要。 如果你认…

【跟小嘉学 Rust 编程】十二、构建一个命令行程序

系列文章目录 【跟小嘉学 Rust 编程】一、Rust 编程基础 【跟小嘉学 Rust 编程】二、Rust 包管理工具使用 【跟小嘉学 Rust 编程】三、Rust 的基本程序概念 【跟小嘉学 Rust 编程】四、理解 Rust 的所有权概念 【跟小嘉学 Rust 编程】五、使用结构体关联结构化数据 【跟小嘉学…

【Pytroch】基于K邻近算法的数据分类预测(Excel可直接替换数据)

【Pytroch】基于K邻近算法的数据分类预测&#xff08;Excel可直接替换数据&#xff09; 1.模型原理2.数学公式3.文件结构4.Excel数据5.下载地址6.完整代码7.运行结果 1.模型原理 K最近邻&#xff08;K-Nearest Neighbors&#xff0c;简称KNN&#xff09;是一种简单但常用的机器…