aungkyawsoemin / vuejs-pwa-sample

vuejs-pwa-sample

Preface

This sample project uses Vue.js, Vue Material and PWA(Progressive Web Apps). This sample uses the Connpass Web API.

Install

Perform the following steps:

1. Download and install Node.js.
2. Download and install Visual Studio Code(VS Code).
3. Install vetur extension for VS Code.
4. Download and install npm packages.

   npm install

Starting Server

Perform the following steps:

1. Clone this repository.
2. Start the development server.

   npm run serve

3. Access the following URL in Chrome.
   http://localhost:8080/home

By configuration, you cann't run Service Worker in the development environment. So, I recommend using "Service Worker for Chrome" to run Service Worker.

1. Install "Service Worker for Chrome" in Chrome.

2. Start the "Service Worker for Chrome".

3. Select dist directory in "choose folder" of "Service Worker for Chrome".

4. Access the "Web Server URL".

Creating a Production Build

Perform the following command:

npm run build

Views

There are the following views in this sample.

View Name	File Name	Description
Home View	Home.vue	Search for events via the Connpass Web API.
About View	About.vue	About this sample.

Components

There are the following components in this sample.

Component Name	File Name	Description
Header	Header.vue	Define the header of this web app.
Card	Card.vue	Define a card to display content

Libraries

This sample uses the following library.

Library Name	Version	Description
Vue.js	2.6.10	Javascript Framework
Vue Router	3.0.3	Routing library for Vue.js
Vue Material	1.0.0-beta-10.2	Material Design for Vue.js

License

The License of this sample is MIT License.