Vue组件的存放目录问题

最新推荐文章于 2025-10-22 17:20:36 发布
原创 最新推荐文章于 2025-10-22 17:20:36 发布 · 373 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

本文介绍了Vue文件的两种主要类型——页面组件和复用组件，强调了它们在配置路由规则和文件夹存放中的区别，以便于代码维护。src/views用于页面组件，src/components则存放复用组件，以展示数据和提高复用性。

注意： .vue文件 本质无区别

1.组件分类

.vue文件分为2类，都是 .vue文件（本质无区别）

  • 页面组件 （配置路由规则时使用的组件）

  • 复用组件（多个组件中都使用到的组件）

2.存放目录

分类开来的目的就是为了 更易维护

  1. src/views文件夹

    页面组件 - 页面展示 - 配合路由用

  2. src/components文件夹

    复用组件 - 展示数据 - 常用于复用

 

详细盘点Vue3项目中的各种组件文件夹（用于存放‘.vue’文件）
Ryan-Yu的博客
04-03 1946
每个页面组件对应着一个具体页面，通常包含特定页面的业务逻辑和交互功能。页面组件可以通过路由进行访问和导航，每个页面组件对应着一个或多个路由路径。例如，首页、用户个人资料页、商品详情页等都可以作为页面组件存放在这个文件夹下。此default.vue布局组件定义了页面的整体布局结构，包括头部导航和底部版权信息。此组件作为页面的框架，为每个页面提供一致的整体布局样式。通常用于构建页面中的具体功能模块。在项目中多次使用，并且不依赖于具体的业务逻辑。
如何在JS文件中获取Vue组件
10-14
// 存放调用此js的vue组件实例 const sendThis = (_this) => { vm = _this; }; export default { sendThis, // 暴露函数 getData() { console.log(vm); // 打印拿到的组件实例 console.log(vm.user...
【vue】组件目录存放问题（组件分类）
m0_73956614的博客
05-20 284
总结：
vue 项目中 components、views、layout 各个目录规划，组件、页面、布局如何实现合理搭配，实现嵌套及跳转合理，使用完整说明
最新发布
bsklhao的博客
10-22 906
在Vue项目中，合理规划componentsviews和layout目录结构是构建可维护性高、扩展性强应用的关键。
vue目录详解以及文件说明
Lzxzxzx_的博客
03-04 1484
在工程中，并不是所有文件都需要保存到版本库中的，例如“target”目录及目录下的文件就可以忽略。在Git工作区的根目录下创建一个特殊的.gitignore文件，然后把要忽略的文件名填进去，Git就会自动忽略这些文件或目录。记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）,不能锁定后面的小版本，vue-cli的配置文件 (vue-cli4默认没有这个文件，可以自己新建)入口文件，也就是打包或者说运行的时候，所运行的第一个文件。放置系统的静态文件，比如，图片，全局配置文件。
【vue3 改造文件目录，安装相应组件】
老手艺人的博客
08-18 639
vue3 安装vue router
Vue组件文件夹结构建议
weixin_34242658的博客
12-07 4730
前言 首先声明。 以下建议并不会直接提高项目的性能。 只是方便更好的开发与维护，毕竟代码是人写的。 全局通用组件 位于src/components。 注意与业务组件区分，全局通用组件更强调基础性。类似于一个UI框架里的各种Input、Button、Tab，只是在此处是你自己封装的。 建议风格 文件夹命名使用PascalBase风格 一个文件夹代表一个组件 组件使用index.vue导出 示例 ...
教你搭建按需加载的Vue组件库(小结)
10-16
本文档详细介绍了如何搭建一个可以实现按需加载的Vue组件库。 首先，我们需要理解按需加载的原理。按需加载，顾名思义，是将组件库中的不同组件拆分成单独的文件，使用者可以根据需要引入特定组件，而不是一次性...
精选资源
vite5+vue3+ import.meta.glob动态导入vue组件
03-25
例如，如果你有一个 `src/components` 目录，里面包含许多 Vue 组件，你可以使用 `import.meta.glob` 来一次性导入这些组件，无需手动列出每个文件。这样在编写应用时，可以方便地按需加载组件，实现懒加载，提高...
精选资源
vue组件化编程-todoList案例.zip
07-14
- 在`src/components`目录下，通常会看到不同的Vue组件文件，如`TodoItem.vue`和`TodoList.vue`，它们分别代表单个待办事项和整个待办事项列表。 2. **模板语法**： - Vue模板语法基于HTML，用于声明式地渲染数据...
自定义Vue组件打包、发布到npm及使用教程
10-16
在开发Vue组件时，需要为每个组件创建一个单独的文件夹，并在其中存放组件对应的.vue文件以及一个配置文件（通常命名为index.js）。这个配置文件将用于在Vue项目中全局注册该组件。组件文件中的name属性是必须的，...
Vue 存储插件的底层原理，你不知道的 localStorage API
LuckyWinty的博客
05-23 169
点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言当谈到 Web 应用的客户端存储时，localStorageAPI 脱颖而出，它允许开发者直接在浏览器中存储键值对。在开发 Vue 应用时，我们有时候需要将用户数据保存在本地，实现持久化存储。我们可以自己编写存储功能，也可以使用 Pinia 生态的存储插件，比如目前人气最高的pinia-plugin-persistedstate，而...
Vue初体验之Vue的组件和路由
qq_45117205的博客
08-29 1039
Vue的组件、路由和生命周期
Vue组件
amuist_ting的博客
11-17 574
一般来说，组件大致可以分为三类： 1.页面级别的组件 通常是pages目录下的.vue组件，是组成整个项目的一个大的页面，一般不会有对外的接口 2.业务上可复用的基础组件 通常是在业务中被各个页面服用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用，这一类组件通常是实现某个功能 3.与业务无关的独立组件 通常是与业务功能无关的独立组件，这类组件通常是作为基础组件，在各个业务组件或页面组件中被使用 ----组件创建 组件的使用分为组件构造、注册组件、
vue项目搭建目录以及标准（慢慢摸索）
shaoxxxxx的博客
11-13 732
项目搭建： 1.项目公共组件放在src/components。 2.由于代码结构复杂拆分出去的，业务组件放在子目录components。 3.vue文件里面把数据处理代码拆分出去，写好的文件css也独立拆分出去（细小的组件一行两行的未拆分）。使得vue文件组件划分： View层减重的基础，将可共用的视图组件剥离出去，改为消息机制进行通信，甚至直接剥离出包含视图和业务代码的业务逻辑组件，都可以有效地拆分View层，降低代码的复杂度。 Api/ axios的统一放置 /api_user 接口
搭建vue项目以及vue目录介绍
m0_50853977的博客
01-04 737
搭建vue项目 一、安装node 1、下载地址 http://nodejs.cn/download/ 2、检查是否安装成功及版本 NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题 允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 命令 node -v 和 npm -v 二、搭建vue项目 1、全局安装vue-cli，命令 npm
Vue项目的详细目录结构解析
weixin_45131680的博客
06-20 5890
我们在使用Vuevue-demo├── dist //项目构建后的输出目录├── public├── src├── tests //选装：测试模块├── ...dist—— 项目构建打包后的默认输出目录。查看详情 ->—— 项目依赖文件，其中包括很多基础依赖和自己安装的依赖。查看详情 ->public—— 存放公共资源和项目的主入口文件index.html。查看详情 ->src—— 项目核心文件夹：包括项目源码，各种静态资源等等。是我们开发的重点工作目录。查看详情 ->test。
vue中目录详解
weixin_64315174的博客
03-02 3105
vue中目录详解
VUE项目组件的使用
xirunxiang369的博客
04-06 321
vue项目生成后会会生成很多文件找到res下的components文件就是放组件的文件新建一个后缀为vue的文件写入好了已经创建了一个简单的组件。
Vue组件开发实践与示例分析
资源摘要信息: "在本文档中，我们将探讨关于Vue组件的示例以及相关的开发细节。Vue.js是一个流行的前端JavaScript框架，它允许开发者通过组件化的方式构建用户界面。组件是Vue的核心概念之一，它允许开发者封装可...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

板砖拍在墙上

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值