- assets - static resources for inclusion in client bundles
- common - utility classes
- components - store global components in this folder
- locales - language resource files
- model - models used by multiple areas
- routes - vuejs router navigation guards
- services - helper/domain classes
- store - vuex store used by global components
- styles - global SASS styles
- validation - shared validations rules
Other components will be found in specific sub-areas (such as 'root' or 'admin'). These areas have a similar structure to the project root, but at minimum will contain
- layout - contains any custom layouts
- navigation - navbar or menu components for use by layouts
- routes - route configuration, and route names
- store - area vuex store for storing application state
- [area].ts - code to bootstrap the entry point
- [area].html - entry point page
- [area].scss - area SASS styles
There are multiple areas defined in the client Vuejs application ...
- ./ui/src/root/root.ts => https://localhost:5000
- ./ui/src/admin/admin.ts => https://localhost:5000/admin
The motive behind this decision was to
- optimize end user experience (by ensuring only required resources are downloaded)
- enable switching between layouts in different areas of a site
- establish a common set of components for re-use
To support multiple entry points as described above, the webpack build process is configured to emit multiple files
- vendor.js - contains core third-party dependencies
- common.js - contains code used by all areas/subsites (using commons-chunk-plugin)
- [area].js - contains area-specific code and resources