Vue之自建管理后台(二)Vue端设计

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

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

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

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

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

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

默认的src下面

|-src

  |-assets            图片文件

    |-logo.png       官方logo

扫描二维码关注公众号,回复: 7138332 查看本文章

  |-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文件夹)

猜你喜欢

转载自www.cnblogs.com/jeckyhuang/p/11436482.html