专栏首页大前端666Vue实战系列—如何细化Vue项目目录设计(2)
原创

Vue实战系列—如何细化Vue项目目录设计(2)

通过上一篇文章我们了解了Vue项目核心文件(src)以及在内的各个文件的职能。

接下来我们进一步细化Vue项目的目录设计:

  • 在开发项目的时候前端避免不了请求后端接口。为了同时开发,我们知道的通常会用到mock.js。data文件夹内新建一些json格式的数据,这样更省时间,更方便;
  • 项目中我们会对静态资源统一管理;
  • 项目中需要有引入的字体,自定义,等项目插件,工具;
  • 组件的设计考虑到以后可能会引用图片,拓展的因素,所以我们最后将组件用文件夹包裹一层。

综合以上,我们将目录设计为:

如图所示,

data:用来模拟我们请求的数据内部主要存放json数据格式的数据,比如评价,商品等 。

resource:统一管理图片、文档、图标这三种资源。

src:项目的核心文件

​ assets:assets目录中的文件会被webpack处理解析为模块依赖,更换频率不高的菜单背景图片,按钮icon等可放置在内。

​ common:公共工具

​ fonts:用来存放字体。

​ js:用来存放我们使用js插件。

​ style:存放样式,less,sass等。

​ components:Vue组件。

​ header:注意这里是一个文件夹。

​ Hearder.Vue: 头部组件。

​ router:路由配置文件夹。

​ app.Vue 根组件。

总结

项目目录设计可以根据实际具体需求变动,但是我们结构化去思考。那么我们设计的目录肯定会方便易用,利于维护拓展的。下一篇我们将把组件按需拆分,还请持续关注。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 当前 GitHub 上排名前十的热门 Vue 项目

    Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。通过基础的 24 分栏,迅速简便地...

    疯狂的技术宅
  • Vue实战系列—从目录结构谈可扩展架构设计(1)

    好的项目代码结构会大大提升项目的维护性和可扩展性。同时我们可以提供友好的说明,以便其他成员理解项目和快速定位。

    前端大彬哥
  • 从零到一教你基于vue开发一个组件库

    Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基...

    歪马
  • 从零到一教你基于vue开发一个组件库

    Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基...

    徐小夕
  • 996+裁员潮,什么样的前端人才能安全靠岸?

    据土哥了解,腾讯、阿里、百度、今日头条等大厂目前在招聘Web全栈工程师,薪资已给到了40W+。为什么Web全栈工程师如此受重视?

    闰土大叔
  • 写给初中级前端的高级进阶指南(JS、TS、Vue、React、性能、学习规划)

    我曾经一度很迷茫,在学了Vue、React的实战开发和应用以后,好像遇到了一些瓶颈,不知道该怎样继续深入下去。相信这也是很多一两年经验的前端工程师所遇到共同问题...

    ssh_晨曦时梦见兮
  • 前端vue面试题,附答案

    vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉

    it优课
  • 深圳头条-开发者生态部门-面经-已拿offer

    问题比较多, 而且很多面试题都是跟个人项目相关的,项目相关的问题借鉴意义不大,所以这里总结一些与项目无绝对关系的问题,欢迎围观~

    winty
  • Go 语言入门练手项目推荐

    大家好,我是 roseduan,经常看到一些小伙伴学习完 Go 语言的基础知识之后,无法找到合适的练手项目,然后就很迷茫。

    roseduan
  • ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目

      这几年前端的发展速度就像坐上了火箭,各种的框架一个接一个的出现,需要学习的东西越来越多,分工也越来越细,作为一个 .NET Web 程序猿,多了解了解行业...

    程序员宇说
  • Vue实战系列—项目搭建四步曲(0)

    开篇:想通过输出Vue系列文章,让大家全面理解Vue的实现原理,掌握实用技巧,能在实战中使用Vue,解锁一个开发技能。

    前端大彬哥
  • 009 | 快速入门Web前端开发的正确姿势

    入门标准很简单,就一条:达到能参与 Web 前端实际项目的开发水平。请注意,是实际项目,这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/Jav...

    Keegan小钢
  • Vue + TypeScript + Element 项目实战及踩坑记

    本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 。

    夜尽天明
  • Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践

    而且 Element Plus + Vite 也出了一段时间了,是时候该上手体验分享一波了。

    Sneaker-前端公虾米
  • Github点赞接近100k的SpringBoot学习教程+实战推荐!牛批!

    很明显的一个现象,除了一些老项目,现在 Java 后端项目基本都是基于 Spring Boot 进行开发,毕竟它这么好用以及天然微服务友好。不夸张的说,Spri...

    Guide哥
  • 一个基于 Vue3 的开源项目,3个月时间 star 终于破千!

    关于 newbee-mall-vue3-app 这个开源项目的开发背景和详细介绍之前都已经介绍过,可以在上述两篇文章中查看。

    程序员十三
  • 玩转 Vue.js 3 新特性进阶实战

    Vue 是用于构建用户界面的渐进框架,具有全家桶 vue-router 路由管理,vuex 仓库数据管理,axios 请求库等。Vue 3 在 Vue 2.x ...

    公众号---人生代码
  • [Vue 牛刀小试]:第十五章 - 传统开发模式下的 axios 使用入门

      在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前,无法抛弃 Jquery 的重要理由,除了优秀的前端 DOM 元素操作性以外,...

    程序员宇说
  • vue必会面试题+答案

    React是pull的方式侦测变化,当React知道发生变化后,会使用Virtual Dom Diff进行差异检测,但是很多组件实际上是肯定不会发生变化的,...

    it优课

扫码关注云+社区

领取腾讯云代金券