Understand the Vuexy Admin folder structure
了解Vuexy Admin文件夹结构

Documentation 文档

After downloading the zip file from themeforest unzip that file and Open documentation.html file to read documentation of Vuexy Admin, opening this file will redirect you to online documentation of Vuexy Admin.
从themeforest下载zip文件后，解压缩该文件并打开Opendocument.html文件以阅读Vuexy Admin的文档，然后打开该文件会将您重定向到Vuexy Admin的在线文档。

Project Folder 项目目录

Once you unzip the file downloaded from themeforest, you will find vuexy-vx.x folder which contains actual files and folders required to run Vuexy Admin.
解压缩从themeforest下载的文件后，您将找到vuexy-vx.x文件夹，其中包含运行Vuexy Admin所需的文件。

  1. vuexy-vx.x/
  2. │
  3. ├── public/
  4. │   ├── favicon.ico
  5. │   ├── logo.png
  6. │   ├── loader.css                          -> Initial Loader CSS 初始化时加载的CSS文件
  7. │   └── index.html                          -> Main HTML HTML根文件
  8. │
  9. ├── src/
  10. │   ├── acl/                                -> Aceess Control 权限控制
  11. │   │                             
  12. │   ├── assets/                             -> 静态资源文件
  13. │   |    ├── css/                           -> Tailwind, Feather & Loader CSS
  14. │   |    ├── fonts/                         -> Feather Font Icons
  15. │   |    ├── images/
  16. │   |    ├── scss/                            -> Template SCSS files, check folder structure below SCSS模板文件
  17. │   |    └── utils/                            -> utilities folder 工具包
  18. │   │
  19. │   ├── auth/                               -> Auth0 Service Auth0服务
  20. │   ├── components/                         -> Vuexy Admin custom components Vuexy基础组件
  21. │   ├── fake-db/                             -> Fake Database for mocking axios requests (Fake API Calls) mock axios请求的伪数据库
  22. │   ├── filters/                            -> VueJS filters Vue 全局过滤器
  23. │   ├── firebase/                           -> firebase config firebase 配置
  24. │   ├── http/                               -> Axios Mock Adapter Requests Axios模拟请求
  25. │   ├── i18n/                                 -> I18n 
  26. │   │
  27. │   ├── layouts/                            
  28. │   │    │
  29. │   |    ├── components/                    -> Layout components
  30. │   |    |    ├── customizer/                -> Customizer component
  31. │   |    |    ├── horizontal-nav-menu/      -> Nav-Menu Component for Horizontal layout 横向视图模式下使用的导航菜单
  32. │   |    |    ├── Navbar/                    -> Navbar Components for Vertical & Horizontal Layout + Fuzzy Search Items
  33. │   |    |    ├── vertical-nav-menu/        -> Nav-Menu Component for Vertical layout (Previously VxSidebar) 竖向视图模式下使用的导航菜单
  34. │   |    |    ├── vx-tooltip/               -> Extended Tooltip Component (vx-tooltip)
  35. │   |    |    ├── Logo.vue                    -> Logo Component For Dynamic Color
  36. │   |    |    ├── TheFooter.vue             -> Footer Component
  37. │   |    |    └── VxBreadcrumb.vue            -> Breadcrumb Component 
  38. │   │    │
  39. │   |    ├── full-page/                        -> Full page layout for pages like login
  40. │   |    └── main/                            -> Main layout
  41. │   │
  42. │   ├── plugins/                             -> theme plugins (auth0 currently)
  43. │   ├── store/                              -> Vuex Store
  44. │   ├── vendor/                              -> Vendor files
  45. │   ├── views/                              -> View files for all pages 页面
  46. │   ├── App.vue                             -> Application main vue file 
  47. │   ├── axios.js                             -> axios (configuration) file
  48. │   ├── globalComponents.js                 -> Gloablly registered components
  49. │   ├── main.js                                -> Application main js file
  50. │   └── router.js                           -> router file 
  51. │
  52. ├── .browserlistrc                          -> Browser support
  53. ├── .editorconfig                            -> Editor configuration file
  54. ├── .eslintrc.js                            -> ESLint Configuration
  55. ├── .gitignore                              -> gitignore
  56. ├── auth_config.json                           -> Auth0 credentials
  57. ├── babel.config.js                         -> Babel configuration
  58. ├── package.json                            -> Package json
  59. ├── postcss.config.js                        -> postcss configuration
  60. ├── README.md                               -> Readme
  61. ├── tailwind-v0.js                            -> v0.x Tailwind configuration
  62. ├── tailwind.config.js                      -> Tailwind configuration
  63. ├── themeConfig.js                            -> Vuexy Admin configuration
  64. └── vue.config.js                            -> VueJS configuration

SCSS Strucutre

Under the vuexy-vx.x/src/assets/scss you will find the following folder structure.

scss/  
├── main.scss                       -> main scss file
└── vuexy/                            -> Vuexy scss
    |
    ├── apps/                        -> Apps scss
    ├── components/                    -> Components scss
    ├── extraComponents/            -> Extra components scss 第三方组件scss
    ├── layout/                        -> Layout specific scss
    ├── pages/                      -> Pages/Views scss
    ├── rtl/                        -> RTL style files 右向左书写风格文件
    ├── themes/                        -> theme scss - Dark & semi-dark 主题
    ├── _customClasses.scss         -> Vuexy Admin Custom classes
    ├── _extraComponents.scss       -> Style of third party components/packages 风格化第三方组件
    ├── _fixesVuesax.scss             -> Vuesax style fixes/enhancements
    ├── _layout.scss
    ├── _misc.scss                  -> Miscellaneous scss 杂项
    ├── _rtl.scss                   -> RTL scss
    ├── _tailwindFix.scss           -> Tailwind fixes scss
    ├── _themes.scss                -> themes partial import
    ├── _transitions.scss              -> VueJS Transitions 
    ├── _typography.scss            -> Typography Styles 文本
    └── _variables.scss             -> Vuexy Admin SCSS variables scss变量

Vuex Store Structure

Under the vuexy-vx.x/src/store/ you will find the following folder structure.

store/  
├── auth/                           -> auth module
├── calendar/                       -> calendar module         (Dynamic Import)
├── chat/                           -> chat module             (Dynamic Import)
├── data-list/                      -> Data-List module        (Dynamic Import)
├── eCommerce/                      -> e-commerce Store module (Dynamic Import)
├── email/                          -> email module            (Dynamic Import)
├── todo/                           -> todo module             (Dynamic Import)
├── user-management/                -> USer Management module  (Dynamic Import)
├── actions.js                      -> theme/component actions
├── getters.js                      -> theme/component getters
├── mutations.js                    -> theme/component mutations
├── state.js                        -> theme/component state
└── store.js                        -> main store

Starter Kit

Folder structure of Vuexy Admin starter kit is as follow:

vuexy-vx.x/
│
├── public/
│   ├── favicon.ico
│   ├── logo.png
│   ├── loader.css                          -> Initial Loader CSS
│   └── index.html                          -> Main HTML
│
├── src/
│   │                             
│   ├── assets/
│   |    ├── css/                           -> Tailwind, Feather & Loader CSS
│   |    ├── fonts/                         -> Feather Font Icons
│   |    ├── images/
│   |    ├── scss/                          -> Template SCSS files, check folder structure below
│   |    └── utils/                         -> utilities folder
│   │
│   ├── components/                         -> Vuexy Admin custom components
│   │
│   ├── layouts/                            
│   │    │
│   |    ├── components/                    -> Layout components
│   |    |    ├── customizer/               -> Customizer component
│   |    |    ├── horizontal-nav-menu/      -> Nav-Menu Component for Horizontal layout
│   |    |    ├── Navbar/                   -> Navbar Components for Vertical & Horizontal Layout + Fuzzy Search Items
│   |    |    ├── vertical-nav-menu/        -> Nav-Menu Component for Vertical layout (Previously VxSidebar)
│   |    |    ├── vx-tooltip/               -> Extended Tooltip Component (vx-tooltip)
│   |    |    ├── Logo.vue                  -> Logo Component For Dynamic Color
│   |    |    ├── TheFooter.vue             -> Footer Component
│   |    |    └── VxBreadcrumb.vue          -> Breadcrumb Component
│   │    │
│   |    ├── full-page/                     -> Full page layout for pages like login
│   |    └── main/                          -> Main layout
│   │
│   ├── store/                              -> Vuex Store
│   ├── views/                              -> View files for all pages
│   ├── App.vue                             -> Application main vue file
│   ├── globalComponents.js                 -> Gloablly registered components
│   ├── main.js                             -> Application main js file
│   └── router.js                           -> router file
│
├── .browserlistrc                          -> Browser support
├── .editorconfig                           -> Editor configuration file
├── .eslintrc.js                            -> ESLint Configuration
├── .gitignore                              -> gitignore
├── babel.config.js                         -> Babel configuration
├── package.json                            -> Package json
├── postcss.config.js                       -> postcss configuration
├── README.md                               -> Readme
├── tailwind-v0.js                          -> v0.x Tailwind configuration
├── tailwind.config.js                      -> Tailwind configuration
├── themeConfig.js                          -> Vuexy Admin configuration
└── vue.config.js                           -> VueJS configuration