Vue之自建管理后台Vue端设计

Posted 2022-09-11 jeckyhuang

我们先设计Vue的文件夹分布。

在此之前，我们先了解下初始化创建的Vue的文件夹

https://www.cnblogs.com/luoxuemei/p/9812151.html

（我引用了这哥们写的blog，这里他写的很清楚也标记的很清楚，给力...)

 

接下来我们要添加的是自己需要的文件夹。

也就是在src文件夹下面的内容

默认的src下面

|-src

　　|-assets     　　　　　　　图片文件

　　　　|-logo.png　　　　　  官方logo

　　|-components 　　　　　  组件文件

　　　　|-HelloWord.vue　　　测试页面

　　|-router 　　　　　　　　  路由设置

　　　　|-index.js　　　　　　 默认的路由文件

　　|-app.vue  　　　　　　　 项目入口

　　|-main.js 　　　　　　　　项目核心文件

 

 

修改后的src文件夹

|-src

　　|-api　　　　　　　　　　 这里是存放api方法的文件

　　　　　　　　　　　　　　  　　一般来说会有加一个request.js文件，调用接口文件，暂时不加，后续我们会有更多的处理文件

　　|-assets     　　　　　　　图片文件

　　　　|-logo.png　　　　　  官方logo

　　|-components 　　　　　  组件文件

　　　　|-HelloWord.vue　　　测试页面

　　　　　　　　　　　　　　　　  暂时不加，我们后续会开发组件的时候加入

　　|-config　　　　　　　　  存放配置文件夹

　　　　|-index.js           　　 配置文件

　　　　　　　　　　　　　　　　  比如我们这里可以设置baseUrl，来区分dev和pro的api地址

　　　　　　　　　　　　　　　　  是否启用i18n等

　　|-libs　　　　　　　　　　前端使用的所有function的存放

　　　　|-axios.js                  数据调取方法

　　　　|-utils.js　　　　　　  全局方法

　　|-router 　　　　　　　　 路由设置

　　　　|-index.js　　　　　　默认的路由文件

　　|-locale　　　　　　　　  语言包

　　　　|-lang                      语言包文件，地下会有zh_CN，en等

　　　　|-index.js                  调用语言的function

　　|-store                           调用libs方法等文件

　　　　|-user.js                   用户function文件

　　　　|-page.js                  页面function文件

　　|-view                            页面文件

　　　　　　　　　　　　　　　　这文件夹下才是我们存放各个module的地方，主要开发还是在这里面

　　　　|-login                      登陆文件夹

　　|-mock　　　　　　　　   模拟数据

　　|-app.vue  　　　　　　　 项目入口

　　|-main.js 　　　　　　　　项目核心文件

 

 

到这里基本我们确定了整个项目中，各个功能，及我们所需要开发的时候该处理哪些文件夹。。。该把代码写在哪里。。。

 

这样代码的分布逻辑就比较清晰了。。。

 

下一章我们开始设计 路由（router文件夹）