Vue组件的存放目录问题

最新推荐文章于 2024-06-06 08:16:17 发布

板砖拍在墙上

最新推荐文章于 2024-06-06 08:16:17 发布

阅读量289

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Adae_Stevens/article/details/134279002

版权

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

摘要由CSDN通过智能技术生成

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

1.组件分类

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

页面组件（配置路由规则时使用的组件）
复用组件（多个组件中都使用到的组件）

2.存放目录

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

src/views文件夹

页面组件 - 页面展示 - 配合路由用
src/components文件夹

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

板砖拍在墙上

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

Vue组件

amuist_ting的博客

11-17

523

一般来说，组件大致可以分为三类： 1.页面级别的组件通常是pages目录下的.vue组件，是组成整个项目的一个大的页面，一般不会有对外的接口 2.业务上可复用的基础组件通常是在业务中被各个页面服用的组件，这一类组件通常都写到components目录下，然后通过import在各个页面中使用，这一类组件通常是实现某个功能 3.与业务无关的独立组件通常是与业务功能无关的独立组件，这类组件通常是作为基础组件，在各个业务组件或页面组件中被使用 ----组件创建组件的使用分为组件构造、注册组件、

如何在JS文件中获取Vue组件

10-14

// 存放调用此js的vue组件实例 const sendThis = (_this) => { vm = _this; }; export default { sendThis, // 暴露函数 getData() { console.log(vm); // 打印拿到的组件实例 console.log(vm.user...

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

详细盘点Vue3项目中的各种组件文件夹（用于存放‘.vue’文件）

Ryan-Yu的博客

04-03

1178

每个页面组件对应着一个具体页面，通常包含特定页面的业务逻辑和交互功能。页面组件可以通过路由进行访问和导航，每个页面组件对应着一个或多个路由路径。例如，首页、用户个人资料页、商品详情页等都可以作为页面组件存放在这个文件夹下。此default.vue布局组件定义了页面的整体布局结构，包括头部导航和底部版权信息。此组件作为页面的框架，为每个页面提供一致的整体布局样式。通常用于构建页面中的具体功能模块。在项目中多次使用，并且不依赖于具体的业务逻辑。

【vue】组件目录存放问题（组件分类）

m0_73956614的博客

05-20

234

总结：

【vue3 改造文件目录，安装相应组件】

weixin_42524016的博客

08-18

570

vue3 安装vue router

Vue组件文件夹结构建议

weixin_34242658的博客

12-07

4684

前言首先声明。以下建议并不会直接提高项目的性能。只是方便更好的开发与维护，毕竟代码是人写的。全局通用组件位于src/components。注意与业务组件区分，全局通用组件更强调基础性。类似于一个UI框架里的各种Input、Button、Tab，只是在此处是你自己封装的。建议风格文件夹命名使用PascalBase风格一个文件夹代表一个组件组件使用index.vue导出示例 ...

Vue 存储插件的底层原理，你不知道的 localStorage API

LuckyWinty的博客

05-23

点击上方前端Q，关注公众号回复加群，加入前端Q技术交流群前言当谈到 Web 应用的客户端存储时，localStorageAPI 脱颖而出，它允许开发者直接在浏览器中存储键值对。在开发 Vue 应用时，我们有时候需要将用户数据保存在本地，实现持久化存储。我们可以自己编写存储功能，也可以使用 Pinia 生态的存储插件，比如目前人气最高的pinia-plugin-persistedstate，而...

教你搭建按需加载的Vue组件库(小结)

10-16

本文档详细介绍了如何搭建一个可以实现按需加载的Vue组件库。首先，我们需要理解按需加载的原理。按需加载，顾名思义，是将组件库中的不同组件拆分成单独的文件，使用者可以根据需要引入特定组件，而不是一次性...

【Vue】组件的存放目录问题

最新发布

qq_39921135的博客

06-06

288

页面组件 - 页面展示 - 配合路由用。复用组件 - 展示数据 - 常用于复用。src/components文件夹。.vue文件分为2类，都是。分类开来的目的就是为了。src/views文件夹。

vite5+vue3+ import.meta.glob动态导入vue组件

03-25

例如，如果你有一个 `src/components` 目录，里面包含许多 Vue 组件，你可以使用 `import.meta.glob` 来一次性导入这些组件，无需手动列出每个文件。这样在编写应用时，可以方便地按需加载组件，实现懒加载，提高...

vue中目录问题

qq_44841678的博客

10-08

187

vue中路径问题路径： “../”：代表上一层目录； “./” ：代表和本级同级目录； “/” ：代表根目录。还可以在build/webpack.base.conf.js中的resolve的alias中自己配置代理路径。 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } ...

Vue初体验之Vue的组件和路由

qq_45117205的博客

08-29

954

Vue的组件、路由和生命周期

vue目录详解以及文件说明

Lzxzxzx_的博客

03-04

1343

在工程中，并不是所有文件都需要保存到版本库中的，例如“target”目录及目录下的文件就可以忽略。在Git工作区的根目录下创建一个特殊的.gitignore文件，然后把要忽略的文件名填进去，Git就会自动忽略这些文件或目录。记录当前项目所依赖模块的版本信息，更新模块时锁定模块的大版本号（版本号的第一位）,不能锁定后面的小版本，vue-cli的配置文件 (vue-cli4默认没有这个文件，可以自己新建)入口文件，也就是打包或者说运行的时候，所运行的第一个文件。放置系统的静态文件，比如，图片，全局配置文件。

搭建vue项目以及vue目录介绍

m0_50853977的博客

01-04

688

搭建vue项目一、安装node 1、下载地址 http://nodejs.cn/download/ 2、检查是否安装成功及版本 NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。命令 node -v 和 npm -v 二、搭建vue项目 1、全局安装vue-cli，命令 npm

vue项目搭建目录以及标准（慢慢摸索）

shaoxxxxx的博客

11-13

670

项目搭建： 1.项目公共组件放在src/components。 2.由于代码结构复杂拆分出去的，业务组件放在子目录components。 3.vue文件里面把数据处理代码拆分出去，写好的文件css也独立拆分出去（细小的组件一行两行的未拆分）。使得vue文件组件划分： View层减重的基础，将可共用的视图组件剥离出去，改为消息机制进行通信，甚至直接剥离出包含视图和业务代码的业务逻辑组件，都可以有效地拆分View层，降低代码的复杂度。 Api/ axios的统一放置 /api_user 接口

vue中目录详解

weixin_64315174的博客

03-02

2961

vue中目录详解

vue组件化编程-todoList案例.zip

07-14

- 在`src/components`目录下，通常会看到不同的Vue组件文件，如`TodoItem.vue`和`TodoList.vue`，它们分别代表单个待办事项和整个待办事项列表。 2. **模板语法**： - Vue模板语法基于HTML，用于声明式地渲染数据...

vue.js：组件中数据的存放问题

零小唬的博客

12-08

301

vue.js：组件中数据的存放问题

VUE项目组件的使用

xirunxiang369的博客

04-06

276

vue项目生成后会会生成很多文件找到res下的components文件就是放组件的文件新建一个后缀为vue的文件写入好了已经创建了一个简单的组件。

构建一个Vue项目

ancan7211的博客

08-09

304

一我们需要安装vue.js Vue.js官网当我们已经安装了vue-cli，那么我们需要更新Vue-cli。 vue-cli3.0使用及配置二安装好了之后：我们可以直接使用命令：mkdir 文件名创建一个文件夹，然后cd到这个文件下。 ③ 之后按照指引：执行两个命令： ④ 启动我们的项目之后，我们访问项目的url： ...