alexjp7/mijdasweb

The MarkIt Project

• The MarkIt web application serves as one of the front end user applications for the MarkIt student assessment managment system that was developed as apart of a final year software developmment project.

Other MarkIt repos:

• Markit Mobile.
• Markit Server.

Links to MarkIt's Documentation:

• Technical Documentation
• User Manual

Mijdas' MarkIt Web

Installation Instructions

Installing Nodejs

1. Click to Install Node.
2. Once installed, open up a Command prompt and navigate to a directory where you would like the following project to be located. Please note that the project will create a folder in this location.

Installing Vue with CLI

1. run npm install vue.
2. run npm install -g @vue/cli NOTE: -g installs globally to the machine.

Creating The Vue Project

CLI Method

** Please note: Enter will CONFIRM, Space will SELECT (if error is made ctrl-c will terminate process). **

1. Run vue create <project-name>.
2. Arrow key down to manually select.
3. Arrow key and space on router and vuex confirm.
4. Arrow down to Eslint + Prettier and confirm.
5. Select lint on save.
6. Select in dedicated config file.
7. Type N for not saving preset.
8. Change directory to the project that was just created cd <project-name>.

OPTIONAL: run vue ui --dev and import project directory for ui use later (provides analytics etc).

Required Vue Packages

To install the packages listed below please enter:

1. vue add vuetify and hit enter on default.
2. npm install -- save axios vuex-router-sync vue-resource vuetify-upload-button.

Axios - this is a framework that allows for API post requests.

Vuex-router-sync - dependency that allows for certain states to change the route while updating the Vuex store.

Vue-resource - provides capability for making web requests and handle responses using $http.

Vuetify - allows for advanced components such as forms, buttons and navbars.

VS Code Extensions

Please download/install the following extension:

Name: Vue VS Code Extension Pack.

Id: sdras.vue-vscode-extensionpack.

Description: A collection of extensions for working with Vue Applications in VS Code.

Version: 0.2.0.

Publisher: sarah.drasner.

VS Marketplace Link: <https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-extensionpack>.

Using The Development Environment

1. To correct errors between dependencies please run: npm run serve --fix.
2. To build and run the project: npm run serve or npm run devthis will locally host the website
3. To run please open a browser, and enter into the url http://localhost:8080/.

Source Files - Github & Zipped File

Option 1: You will need to pull/clone this repo and use it to replace the pre-existing src and public files.

Option 2: Additionally you can download the zip file of the source code, extract it and copy & replace the files that were already generated by vue and vuetify.

Additional Information

Open terminal and run node -v to check the install version.

Check npm (Node Package Manger Version) npm -v.