- Vue.js configured for:
- source debugging in browser devtools with the same webpack path as in the project
- Vue Router, the official Vue.js router
- Vuex, a popular state management library
- Vue Material: Material Design for Vue.js,
includes
- Roboto
- Material Icons fonts
- Modal dialog wrapper vue-material-modal-dialog
- Locales for the Vue Material datepicker
- Vuelidate plus
- vue-material-vuelidate, a validating wrapper for Vue Material input components
- Vue I18n, an internationalization plugin for Vue.js
- The axios HTTP client
- Additional directives:
-
Vue CLI with
-
Karma, Mocha and Chai for unit testing with headless Chrome and Firefox (or with any other browser for which there is a Karma launcher)
Please note: we do not favour using Jest as recommended by Vue because Jest uses JSDOM as a browser surrogate. Although JSDOM performs better than a browser, it suffers from unpleasant browser compatibility issues.
-
TestCafé for end-to-end testing on Chrome and Firefox
-
serve for serving the deployment build of the application locally
git clone https://github.com/undecaf/vue-boilerplate.git <project directory><project directory>
├── .run // Webstorm run configurations for npm scripts
| └── *.run.xml
├── build // desktop app resources
| └── icons
| └── icon.png // launcher and tray icon, at least 256x256 pixels
├── dist // production build of web app, built by 'npm build'
| ├── css
| ├── fonts
| ├── js
| ├── favicon.png
| └── index.html
├── dist_electron // Electron builds of desktop app, built by 'npm electron:build'
| └── ...
├── node_modules // dependencies
| └── ...
├── public // template files for web apps (HtmlWebpackPlugin)
| ├── favicon.png
| └── index.html
├── src
| ├── components // Vue components
| | └── *.vue
| ├── models // entity classes
| | └── *.js
| ├── services // global services
| | ├── event-bus.js // event bus
| | ├── store.js // Vuex store
| | └── *.js
| ├── config.js // app configuration, also used for testing
| ├── main.css // global styles
| ├── main.js // app entry point
| ├── messages.json // localized Vue I18n messages
| └── routes.js // routes for Vue Router
├── tests
| ├── e2e // end-to-end test suites for Testcafé
| | └── *.test.js
| └── unit // unit test suites for Mocha/Chai
| └── *.spec.js
├── .eslintrc.js // ESLint configuration
├── .gitignore
├── .jshintrc // JSHint configuration
├── .testcaferc.json // Testcafé end-to-end test configuration
├── karma.conf.js // Karma unit test configuration
├── LICENSE
├── package.json
├── package-lock.json
├── README.md // this file
└── vue.config.js // Vue and Webpack build configuration
Save your Vue components in directory src/components.
Vue Router is used for navigation.
Define components for each state and add the routes to the array in src/routes.js.
To reference the router instance from outside a Vue component, use
import { router } from '@/config'.
This project uses Vuex for state management.
Define state and mutations in the respective properties in src/models/store.js.
To reference the store instance from outside a Vue component, use
import { store } from '@/config'.
Validations rely on Vuelidate. A wrapper component,
<md-vuelidated>,
has been included to simplify writing Vuelidate validations. Documentation and examples
can be found here.
Define localized text in src/messages.json and refer to it in your components as
described in the VueI18N Guide.
To reference the VueI18N instance from outside a Vue component, use
import { i18n } from '@/config'.
The development server rebuilds the project whenever something in directory src
has changed.
Starting the server and listening at the default port (8080):
npm run serve # in Webstorm: run 'serve' Listening at a different port:
npm run serve -- --port 12345In package.json, copy the content of comments.devDependencies-pwa to devDependencies
and run npm install.
Subsequent development and
production builds will produce PWA versions of your web application.
Desktop applications are based on the Electron framework.
The development server rebuilds the project whenever something in directory src
has changed.
Starting the server and running the desktop app:
npm run electron:serve # in Webstorm: run 'electron:serve' Use tests/unit/*.spec.js as templates for your unit tests. Test files must be named
*.spec.js.
By default, unit tests run headless in Chrome. Edit the browsers property in karma.conf.js
to select a different browser or multiple browsers.
Running the unit tests:
npm run test:unit # in Webstorm: run 'test:unit' Use tests/e2e/*.test.js as templates for your E2E tests. Test files must be named
*.test.js.
By default, E2E tests run against Chrome. Edit the browsers property in .testcaferc.json
to select a different browser or multiple browsers.
Before running the E2E tests, the development server must be started:
npm run serve # in Webstorm: run 'serve' Then run the E2E tests in a different terminal:
npm run test:e2e # in Webstorm: run 'test:e2e' Web builds are optimized for deployment on a web server but build less quickly.
This builds the project as a web application in directory dist:
npm run build # in Webstorm: run 'build' Making the local web server listen at the default port (8080) and serve
the content of directory dist:
npm run serve:dist # in Webstorm: run 'serve:dist' Listening at a different port:
npm run serve:dist -- -l 12345The project can be built as an Electron-based desktop application for the current platform (Linux, Windows or macOS).
This builds the project for the current platform in directory dist_electron:
npm run electron:build # in Webstorm: run 'electron:build' Prepare E2E tests as described above.
Start a local server before running the E2E tests:
npm run serve:dist # in Webstorm: run 'serve:dist' Then run the E2E tests in a second terminal:
npm run test:e2e # in Webstorm: run 'test:e2e' Software: MIT
Documentation: CC-BY-SA 4.0