Vue项目目录结构优化总结

原创 已于 2022-03-14 11:14:01 修改 · 720 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #webpack #vue.js #vue

于 2020-10-17 12:40:39 首次发布

由于刚开始用，不完善的后面想到会继续补充

一、项目基本结构如下

在这里插入图片描述
图是借的，使用Vue cli脚手架搭建可查看文章：
Vue环境搭建（Vue-cli脚手架）

二、build：构建编译脚本目录

在这里插入图片描述

三、config：构建配置目录

在这里插入图片描述

四、src：source目录(非常重要，核心代码都在里面)

在这里插入图片描述

如果大家想一起交流学习，共同进步，欢迎搜索公众号“是日前端”，输入关键词如：前端基础，获取资料，资料刚开始整理，目前还在完善中，点击交流群按钮进交流群，群里仅限技术交流、面试交流等，需要其它相关资料可以群里说，后续交流群人数增多会考虑特色内容，再次感谢大家的支持~

Vue项目性能优化实战总结，7个实用方法
小帅的编程笔记
10-14 3384
你知道你的项目的首次加载时间需要多久吗？你有给自己的项目做过性能优化吗？ 据统计53%的用户不会等待超过3秒就会关闭掉网页，所以对于项目的性能优化尤为的重要。 闲话少说，今天我们来详细了解如何优化Vue项目的性能。 分析项目bundle大小 打包后的文件大小直接影响我们访问的加载速度，所以我们要知道哪些打包文件存在性能问题。 查看bundle大小主要有两种方法 report 使用webpack-bundle-analyzer来生成一个报告，可以清晰直观的看出每个打包后文件的大小 我们在Vue项目的packa
深入理解 Vue 3 项目结构与运行机制
Smell_of_earth的博客
03-20 1552
Vue 3项目含index.html等核心文件，组件是构建块，借助Router和Vuex管理路由与状态，经特定流程可启动、构建与格式化代码 。
Vue进阶系列 --- 页面架构优化
帕尼尼的博客
07-08 7644
写在前面 玩vue已经快一年了，回首第一次遇见vue的时候，还是大二的暑假，一晃已经走完了大三。我们都知道编程的学习是分软功和硬功的。外练筋骨皮，内练一口气就是这个道理。 那么什么是硬功呢？硬功就是Vue语法的掌握，JS语法的掌握等等。 那么什么是软功呢？算法思想，编程思想，架构思想。 思想思想，对咯，软功就是思和想。一个没有思想的程序员，只知道重复搬砖，不知道造轮子，组...
Vue 实战：从零搭建规范的项目目录结构（含 utils、api 等核心目录设计与配置）
最新发布
qq_40303030的博客
10-22 1086
本文详细介绍了如何构建可扩展的Vue项目目录结构，重点解决中大型项目中目录混乱、维护困难的问题。文章提出按功能职责划分的目录方案，包括api（接口管理）、utils（工具函数）、hooks（复用逻辑）等核心模块，并给出具体实现代码和配置方法。通过路径别名、单向依赖原则等设计，可显著提升开发效率和代码质量。针对不同规模项目，作者还提供了调整建议和团队协作规范。规范的目录结构虽增加初期工作量，但能带来长期开发效率提升、代码可维护性增强等显著收益。
vue-cli3单页构建大型项目方案
11-20
一、vue-cli3单页面构建方案 1、在目标文件夹内执行 vue ui ; 一个ui版界面，用于创建vue项目； 2、打开router文件夹内的index，看情况配置router的模式，是默认的hash还是history？ps:个人推介history模式，因为内嵌如app的H5页面的话，有可能某些app是不允许页面上带有’#’的，而hash会在url上利用#来做路由转发。ps:history模式在发布到服务器上需要nginx配置一下。详情请自行百度。 const router = new VueRouter({ base: '/', mode: 'history', //还可设置为'
vue项目优化目录
qq_38143787的博客
10-21 277
vue项目的优化小记： 网上一番搜索，发现优化点主要在如下几个方面: 一、开启gzip压缩功能 二、引入CDN 三、路由懒加载 四、某些第三方组件按需加载而不是全部加载 五、较小的图片资源用base64嵌入src中，减少http请求 ...
vue项目目录结构详解
一棵星星
03-18 8250
目录截图： 1. build：构建脚本目录 build.js ---- 生产环境构建脚本 build-server.js ---- 运行本地构建服务器，可以访问构建后的页面 dev-client.js ---- 开发服务器热重载脚本，主要用来实现开发阶段的页面自动刷新 dev-server.js ---- 运行本地开发服务器 check-version.js ---- 检查npm、node.js版本 utils.js ---- 构建相关工具方法 vue-loader.conf.js ---- 配置css
总结4个方面优化Vue项目
10-17
在当前这篇文章中，我们将对优化Vue项目的实践策略进行总结，并围绕四个关键方面展开讨论，希望能够帮助开发者提升Vue应用的性能和效率。 ### 1. 运行时优化 #### v-if与v-show的选择使用 在Vue项目中，`v-if`与`...
Vue项目总结之webpack常规打包优化方案
11-30
Vue项目的构建速度优化是开发过程中不可或缺的一环，尤其是在大型项目中，较长的打包时间会影响团队的效率。本文将深入探讨如何使用Webpack进行常规的打包优化，以缩短项目的构建时间。 首先，我们需要理解打包慢的...
记一次vue-webpack项目优化实践详解
10-17
然而，项目的优化不仅仅局限于第三方库的按需引入，还可以涉及代码结构优化、懒加载、图片压缩、tree-shaking等更多方面。这是一个持续的过程，需要不断地学习和实践，以实现最佳的性能表现。本文仅作为一次简单的...
vue项目优化
sinat_37680470的博客
05-11 363
1.路由懒加载2.图片懒加载3.开启gzip
vue开发目录
weixin_30273931的博客
07-04 156
基于 vue-cli 脚手架生成项目模板基础上做了些改动，加入了 vue-router ，vuex 等配套设施，本地 dev server 中加入了接口 mock 功能，还增加一个 build server 来预览 build 结果页面，前后端通过 spa 的方式实现分离，并相应做了分离后的联调，部署方案。在这里俺也对整个过程简单做个介绍吧。 目录结构 ├── index.html ...
前端技术系列（一）Vue项目目录结构
wangchao4732的博客
05-16 2874
这只是一个简单的Vue项目目录结构示例，实际上，随着项目的复杂性增加和使用的工具和库的不同，目录结构可能会有所变化。Vue项目的目录结构通常是由Vue CLI（Vue命令行界面）生成的默认结构，它提供了一个基本的项目框架。通过将模板、脚本和样式集中在一个文件中，Vue文件提供了更高的可维护性和可读性，使得组件的开发更加方便和快速。：这是通过npm安装的第三方依赖库的目录，包含了项目所使用的所有依赖项。：这是存放可复用组件的目录，通常包含一些小型的、独立的Vue组件。
Vue项目的目录结构
Wanan_J的博客
01-29 541
Vue项目目录结构 详细介绍
Vue项目 目录结构
富有知识的小窝
07-21 310
App.vue引用页面)等软件打开会发现很多文件。打开项目文件夹所在终端输入。(main.js通过。当我们把项目文件夹用。如何将代码渲染到页面上。(页面引用组件)启动一个vue项目。
vue-cli#2.0 webpack 配置分析
Vin1992的博客
03-31 954
vue-cli 构建项目目录结构及说明目录结构. |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-cli
vue项目目录结构
weixin_34013044的博客
03-03 173
VUE项目目录结构 如上图所示，我们的目录结构就是这样的了。 目录/文件说明 build 这个是我们最终发布的时候会把代码发布在这里，在开发阶段，我们基本不用管。 config 配置目录，默认配置没有问题，所以我们也不用管 node_modules 这个目录是存放我们项目开发依赖的一些模块，这里面有很多很多内容，不过高兴的...
vue项目目录结构图解
05-31
<think>好的，用户想了解Vue项目的标准目录结构及各部分功能。首先，我需要回忆Vue2和Vue3项目的常见目录结构，因为用户没有指定版本，可能需要涵盖两者的异同。记得Vue项目通常使用Vue CLI或Vite创建，结构可能略有不同。比如，VueCLI生成的项目有public目录，而Vite可能用index.html在根目录。需要区分这些细节。 先从根目录开始，常见的文件夹如src、public、node_modules等。src里通常包含核心代码，比如components、assets、router、store、views等。需要解释每个文件夹的作用，比如components存放可复用组件，router处理路由配置，store用于Vuex状态管理。 还要注意配置文件，比如vite.config.js或vue.config.js，package.json的作用，以及.env环境变量文件。这些配置文件的用途需要说明，比如别名设置、插件配置等。 用户提供的引用中有提到Vite的配置文件，里面用到了别名@指向src目录，这点需要强调，方便模块导入。同时，README.md的重要性也要提及，帮助项目维护。另外，可能需要区分不同构建工具带来的结构差异，比如Vite和VueCLI在项目结构上的不同点。比如Vite的index.html放在根目录，而VueCLI可能在public里。 还要考虑到测试目录tests或__tests__，以及文档目录docs是否存在。需要全面覆盖，但避免信息过载，保持结构清晰。 最后，生成相关问题时要围绕目录结构、配置、优化等方面，帮助用户深入理解。比如如何组织大型项目的结构，配置文件的作用，环境变量的使用等。需要确保使用中文，行内公式正确，引用用户提供的引用内容，但用户给的引用似乎与Vue配置相关，所以需要适当融入回答中。比如在讲解别名配置时，可以引用示例中的vite.config.js代码部分，说明alias的设置。 总结，回答结构应分点说明每个目录和文件，结合示例代码，引用相关部分，最后生成相关问题引导用户进一步学习。</think>### Vue项目标准目录结构解析 以下是Vue 3项目（基于Vite构建工具）的典型目录结构及核心功能说明： #### 一、根目录结构 ``` my-vue-project/ ├── node_modules/ # 项目依赖库（自动生成） ├── public/ # 静态资源目录（直接复制到dist） ├── src/ # 核心开发目录 ├── .gitignore # Git忽略规则 ├── index.html # 主入口HTML文件 ├── package.json # 项目配置和依赖管理 ├── vite.config.js # Vite构建配置 └── README.md # 项目说明文档 ``` #### 二、src目录详解 ``` src/ ├── assets/ # 静态资源（图片/字体/CSS等） ├── components/ # 可复用组件 ├── router/ # 路由配置（需安装vue-router） ├── stores/ # 状态管理（Pinia/Vuex） ├── views/ # 页面级组件 ├── utils/ # 工具函数 ├── services/ # API请求模块 ├── App.vue # 根组件 └── main.js # 应用入口文件 ``` #### 三、关键配置文件说明 1. **vite.config.js** ```javascript export default defineConfig({ plugins: [vue()], resolve: { alias: {'@': fileURLToPath(new URL('./src', import.meta.url))} // 路径别名配置[^1] } }) ``` 2. **package.json** 包含项目元数据、依赖版本、npm scripts（启动/构建命令）等[^2] #### 四、特殊文件作用 - **.env.development**：开发环境变量 - **.eslintrc.js**：代码规范配置 - **jsconfig.json**：JavaScript项目配置 - **tests/**：单元测试目录
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值