help-system v1.0.0

Vue.js BOILERPLATE is extended from Boilerplate 2.0 (XBoilerplate)

Always refer to this README for proper use of vue.js xboilerplate. This README will always be updated as features and changes are made.

Webpack setup for Vue.js Project. Wiki: https://wiki.xtremax.com/x/0gfZB

Objective

Provide a complete setup for vue.js project. Features :

• Vue component compiling
• Batch image optimization
• Hot Module Replacement (vue, css & js) when development
• Production build configuration with optimization, and versioning
• Routing using vue router

Adds on:

• eslint
• stylelint
• prettier
• git pre-commit hooks

Prerequisites

Developement setup as required in Xtremax Frontend Development Group (https://wiki.xtremax.com/x/nRaWB). Install these VSCode Extension:

• eslint (https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
• stylelint (https://marketplace.visualstudio.com/items?itemName=shinnn.stylelint)
• prettier (https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
• vetur (https://marketplace.visualstudio.com/items?itemName=octref.vetur)

Usage

Clone this repository

make sure your git version >= 2.9 to enable git config

git clone <repository>
git config core.hooksPath ./tools/git-hooks

Install

npm install

You need to install project dependencies both on root of Xtremax.XBase.WebApp and Xtremax.XBase.WebApp.SERVICE-NAME

Note on installing new package or modules to project
Use npm install <package> --save --save-exact to avoid risk of drifting the package or modules to different versions.

Start the application in development mode

npm run dev

This will automatically open chrome browser. If not please open http://localhost:3000 in your browser.

Build for production

npm run prod

This will generate a javascript bundle and css files inside Xtremax.XBase.WebApp/wwwroot/SERVICE-NAME directory. Please follow semantic versioning for number versioning of your production assets (https://semver.org/).

You can always look at package.json for list of scripts that you can run other than start and build. You can even add your scripts if you want! Please refer to https://docs.npmjs.com/misc/scripts for further information on "How npm handles the 'scripts' field". You may also want to dig more on webpack cli here https://webpack.js.org/api/cli/.