Vue项目开发规范

370 阅读2分钟

tree src

  • main.js // 程序入口文件,是初始化vue实例并使用需要的插件, 加载各种公共组件。

  • App.vue // App.vue是我们的主组件,页面入口文件 ,所有页面都是在App.vue下进行切换的。

  • assets // 静态资源目录,放一些图片和音频文件。

    • images

      • icon-avatar.png

      • icon-loading.png

  • components // 存放一些公共组件,各个路由的组件都可以使用。

    • Drawer.vue

    • Tabs.vue

    • Upload.vue

  • router // 路由,建议开发过程中一个模块的路由一个js文件,最后通过router/index.js统一导出。

    • index.js

    • login.js

    • book.js

    • setting.js

  • store // vuex也就是状态管理,建议开发过程中按照业务分为不同的模块,最后通过store/index.js统一导出。

    • index.js

    • modules

      • book.js

      • setting.js

  • mixins

    • upload.js
  • directives // 指定,这里存放的是自定义指定,通过main.js导入使用。

    • index.js

    • table.js

    • loading.js

  • constant // 常量,这里存放的是我们使用的一些常量,建议按模块划分,最后由constant/index.js统一导出。

    • index.js

    • book.js

    • setting.js

  • libs // 第三方库,这里存放的是我们使用的一些第三方库和基于第三方库二次开发的工具库。

    • index.js

    • requests.js

  • utils // 内部工具库,这里存放的是我们常用的一些工具库,如时间格式化、vue bus、vue组件查找等。

    • index.js

    • bus.js

    • util.js

    • patterns.js

  • api // 接口,这里存放的我们的请求接口,一般都是一些axios请求后台接口的promise函数,按模块划分。

    • index.js

    • login.js

    • book.js

  • style // 公共样式,方便各个页面导入使用。

    • color.less

    • common.less

  • views // 视图文件,也就是路由对应的页面。

    • Main.vue // vue一般使用单页面,这个是一个父页面框架,包含header、footer、siderbar等。

    • login // 登录

      • index.vue // 出口,一般对应路由/login
    • book // 书籍

      • components // book模块下可以复用的公共组件。
        • Detail.vue
        • Edit.vue
      • index.vue // 出口,一般对应路由/book
      • Edit.vue // 其他出口一般对应路由/book/edit
    • setting // 如果目录下内容较多,可以按子模块每个建一个文件夹。

      • log // 日志
        • index.vue // 出口,一般对应路由/setting/log
      • subscribe // 订阅
        • components // subscribe模块下可以复用的公共组件。
          • Detail.vue
          • Edit.vue
        • index.vue // 出口,一般对应路由/setting/subscribe
        • style // subscribe模块下可以复用的公共样式。
          • index.less