A Typical Vue Project Structure

my-project-name/
├── BuildScript               // Pipeline deployment files
├── docs                      // Detailed project documentation (optional)
├── nginx                     // nginx proxy files for the containerized frontend project
├── node_modules              // Downloaded dependencies
├── public                    // Static pages
│   └── index.html            // Project entry point
├── src                       // Source code
│   ├── api                   // http requests
│   ├── assets                // Static assets built by wabpack
│   │   ├── icon              // icon files
│   │   ├── img               // Images
│   │   ├── js                // Shared js files
│   │   └── scss              // Shared scss styles
│   │       ├── frame.scss    // Entry file
│   │       ├── global.scss   // Shared styles
│   │       └── reset.scss    // Reset styles
│   ├── components            // Components
│   ├── plugins               // Plugins
│   ├── router                // Routing
│   │   └── index.js
│   ├── routes                // Detailed route modules (optional)
│   ├── store                 // Global state management
│   ├── utils                 // Utilities
│   │   └── request.js        // Shared request utility
│   ├── views                 // Pages
│   ├── App.vue               // Root component
│   └── main.js               // Entry file
├── tests                     // Test cases
├── .browserslistrc           // Browser compatibility configuration
├── .editorconfig             // Editor configuration
├── .eslintignore             // eslint ignore rules
├── .eslintrc.js              // eslint rules
├── .gitignore                // git ignore rules
├── babel.config.js           // babel rules
├── Dockerfile                // Docker deployment file
├── jest.config.js
├── package-lock.json
├── package.json              // Dependencies
├── README.md                 // Project README
└── vue.config.js             // webpack configuration