Bellevue is built on top of the awesome, official
vuejs-templates/webpack template. While it's a great template, it does lack a few features in the tooling, and provides very little in terms of architecture and patterns for writing application code on top of the tooling.
This project aims to provide a more realistic representation of what a modern full-featured frontend project will have. It's important to remember that there are many different, valid ways of introducing the features listed below, and any project template like this will have to make opinionated decisions about how to architecture everything. If you are unhappy with the way this project is structured, you can still use this comparison as a reference.
For a quick overview of what the full feature set of Bellevue is, check out the annotated project structure.
|Environment-specific tooling configuration||Yes||Yes|
|URL resolution for all file types and assets||Yes||Yes|
|Completely static assets||Yes||Yes|
|Single-file components as
|Minify and compile JS and CSS||Yes||Yes|
|Autoprefixing for CSS||Yes||Yes|
|Excellent error reporting||Yes||Yes|
New and improved
All relevant parts of your source code are preconfigured in Webpack, allowing you to avoid relative paths in your files.
Sass support is preconfigured for global styling (separate
.scss files), and component styles (
Assets and SVG optimisation
Centralised config for tooling and app code
Preconfigured support for using bitmap and other assets from one place without relative paths. SVG assets are compiled and optimized, and support
currentColor for CSS-based coloring. Support for adding local web fonts is also preconfigured.
Linting and workspace configuration
Linting is preconfigured for
.scss files. Additional linting configuration for JS imports, Vue-specific code stylesheets (template, script and style) and Jest spec files. Linters can be run on command line or in your editor.
Preconfigured settings for VS Code (common plugins, all linting tools, Babel etc.).
Manifest files and meta tags
- Sitemap generation (
robots.txtand robots meta tags
- Run-time meta tag management
Support for the following comes preconfigured:
Each of these can be registered globally or imported per component. New plugins and other extensions can be added easily.
App code structure
Persistence can be achieved via preconfigured routing or local storage support. Read more
Preconfigured Vuex with module support and tests. Read more
Webpack's offline plugin preconfigured (disabled by default). Included
network service to detect network status in runtime code. Read more
Preconfigured (disabled by default). Read more