vue-cli 3.x 的 views 和 components有什么区别？

最新推荐文章于 2024-06-03 16:02:50 发布
最新推荐文章于 2024-06-03 16:02:50 发布
阅读量1.6w 收藏 27
点赞数 19
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/AI_U20/article/details/88531065
版权
本文详细解释了Vue.js中components, containers与views的区别。components作为小组件，views为页面级组件，而containers则是容器级组件，用于组织和管理更复杂的业务逻辑。了解这些组件的层级有助于开发者更好地构建和维护Vue应用。

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

vue-cli 3.x 的 views 和 components有什么区别？

components是小组件
containers是容器级组件
views是页面级组件

也就是说，views是页面级组件，components是小组件，小组件可被引用在views中，一般views组件不被复用【containers是容器级组件（根据项目大小决定是否使用）】

从组件大小级别区分 components - （containers）- views

Vue3官网-高级指南（十五）Vue 与 Web Components
qq_43456781的博客
09-26 3669
Vue3官网-高级指南（一）Vue 与 Web Components 文章目录Vue3官网-高级指南（一）Vue 与 Web Components1. Vue 与 Web Components在 Vue 中使用自定义元素跳过组件的解析传递 DOM Property使用 Vue 构建自定义元素defineCustomElement将 SFC 作为自定义元素Vue 自定义元素库的提示对比 Web Components 与 Vue 组件 总结： 补充 Vue (读音 /vjuː/，类似于 view) 是
vue3:八、登录界面实现-页面初始搭建、基础实现
最新发布
weixin_46001736的博客
03-14 1010
vue3:八、登录界面实现-页面初始搭建、基础实现
Vue中，views和components的区别
weixin_51662487的博客
03-06 4805
Vue中，views和components的区别
vue目录中，views和components的区别
kangkang212916的博客
05-26 2446
components: 里边放子组件,这里的组件不能当作一个页面渲染,一般用作子组件,导入到页面父组件展示 如: 轮播图Swiper, 导航栏Nav, 星级评分Stars。views: 里边放整页组件,每一个组件都可以作为一个页面需要,一般由路由控制切换, 如: 主页HomeView, 登录页LoginView, 个人页UserView。相同点: 它们都是静态资源目录, 都可以放静态资源, 组件内都可以引用目录中的资源。3, public中一般放第三方资源, 第三方插件, 工具之类的资源。
Vue中views和components文件夹的区别
jolinoy的博客
09-20 1万+
诸如页眉，页脚，广告，网格或任何自定义控件之类的示例，如样式化的文本框或按钮。可以在视图内部访问一个或多个组件。这两个文件夹基本都相同，因为它们都包含组件，但是Vue的美感在于，将用作页面的组件（路由到类似页面进行导航）保留在。一个视图可以具有一个或多个组件，并且一个视图实际上打算由导航URL访问。在Vue中（通常是Vue Router）处理路由时，将定义路由以切换组件中使用的当前。您可以随意将任何组件添加到中，文件夹中，而可重用组件（例如表单字段）保留在。不太可能在一条路线中使用，而位于下方的组件。
Vue 3 组件基础与模板语法详解
05-24 1061
1. Vue 3 的新特性Vue 3引入了许多新的特性，以提高框架的性能和可维护性。：这是Vue 3中最大的变化之一，它提供了一种更灵活的方式来组织和重用组件的逻辑。Teleport：这是一个新的API，允许我们在组件树中将元素“传送”到其他位置。Suspense：这是一个新的API，允许我们在组件树中等待异步数据加载。Fragment：这是一个新的内置组件，允许我们在组件中渲染多个根节点。v-memo：这是一个新的指令，允许我们在渲染过程中缓存组件的输出。更快的渲染速度。
Vue入门4、组件component+视图view+路由+ElementUI+EsLint报错好烦+router-link+template只能有一个根节点+props
舌尖上的蛋炒饭的博客
08-16 2295
Vue入门4、组件compent+视图view+计算属性+生命周期+路由 我们先新建一个项目 1、vue ui 打开创建项目页面 2、 3、 4、 修改一下，ESlint选择standard，要不然校验太多了 5、删除掉这两个views 6、删掉App.vue里的两个路由 7、删除掉router/index.js里的两个页面的路由信息和import信息 8、删除components下面的组件 9、npm run serve启动项目 就是一个空白的项目了 ElementUI 下载element
基于vue-cli4.0 vue-router4.x+vuex4.x+ant-design开发的后台管理系统模板.zip
02-02
是基于vue3.0 vue-cli4.0 vue-router4.x+vuex4.x+ant-design-vue2.x开发的后台管理系统模板，包含权限路由、权限按钮、流程配置、个人中心等基础功能. ## 文件 ```bash # vue-antd-admin - src - api - assets -...
vue-cli 3.x 项目打包配置-vue.config.js
pamerely的博客
04-14 4224
这里写自定义目录标题前言npm run build配置-package.json.env.dev文件.env.prod文件vue配置文件-vue.config.js路由改成hash模式-router.js插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图...
vue-cli开发的商城源代码
01-18
Vue.js 的设计目标是使开发过程更加简单和高效，同时提供了丰富的生态系统，如Vuex（状态管理）、Vue Router（路由管理）和Vue CLI（项目脚手架）。 `vue-cli` 在这个项目中起到了基础架构的作用。它允许开发者通过...
vue-cli.zip
04-14
3. `vue.config.js`：Vue CLI 的配置文件，可以在这里自定义项目配置，比如修改端口号、设置公共路径等。 4. `package.json`：项目依赖和脚本的配置文件，包括开发依赖和生产依赖，以及自定义的 npm 脚本。 5. `....
Vue2.X Vue-CLI简介
cc常 的博客
03-18 302
Vue2.x Vue-CLI简介 写在前面： 此博客记录自己学习vue学习笔记，如有侵权，联系删！ 学习来源： Vue + Vue-Cli 快速入门教程 李南江老师各平台账号： 微博：极客江南 微信公众号：李南江 腾讯课堂： 李南江 网易云课堂：李南江 什么是Vue-CLI(Command Line Interface)? Vue-CLI是vue官方提供的脚手架工具, 默认已经帮我们搭建好了一套利用webpack管理vue的项目结构 如何安装Vue-cli和使用Vue-CLI? 安装脚手架工具: npm
Flutter run、attach 调试秒连，规避日志问题
star_nwe的博客
04-02 962
Flutter IDE 调试与手机建立连接，是通过检测 logcat 输出，过滤终端运行的引擎 observatory 调试服务端口链接日志
vue-cli3组件的使用
aaronthon的博客
05-18 258
安装好的vue-cli，可以看到下面的目录： assets存放图片等文件。 components文件夹就类似templates文件夹，存放组件的。 main.js是创建一个vue。 App.vue是一个组件，以.vue结尾的文件都称为一个组件（html、js、css），组件第一个字幕必须是大写，组建的data必须是一个函数。 App.vue如下： <template> ...
点点滴滴Vue-cli (三) Vue components
weixin_30594001的博客
01-22 208
这一章开始介绍这个框架在项目中的实际应用，这一节我们先简单开始vue组件的使用，在这个小项目中我们将做一个简单的图书管理系统。最后项目会是怎么样我也还不是很清楚，只是一步一步的往下做。当然在这里也会涉及到 css的编写，因为这块内容不是本系列文章的重点，所以我们就简单的把他直接写在组件里面，在真实项目中都会抽成一个单独的css文件，然后进行压缩等处理。 好...
vue中src目录下views和components
HWL5679的博客
03-27 956
views目录存放的是页面级的Vue组件，它们与路由直接相关；而components目录存放的是可复用的Vue组件，用于实现特定的功能或界面元素。
浅谈Vue下的components模板
热门推荐
金城阿武的博客
05-30 4万+
浅谈Vue下的components模板 晴 微风 温度 12-24°C 在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一段components代码 (局部方法创造模板) &lt;div id="app"&gt; &lt;haha&...
了解Vue 3.0
2301_81385743的博客
06-03 1184
Vue 3.0 中引用的基于函数的组合API。在引用新的API之前，Vue还有其他替代方案，它们提供了诸如mixin、HOC（高阶组件）、作用域插槽之类的组件之间的可复用性，但是所有方法都有其自身的缺点，因此它们并未被广泛的使用。Vue.js 3.0 重写了虚拟DOM的实现，并优化了编译模板，提升了组件的初始化速度，更新的性能提升1.3~2倍，服务器端渲染速度提升2-3倍。Vue 2.x 的 Vue 文件必须有一个唯一的根节点，Vue 3.0 将不再限于模板中的单个根节点，可以有多个根节点。
我对组件components 和 页面 views 的思考
solocao的专栏
10-21 4544
之前做过很多项目，我喜欢把组件放到components目录中、页面入口文件放到views中，但哪些文件需要放到components中，哪些文件需要放到views中呢，我现在发现，在自己做很多个项目时，需要尽可能复用组件，所以，把在其他项目中也可能需要用到的公用组件，放到components中，就OK了。 ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值