PVS Web Vue-2.6

Usage

$ npm i && npm run dev

Configuration

Wait a minute, you just said that I only need to run npm install? What's this? I need to do more?

Yeah, to get up and running real quick, npm install is enough. But if you want to, let's say, connect to an external API, there's a little bit more involved. You need to configure your application a bit more, explained below:

Config files

Inside the config/*.env.js-files, you can configure your environment variables. Out of the box the applications comes bundled with AJAX-support. The only thing you need to do is change VUE_APP_API_URL environment variable. If you want to use OAuth 2, you can set the API_CLIENT_ID and API_CLIENT_SECRET here as well.

Are you in dev-mode and want to use different values than your production mode? No problem! Just copy the config from the prod.env.js-file and paste them in the dev.env.js-file. Edit the values and you're good to go!

For more information, visit the docs.

What's included

• npm run dev: first-in-class development experience.

  • Webpack + vue-loader for single file Vue components.
  • State preserving hot-reload
  • State preserving compilation error overlay
  • Lint-on-save with ESLint
  • Source maps

• npm run build: Production ready build.

  • JavaScript minified with UglifyJS.
  • HTML minified with html-minifier.
  • CSS across all components extracted into a single file and minified with cssnano.
  • All static assets compiled with version hashes for efficient long-term caching, and a production index.html is auto-generated with proper URLs to these generated assets.

• npm run unit: start the Karma Test Runner.

  • Unit Tests are provided by Karma, Mocha, Chai and Sinon-Chai.
  • The testing files should be place under test/unit/specs.
  • Make sure every test file ends in .spec.js

• npm run e2e: start the Nightwatch Test Runner.

  • End to End (e2e) Tests are provided by Nightwatch, Selenium and PhantomJS.
  • The testing files should be place under test/e2e/specs.

Other tools

Scaffolding

For quickly scaffolding components, pages, layouts and more, install the Vueture CLI tool.

$ npm install -g vueture-cli

Important Files

So there are two important files that needs to be addressed:

main.js

This file will load your single page application and bootstrap all the plugins that are used. It will also serve as the entry point which will be loaded and compiled using webpack.

app/index.vue

The main Vue file. This file will load the page inside the router-view-component. It will check if the user is authenticated and load the resources accordingly.

Directory Structure

Inside the src-directory, are a couple directories that needs to be addressed:

Components

Your components will be placed inside this directory. As you can see, this boilerplate comes already shipped with a pre-made card component.

Layouts

Your layout files will be placed inside this directory. When you are building a large single page application, you will be using different layouts. For instance, your login-page or register-page will have a different layout than your account-page.

The boilerplate comes out of the box with two layouts included. A minimal layout, used for the login and register page, and a default layout, used for the home and account page.

Mixins

The mixins you want to use with Vue will be placed inside this directory.

Inside the mixins directory is a slot-mixin. This mixin will add the hasSlot()-method to all the components it is used in.

Pages

The pages are placed inside this directory. By default it comes with an account/index.vue, home/index.vue, login/index.vue and a register/index.vue page, but feel free to add more.

Plugins

This boilerplate comes with a couple of plugins you can use. It will load and configure:

• vue
• vue-router
• vue-i18n
• vuex
• vuex-router-sync
• axios
• bootstrap
• font-awesome

Don't like one of those plugins? Just remove the file from the plugins-directory and remove the entry from the main.js-file. Also make sure to remove the package and dependencies from the package.json-file.

Proxies

Proxies are used to perform AJAX-requests. This boilerplate comes with a base proxy which can be used to make performing AJAX-requests fairly easy. Create a new proxy, for example UserProxy, and extend the Proxy. This way you've got access to the all, find, update, create and destroy methods. The boilerplate comes with an AccountProxy and AuthProxy by default.

Routes

In this directory you can specify the routes that are used by this application. VueRouter loads the routes located in this directory.

Store

As mentioned before, Vuex is used as a single point of truth. To learn more about Vuex, visit the documentation

Transformers

Transformers are used to transform the incoming and outgoing requests. If you have an API where you can retrieve posts from, a post wil look something like this:

{
  "id" : 1,
  "title" : "Hello World!",
  "content" : "Lorem Ipsum",
  "created_at" : "today"
}

However, it feels weird to use snake_cased variables inside your camelCased application. This is where transformers come in. So given the previous example, using a transformer, it will look something like this:

{
  "id" : 1,
  "title" : "Hello World!",
  "content" : "Lorem Ipsum",
  "createdAt" : "today"
}

Utils

Here you can place handy utils you want to use inside your application.

Test

Both the Unit Tests and the End-2-End Tests are within the test/ folder. Unit Tests should go inside the test/unit/specs folder. E2e Tests should go inside the test/e2e/specs folder. You can read more about both test on the Webpack Boilerplate Testing Session.

Deploy

$ docker login -u kakakhang -p Cnxxxx51

$ ssh-copy-id [email protected]

• Deploy Prod: ./deploy.sh

• Deploy Testing: ./deploy.sh testing