摘要：接下来我们进一步细化项目的目录设计在开发项目的时候前端避免不了请求后端接口。项目的核心文件目录中的文件会被处理解析为模块依赖，更换频率不高的菜单背景图片，按钮等可放置在内。总结项目目录设计可以根据实际具体需求变动，但是我们结构化去思考。
通过上一篇文章我们了解了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 根组件。
总结
项目目录设计可以根据实际具体需求变动，但是我们结构化去思考。那么我们设计的目录肯定会方便易用，利于维护拓展的。下一篇我们将把组件按需拆分，还请持续关注。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/103792.html
摘要：本篇我们将继续推进外卖项目商品页的展示。如图所示，我们可以把商品也面分为两大部分左侧菜单栏右侧商品展示为当前商品页面的根元素。下一篇文章我们开始为左侧菜单栏，右侧商品展示加入数据。 上次我们通过设计评价组件这个过程，了解到了组件设计中的良好的习惯，比如，文件夹如何支撑组件，图片，组件路径的存放于设置。 本篇我们将继续推进外卖项目—商品页的展示。 showImg(https://segm...
摘要：本篇文章我们进一步深入项目设计评价组件。使得组件更加便于维护。路径配置内自动补全设置通过重命名设置对组件导入模块时进行了重命名。全部有图点评使用引入的组件组件就是上图标记的分隔线。 在上篇文章我们将项目头部模块进行了编写与数据渲染。 本篇文章我们进一步深入项目设计评价组件。 showImg(https://segmentfault.com/img/bVbt6IP?w=374&h=417...
摘要：好了，闲话不多说今天要说的时利用监听路由的方式，实现同个页面不同状态的切换。只要等于，那么页面就是待确认回款页面进入待确认回款页面中，回款状态的筛选标签要加上。 1.前言 今天发完这一篇，就要这个系列告一段落了！以后如果有什么要补充的会继续补充！因为在后台管理项目上，搭建的话，主要就是这样了！还有的一些是具体到交互的处理，那个是要根据后端的需求，来进来比较细化的工作，我在这里就不说了！...
摘要：好的项目代码结构会大大提升项目的维护性和可扩展性。多说无益，我这里直接给大家一个示意图，大家可以按照我给的这个项目结构组织项目。你连文件目录都设计不好，我拿什么相信你能设计出来可扩展的程序 很多人都会用项目脚手架，也会跑hello world，然后再写写简单的todolist。但是再往下深入就难了。比如很多教程和老师都会说，大家要多问一个为什么。其实我想说多问你妹啊。我都不知道问为什么...
摘要：决定将组建渲染在哪，打开，添加配置路由打开文件夹下引入各个组件配置路由路径组件路由重定向我们在数组设定为。官方文档注意，当前激活导航设置方法固定属性值。所以使用保留组件状态，避免重新渲染购物车的数据丢失。 上篇我们说了vue项目的目录设计，本篇我们来学习一下vue路由。 路由的作用： 在web端路由（route）就是URL到函数的映射，vue的router就像一个容器，分配，处理每一个...
阅读 2228·2019-08-30 10:51
阅读 784·2019-08-30 10:50
阅读 1462·2019-08-30 10:49
阅读 3129·2019-08-26 13:55
阅读 1590·2019-08-26 11:39
阅读 3412·2019-08-26 11:34
阅读 1936·2019-08-23 18:30
阅读 3380·2019-08-23 18:22
