Vue3项目目录结构以及变化一图看懂

Unksoo

已于 2024-01-11 16:23:54 修改

阅读量1.1k

点赞数 9

文章标签： vue.js javascript 前端

于 2024-01-11 11:16:57 首次发布

本文链接：https://blog.csdn.net/m0_58462450/article/details/135521819

版权

本文介绍了使用createvue构建Vue项目后的主要组成部分，包括配置文件（如Vite.config.js和Package.json），默认页面（index.html），以及关键文件夹如node_modules、public、src、components和assets，以及它们的功能和作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过create vue创建vue项目后的基本框架如下

整体变化

Vite.config.js

Vue项目的配置信息，如：端口号等

Package.json

项目配置文件，包括项目名，版本号，依赖包，版本等

package-lock.json

项目配置文件（不需要修改）

index.html

默认首页

node_modules

下载的第三方包存放目录

public

公告资源

Src

后面百分之90的代码都是在这写

assets

静态资源目录，存放图片，字体.....

components

组件目录，存放通用组件

App.vue

根组件

main.js

入口文件

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Unksoo

关注关注

9
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

如何创建一个vite+vue3+ts项目（小白必看）

蜗牛~~

06-15

2564

当修改代码时，HMR 能够在不刷新页面的情况下，把页面中发生变化的模块，替换成新的模块，同时不影响其他模块的正常运作。在我们使用 node 方法（比如 path.resolve）时提供 ts 类型声明，否则编辑器会报错，虽然不影响代码运行，但是会有红线很影响心情，如下图所示。Pinia 支持热更新，所以你可以编辑你的 store，并直接在你的应用中与它们互动，而不需要重新加载页面，允许你保持当前的。（2）写好页面之后，我们来创建路由，在 src 路径下新建 router/index.ts。

vue2项目升级到vue3经历分享1

warrah 南极狼

04-23

2231

看到下面这个结果真是头大，工程师是不是在摸鱼，复制、粘贴不用动脑，为何不写一个指令来实现。这个里面的工作量非常之大，得耐心去调整。，工程师采用vuex存储状态，肯定不合理，结果就是多租户被架空。像这类问题估计99%的前端开发工程师面试一定能答上来，但是实际应用就只能呵呵了。看看原来的store方式调用api，写法确实冗余拖拉，没有新的方式简洁。升级到vue3，预计工作量有点大，于是想着把过程记录下来。模式，例如这样的，是直接引用了api里面的方法。新方式，一句话定义完了，不用搞那么多绕绕。

1 条评论您还未登录，请先登录后发表或查看评论

Vite文件目录结构介绍

技术btbysj的博客

06-20

1136

对Vite创建的shop-admin项目的文件目录用途进行介绍

Vue3 目录结构

wjs2024的博客

11-17

807

Vue3 是目前最流行的前端框架之一，它以其轻量级、高性能和易用性而受到开发者的喜爱。在使用 Vue3 进行项目开发时，合理的目录结构对于项目的维护和扩展至关重要。本文将详细介绍 Vue3 项目的标准目录结构，并提供一些最佳实践建议。

VUE3项目的文档结构分析

热门推荐

weixin_48327767的博客

05-19

1万+

一、vue3项目的目录结构详解 node_modules：通过 npm install 下载安装的项目依赖包 public：存放静态资源公共资源，不会被压缩合并 —3DModel：存放.glb3D模型 —favicon.ico：网站图标 —index.html：首页入口.html文件 src：项目开发主要文件夹 —api —assets：静态文件，存放图片 —components：存放组件 —store：与vuex相关 —styles：存放样式 —utils —views：界面组件 —App.vue：根组件

Vue 3项目的目录结构

qq_43435403的博客

12-10

680

存放不可编译的静态资源文件，当进行项目构建时，该目录下的文件会被复制到dist目录，该目录下的文件需要使用绝对路径访问。此外，当执行了yarn build命令后，在项目目录中会出现dist目录，该目录中保存的是项目构建后的文件。使用vite创建完VUE项目后，使用VS Code编辑器打开项目目录，可以看到一个默认生成的项目目录结构。：存放可编译的静态资源文件，例如图片、样式文件等。：默认的主渲染页面文件，同时也是页面的入口文件。：项目的入口文件，用于创建Vue应用实例。：存放单文件组件，即.vue文件。

认识vue3.0项目的目录结构

m0_61472704的博客

02-08

3127

上一篇笔记新建一个vue3.0项目新建项目后，用vscode打开，会看到项目目录，如下图来看看我们新建的项目里有哪些内容 node_modules npm 加载的项目依赖模块 public 用于存放静态资源，不会被压缩、合并 src 主要开发内容都在这个文件夹下，包含以下几项： ① assets：存放图片、logo ②components:：存放组件 ③ router：存放路由（路由用于界面之间跳转） ④ store：仓库...

Vue3的目录结构

小莓的博客

03-03

5243

1：dist目录存放打包之后的代码文件 2：node_modules npm 加载的项目依赖模块 3：public 公共资源目录 4：src 要开发的目录。里面包含了几个目录及文件：：assets 存放每个页面对应的css、js公共函数以及图片文件：components 存放项目使用的公共组件：router 存放vue-router相关的文件：types 存放typescript 支持vue文件的相关配置文件 ...

vue2 源码简易版，涵盖vue最核心思想，初学者也能看懂！

10-09

3. **虚拟DOM**：Vue使用虚拟DOM来提高性能，它在内存中构建一棵抽象的树，当数据变化时，Vue会计算出最小的DOM变更，从而高效地更新页面。 4. **响应式系统**：Vue的响应式系统基于数据依赖的观察者模式实现，当...

Vue实战案例：一步步构建企业级项目1

2401_87197766的博客

11-21

1543

Vue是一个能用于的，主要用于和。‌ Vue由（Evan You）在2014年创建，，其他两个是Angular.js和React.js。Vue的核心库，易于与其他库或现有项目集成，并且具有轻量级和高效的特点‌。它是一个开源项目，旨在提供一个简单、灵活且高效的解决方案来构建现代Web应用程序，。

1. vue3从零搭建项目-页面初始

weixin_55555471的博客

10-07

1592

vue3+typescipt 项目开发

Vue3入门系列（二）目录结构认识

云逸的博客

12-14

2422

Vue3项目npm与vite创建的脚手架项目结构说明。

vue3目录结构详细说明及文件命名规范

残阳曦月

01-18

8284

Vue组件：文件名和引用时都应采用PascalCase，即每个单词首字母大写的驼峰命名法，例如 MyComponent.vue。目录：推荐使用小写字母和短横线 - 来分隔单词，例如 components/common。Vue3 项目的目录结构通常遵循一定的组织原则，旨在提高代码的可读性、可维护性和模块化。在 Vue3 中，单文件组件 (SFC) 的内部结构也遵循特定规范，通常包含、普通变量：采用驼峰命名法（camelCase），例如 myVariable。

【04Vue3 目录结构】VUE3目录结构概述结构详解目录结构的作用注意事项

燃正科技

06-08

4717

在 Vue3 项目中，通常采用以下目录结构组织代码：目录结构详解：该目录存放不经过 webpack 构建处理的静态资源文件，例如 HTML 文件、图标等。：主要代码存放目录。：用于存放项目中使用的静态资源，例如图片、字体等。：存放 Vue 组件文件，通常按功能或模块进行组织。：存放页面级组件，用于组织多个组件形成完整页面。：项目的根组件，包含应用的整体结构和布局。：Vue3 的入口文

02vue3实战-----项目目录详解

太阳与星辰的博客

02-06

1559

简单讲述了vue3新脚手架中目录的结构及相关用法。

Vue3 入门笔记 ---- 创建Vue3项目和目录结构解释

panzhixiang

10-17

1403

Vue3入门

vite+vue3项目的目录结构

godpunishv3的博客

07-01

359

vite.config配置项目。比如可以配置端口号。src.plugin放一些vite插件相关的东西。src.store放和vue状态管理有关的文件。src.router放一些和路由相关的东西。node_modules目录放一些依赖。src.components 放组件的。src.utils放一些通用的工具类。src.assets放静态资源的。src.pages放页面级组件的。pulice 存放公共资源的。