Vue之自建管理后台（二）Vue端设计

我们先设计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文件夹）

巴特西

Vue之自建管理后台（二）Vue端设计

最新文章

热门文章