Skip to content

Latest commit

 

History

History
93 lines (76 loc) · 3.87 KB

README.md

File metadata and controls

93 lines (76 loc) · 3.87 KB
Raw

vuejs-webapp-sample

license workflow release

Preface

This sample project uses Vue.js and Quasar Framework. It provides only Web UI. So, I recommend using the golang-webapp-sample project as Back End Application.

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. Clone this repository.
  5. Download and install npm packages. 
    npm install

Starting Server

Perform the following steps:

  1. Perform golang-webapp-sample project.
  2. Start the development server. 
    npm run dev
  3. When startup is complete, the console shows the following message: 
    > vuejs-webapp-sample@3.0.0 dev
> vite --mode development


VITE v4.2.1  ready in 1362 ms

➜  Local:   http://localhost:3000/
➜  press h to show help
  4. Access the following URL in the Chrome.
    http://localhost:3000

Creating a Production Build

Perform the following command:

npm run build

Project Map

The following figure is the map of this sample project.

- vuejs-webapp-sample
  + public          … Contains resouces of this project.
  - src
    + assets        … Contains source codes that Webpack doesn't need to build.
    + components    … Contains components of Vue.
    + api           … Implement the common library for Ajax.
    + router        … Define Vue Router.
    + store         … Define Vuex
    + types         … Define types of the view models.
    + views         … Define views of this project.
    - App.vue       … Define a base view of this project.
    - main.js       … Entry point.
  - package.json    … Define npm packages.

Views

There are the following views in this sample.

View Name File Name Description
Login View LoginView.vue The view for session authentication with username and password.
Home View HomeView.vue The view showing search results.
About View AboutView.vue The view showing this application information.

Libraries

This sample uses the following library.

Library Name Version Description
vite 4.1.4 The tool for Vue.js Development.
Vue.js 3.2.47 JavaScript Framework
Vue Router 4.1.6 Library for Routing.
Pinia 2.0.32 Flux library for Vue.js
Aixos 1.4.0 library for Ajax.
Quasar Framework 2.11.9 CSS Framework

Contribution

Please read CONTRIBUTING.md for proposing new functions, reporting bugs and submitting pull requests before contributing to this repository.

License

The License of this sample is MIT License.