「Web开发-Vue」 Vue目录结构

Posted by Dawn-K's Blog on July 11, 2020

Vue目录结构

his-ui
│  .browserslistrc
│  .gitignore
│  babel.config.js
│  package-lock.json
│  package.json
│  README.md
│               
│ # 公共部分,可全局访问
├─public
│      favicon.ico
│      index.html
│      
└─src
    │  App.vue
    │  element-variables.scss
    │  main.js
    │      
    │ # 系统接口(将与后端的接口通信封装成js函数前端调用)
    ├─api
    │      auth.js
    │      user.js
    │      
    │ # 资源
    ├─assets
    │      logo.png
    │           
    ├─plugins
    │      element.js
    │           
    │ # 路由配置
    ├─router
    │      index.js
    │      
    ├─store
    │      index.js
    │      
    │ # 通用工具 
    ├─utils
    │      # 对localStorage操作的封装
    │      localStorage.js
    │      # 主要是前端的拦截器和对axios的配置,重点是封装了request方法,能够快速编写api文件
    │      request.js
    │      
    │ # 对界面的绘制  
    └─views
        │  About.vue
        │  Home.vue
        │  Login.vue
        │  
        ├─author
        │      Index.vue
        │      
        ├─layout
        │  │  # 核心文件,用于展示布局
        │  │  Layout.vue
        │  │  
        │  │  # 布局配件
        │  └─components
        │          CopyRight.vue
        │          Header.vue
        │          Menu.vue
        │          
        ├─note
        │      Index.vue
        │      
        ├─role
        │      Index.vue
        │      
        └─user
                Index.vue