GitHub - raj70/AppVueJs: Sample Application using VueJs, ExpressJs, MongoDb and NodeJs

raj-stack

Sample App build with VueJs, ExpressJs, MongoDb and NodeJs

Important Links

https://vuejs.org/v2/guide/index.html https://vuejs.org/v2/api/ https://router.vuejs.org https://vuex.vuejs.org

VueJs

To create Web application (Client Application)

installation vue Js CLI

https://cli.vuejs.org/guide/#components-of-the-system

full system to vue development

npm install -g @vue/cli [here -g means install globally]

create vue project

vue create name-application [no capital letter]

go through the option (manual process)

application is created

run application by: npm run serve

express js

To create Web Application (Server Application) https://expressjs.com npm install express --save

Note

nodemon: restars server without needing to stop and start

babel

For compling new JavaScript Syntax (ES6) to old JavaScript (ES5)

https://babeljs.io https://babeljs.io/docs/en/usage [follow what ever there....]

npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babel/polyfill

BootStrap

install bootstrap

npm install bootstrap --save npm install jquery popper.js --save

To run application

Please check package.json, we have scripts. Basically, we need to run two applications (one client, one server).

concurrently: runs all the server

npm install concurrently --save

And on package.json "concurrently": "concurrently "babel dev-server --out-dir prod-server --watch" "nodemon prod-server/index.js" "npm run serve" "

Bootstrap + Vue

https://bootstrap-vue.js.org

npm i vue bootstrap-vue bootstrap but npm instal vue bootstrap-vue

MongoDb

to run mongo db server

sudo mongod

mongoose

https://mongoosejs.com

example (to create entity)

var mongoose = require('mongoose'); var Schema = mongoose.Schema;

var blogSchema = new Schema({ title: String, author: String, body: String, comments: [{ body: String, date: Date }], date: { type: Date, default: Date.now }, hidden: Boolean, meta: { votes: Number, favs: Number } });