undecaf / vue-boilerplate

Opinionated boilerplate for Vue.js web apps, PWAs and Electron apps

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

⚠️ This project is no longer being maintained

Opinionated boilerplate for Vue.js web apps, PWAs and Electron apps

Runtime environment

Tooling

Workflow

Creating a project

git clone https://github.com/undecaf/vue-boilerplate.git <project directory>

Project layout

<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

Development

Defining components

Save your Vue components in directory src/components.

Defining routes

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'.

Using the Vuex store

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'.

Validating Vue Material inputs

Validations rely on Vuelidate. A wrapper component, <md-vuelidated>, has been included to simplify writing Vuelidate validations. Documentation and examples can be found here.

Providing I18N and L10N

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'.

Building and serving a web application

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 12345

Building your web application as a PWA (progressive web app)

In 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.

Building and running a desktop 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' 

Unit tests

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' 

End-to-end tests

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' 

Production

Building a web application for deployment

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' 

Serving a deployable web application locally

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 12345

Building a desktop application

The 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' 

End-to-end tests

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' 

License

Software: MIT

Documentation: CC-BY-SA 4.0

About

Opinionated boilerplate for Vue.js web apps, PWAs and Electron apps

License:MIT License


Languages

Language:JavaScript 81.1%Language:CSS 9.5%Language:Vue 6.5%Language:HTML 2.8%