专栏首页大前端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 条评论
登录 后参与评论

相关文章

  • Gatsby入门指南—安装和博客搭建(0)

    前端大彬哥
  • Vue实战系列—从目录结构谈可扩展架构设计(1)

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

    前端大彬哥
  • Gatsby入门指南—使用GraphQL解析Markdown(2)

    这里是所有数据,传到了TitleAndDescription组件里,react组件数据传递,我这么就为了看着舒服一点。

    前端大彬哥
  • 《面向对象的思考过程》应该是怎样的?

    作者:Matt Weisfeld 仅学习一种特定的开发方法、一种编程语言或者一组设计工具并不能说明学会了“面向对象”这一概念。简单来说,以面向对象方式编程就是一...

    ThoughtWorks
  • 更新nginx与uwsgi的连接

    我们可以使用uwsgi.sock文件连接nginx也可以指定为host : port

    我已经洗完澡了
  • Java基础数据类型和引用类型的区别

    基本数据类型只有8种,可按照如下分类 ①整数类型:long、int、short、byte ②浮点类型:float、double ③字符类型:char ④布尔类型...

    Anymarvel
  • Swift Perfect - Nginx 配置 HTTPS 服务器

    LeeCen
  • 再不怕和老外聊天了!我用python写了个微信聊天翻译助手!

    在前面的一篇文章如何用python“优雅”的调用有道翻译?中咱们清楚的写过如何一层一层的解开有道翻译的面纱,并且笔者说过那只是脑洞的开始。现在笔者又回来了。Te...

    bigsai
  • Python GIL

    ---- 概述 GIL(Global Interpreter Lock)是什么东东?为什么当一些Pythoners在开发一些多线程操作的时候,都会有些很...

    BrianLv
  • 4. C语言 -- 一个由数据类型和取值范围引发的 BUG

    之前看到有人留言催更,老夫的心里的竟然有一丝惊喜和兴奋。上周说要改版嘛( 。_ 。) ✎然后我就紧赶慢赶出了这篇稿子,但是由于一些原因,在今天才与大家间面。

    谭庆波

扫码关注云+社区

领取腾讯云代金券