Agapewien Homepage

This is the new homepage of the Agape Church Vienna. There are five goals we have for this project:

1. It should have good structure & organizatin of important information.
2. The webpage should be a warm welcome to anybody new to Agape.
3. It should be fast.
4. All functionality must be reliable.
5. The webpage should be mobile, tablet and desktop friendly.

Technologies used

• NodeJS
• VueJS with Vue-cli

Good resources on Vue

• VueJS Homepage
• An opinion on Vue, with Pro/Contras
• Made with Vue
• Really, really good blog about Vue best practices
• Vue Course
• Vue Handbook

Development Environment

The best development experience for Vue Development is either using the Webstorm IDE from IntelliJ or Visual Studio Code from Microsoft.

If you use Chrome, Vue Dev Tools exists, making your life easier when debugging.

Webstorm

Webstorm has most of the code linting as well as automatic code analysis built in. Nothing special needs to be installed when using Webstorm to develop in Vue.

This tool costs, but the community edition should be fine if you don't have a licence.

Visual Studio Code

VSC is known to be something in-between a normal notepad and an IDE. To use it as a reliable development environment, add these plugins:

• Vue Extention pack containing most used plugins
• Vetur
• Vue peek

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification, uses webpack
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test

What these commands do precicely can be seen in the package.json file in the root directory of the project.

For a detailed explanation on how things work, check out the webpack guide and the docs for vue-loader.