美文网首页
Vue组件的存放目录问题和路由的封装抽离

Vue组件的存放目录问题和路由的封装抽离

作者: 家乡的蝈蝈 | 来源:发表于2024-04-10 13:41 被阅读0次

组件的存放目录问题

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

1.组件分类

.vue文件分为2类,都是 .vue文件(本质无区别)

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

2.存放目录

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

  1. src/views文件夹

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

  2. src/components文件夹

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

路由的封装抽离

问题:所有的路由配置都在main.js中合适吗?

目标:将路由模块抽离出来。 好处:拆分模块,利于维护

路径简写:
脚手架环境下 @指代src目录,可以用于快速引入组件

相关文章

  • 路由嵌套

    模板抽离 我们已经学习过了Vue模板的另外定义形式,使用。 然后js里定义路由组件的时候: // 1. 定义(路由...

  • 搭建一个简单的cli工具

    目前公司采用的项目结构是基于vue-cli脚手架,再在基础上进行通用组件、业务组件的封装和抽离,目前已经比较完善和...

  • VUE开发--NPM组件开发

    一、封装npm包 1. 使用vue-cli 创建一个 基础项目。 2.调整目录 我们需要一个目录存放组件,一个目录...

  • vue初体验

    vue初体验 目录结构 在src目录下创建router.js文件 基本思路:定义路由模板-->路由的组件映射-->...

  • Vue 路由代码抽离、复用router-view

    一. 路由代码抽离 在main.js文件中的routes记录了所有路由的路径path和组件component,及引...

  • vue-router 路由

    组件化之后才能路由化 (一定要先安装路由) 单页面路由封装router.js mian.js中引用 App.vue...

  • vue成长之路+实战+Vue2+VueRouter2+webpa

    推荐我的vue教程:VUE系列教程目录 上篇讲解了vue-router路由入门,现在讲讲关于vue组件的内容。如果...

  • VUE 爬坑笔记 (3)

    VUE组件 模块化 和 组件化 区别 模块化:从代码角度分析问题,把可复用的代码抽离为单独的模块 好处:方便程序员...

  • vue-router 常用知识点二

    目录 - 1.vue-router 动态路由匹配 - 2.router-link组件及其属性 - 3.vue-ro...

  • react 组件抽离,封装

    子组件 核心就是父组件给子组件传props,没啥好说的 父组件

网友评论

      本文标题:Vue组件的存放目录问题和路由的封装抽离

      本文链接:https://www.haomeiwen.com/subject/depqxjtx.html