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

最新推荐文章于 2024-06-18 21:53:57 发布
最新推荐文章于 2024-06-18 21:53:57 发布
阅读量1.6w 收藏 22
点赞数 14
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/AI_U20/article/details/88531065
版权

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

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

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

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

AIU哎呀
关注
  • 14
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue3官网-高级指南（十五）Vue 与 Web Components
qq_43456781的博客
09-26 3417
Vue3官网-高级指南（一）Vue 与 Web Components 文章目录Vue3官网-高级指南（一）Vue 与 Web Components1. Vue 与 Web Components在 Vue 中使用自定义元素跳过组件的解析传递 DOM Property使用 Vue 构建自定义元素defineCustomElement将 SFC 作为自定义元素Vue 自定义元素库的提示对比 Web Components 与 Vue 组件 总结： 补充 Vue (读音 /vjuː/，类似于 view) 是
vue-cli开发的商城源代码
01-18
Vue.js 的设计目标是使开发过程更加简单和高效，同时提供了丰富的生态系统，如Vuex（状态管理）、Vue Router（路由管理）和Vue CLI（项目脚手架）。 `vue-cli` 在这个项目中起到了基础架构的作用。它允许开发者通过...
Vue中，views和components的区别
weixin_51662487的博客
03-06 3674
Vue中，views和components的区别
Vue3使用component动态展示组件
最新发布
gurenchang的博客
06-18 326
Vue3使用component动态展示组件
Vue中views和components文件夹的区别
jolinoy的博客
09-20 8912
诸如页眉，页脚，广告，网格或任何自定义控件之类的示例，如样式化的文本框或按钮。可以在视图内部访问一个或多个组件。这两个文件夹基本都相同，因为它们都包含组件，但是Vue的美感在于，将用作页面的组件（路由到类似页面进行导航）保留在。一个视图可以具有一个或多个组件，并且一个视图实际上打算由导航URL访问。在Vue中（通常是Vue Router）处理路由时，将定义路由以切换组件中使用的当前。您可以随意将任何组件添加到中，文件夹中，而可重用组件（例如表单字段）保留在。不太可能在一条路线中使用，而位于下方的组件。
vue目录中，views和components的区别
kangkang212916的博客
05-26 1860
components: 里边放子组件,这里的组件不能当作一个页面渲染,一般用作子组件,导入到页面父组件展示 如: 轮播图Swiper, 导航栏Nav, 星级评分Stars。views: 里边放整页组件,每一个组件都可以作为一个页面需要,一般由路由控制切换, 如: 主页HomeView, 登录页LoginView, 个人页UserView。相同点: 它们都是静态资源目录, 都可以放静态资源, 组件内都可以引用目录中的资源。3, public中一般放第三方资源, 第三方插件, 工具之类的资源。
Vue入门4、组件component+视图view+路由+ElementUI+EsLint报错好烦+router-link+template只能有一个根节点+props
舌尖上的蛋炒饭的博客
08-16 2196
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-cli3组件的使用
aaronthon的博客
05-18 228
安装好的vue-cli，可以看到下面的目录： assets存放图片等文件。 components文件夹就类似templates文件夹，存放组件的。 main.js是创建一个vue。 App.vue是一个组件，以.vue结尾的文件都称为一个组件（html、js、css），组件第一个字幕必须是大写，组建的data必须是一个函数。 App.vue如下： <template> ...
基于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.zip
04-14
3. `vue.config.js`：Vue CLI 的配置文件，可以在这里自定义项目配置，比如修改端口号、设置公共路径等。 4. `package.json`：项目依赖和脚本的配置文件，包括开发依赖和生产依赖，以及自定义的 npm 脚本。 5. `....
vue-admin-template-master.zip
12-05
在"vue-admin-template-master.zip"这个压缩包中，我们很显然有一个使用Vue CLI 3搭建的项目模板，其中集成了Element UI作为UI框架。 首先，让我们详细了解一下Vue CLI 3。Vue CLI 3 提供了一套全面的脚手架工具，...
vue-cli3脚手架的配置及使用教程
10-18
Vue CLI 3 提供了一个交互式的项目脚手架，允许开发者自定义项目结构和所需功能，同时也提供了默认配置，使开发者能够快速开始开发，而无需花费大量时间进行配置。 Vue CLI 3 的核心特性包括： 1. **@vue/cli**：...
vue3-element-plus-im vue3.0 element-plus vue-cli vue-route.zip
03-03
在Vue CLI生成的项目中，你可能找到`src`目录，里面包含`main.js`（应用入口）、`App.vue`（根组件）、`components`（自定义组件）、`router`（路由配置）和`views`（页面组件）等。 结合以上技术，Vue3 Element ...
yunxi-tem-pc-cli3:基于vue-cli(3.x)前端内部使用的模版
04-07
基于vue-cli(3.x)开发的前端内部通用模版 项目初始化 运行开发环境：npm run dev 运行测试环境：npm run test 运行生态环境：npm run prod 打包开发环境：npm run dev-build 打包测试环境：npm run build 打包生态...
vue-cli3-template-master.zip
06-16
1. **项目结构**：Vue CLI 3 的项目通常包含`src`目录，其中包含`components`（组件）、`views`（视图）、`router`（路由）、`store`（状态管理）等核心部分。此外，还有`public`目录，用于放置静态资源，如`index....
基于vue-cli 的 Element UI 的后台系统模板
02-21
2. **项目结构**：基于 Vue CLI 创建的项目通常会有以下目录结构：`src`（源代码）、`public`（静态资源）、`node_modules`（依赖库）、`package.json`（项目配置文件）等。`src`中的`main.js`作为入口文件，负责...
点点滴滴Vue-cli (三) Vue components
weixin_30594001的博客
01-22 172
这一章开始介绍这个框架在项目中的实际应用，这一节我们先简单开始vue组件的使用，在这个小项目中我们将做一个简单的图书管理系统。最后项目会是怎么样我也还不是很清楚，只是一步一步的往下做。当然在这里也会涉及到 css的编写，因为这块内容不是本系列文章的重点，所以我们就简单的把他直接写在组件里面，在真实项目中都会抽成一个单独的css文件，然后进行压缩等处理。 好...
浅谈Vue下的components模板
热门推荐
金城阿武的博客
05-30 4万+
浅谈Vue下的components模板 晴 微风 温度 12-24°C 在我们越来越深入Vue时，我们会发现我们对HTML代码的工程量会越来越少，今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单的写一段components代码 (局部方法创造模板) &lt;div id="app"&gt; &lt;haha&...
我对组件components 和 页面 views 的思考
solocao的专栏
10-21 4451
之前做过很多项目，我喜欢把组件放到components目录中、页面入口文件放到views中，但哪些文件需要放到components中，哪些文件需要放到views中呢，我现在发现，在自己做很多个项目时，需要尽可能复用组件，所以，把在其他项目中也可能需要用到的公用组件，放到components中，就OK了。 ...
vue2实现登录界面
09-11
Vue 2可以通过组合使用Vue组件、路由和状态管理来实现登录界面。下面是一个简单的登录界面的实现示例： 首先，安装Vue CLI并创建一个新的Vue项目： ```bash npm install -g @vue/cli vue create my-login-app cd my-login-app ``` 然后，创建两个组件：Login.vue和Home.vue。Login.vue用于显示登录表单，Home.vue表示登录成功后的主页。 Login.vue： ```html <template> <div> <h2>Login</h2> <form @submit="login"> <input type="text" v-model="username" placeholder="Username" required> <input type="password" v-model="password" placeholder="Password" required> <button type="submit">Submit</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' }; }, methods: { login() { // 处理登录逻辑，例如发送请求到后端进行验证 if (this.username === 'admin' && this.password === 'password') { // 登录成功后跳转到主页 this.$router.push('/home'); } else { alert('Invalid credentials'); } } } }; </script> ``` Home.vue： ```html <template> <div> <h2>Welcome, {{ username }}!</h2> <button @click="logout">Logout</button> </div> </template> <script> export default { data() { return { username: '' // 在登录成功后会动态更新用户名 }; }, mounted() { // 在此可以通过请求获取当前登录用户的信息 this.username = 'admin'; }, methods: { logout() { // 执行登出逻辑，例如发送请求到后端注销用户 this.username = ''; this.$router.push('/login'); } } }; </script> ``` 接下来，在`src/router/index.js`中配置路由： ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; import Login from '../components/Login.vue'; import Home from '../components/Home.vue'; Vue.use(VueRouter); const routes = [ { path: '/login', component: Login }, { path: '/home', component: Home } ]; const router = new VueRouter({ routes }); export default router; ``` 最后，在`src/main.js`中使用路由和状态管理器： ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; new Vue({ router, store, render: h => h(App) }).$mount('#app'); ``` 这样，你就可以在`App.vue`中放置一个router-view组件来渲染登录界面或主页： ```html <template> <div id="app"> <router-view></router-view> </div> </template> <script> export default { name: 'App' }; </script> ``` 以上是一个简单的登录界面的实现示例，希望对你有帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值