Open Source Ecosystems

vuejs vue-router muse-ui axios express mongoose mongodb......

,vuejs,express,mongodb. expressapi,ajaxCURD.

vue-cli

vue init webpack my-project

cd my-rpoject && npm install

npm run dev

8080vuejs

mongodb,

express mongoose

,,npmexpress,mongoose,.

npm install express body-parser mongoose --save

app.js,express

const express = require('express')
const app = express()
app.use('/',(req,res) => {
  res.send('Yo!')
})
app.listen(3000,() => {
    console.log('app listening on port 3000.')
})

nodemonbabel-watch,

npm install nodemon --save-dev

nodemon app.js

localhost:3000,res.send().

,models,mongoosemodelschema,

movie.js,.

title,poster,rating,introduction,created_at,update_at,model.

mongoosemongodb,app.js

const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27017/yourDbName')

,RobomongoCMDmongo.

CURD,router,index.jsmovie.js,

app.js

......
const index = require('./router/index')
const movie = require('./router/movie')
......
app.use('/',index)
app.use('/api',movie)
......

Postman,,.

,. muse-ui axios

npm install muse-ui axios --save

,src/componentsList,Detail. List,Detail,,src/router, ,App.vue.

,express3000,8080,vue-cliproxyTable ,config/index.js,proxyTable.

axios '/api' , 'http://localhost:3000/api',.

,muse-ui,,.

ajax,methods

......

vuejs,

  @click="methodName"

,webpack,config/index.jsproductionSourceMapfalse, ,express.staticwebpack'dist'express.

npm run build

app.use(express.static('dist'))

Build Setup

# install dependencies
npm install

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

# build for production with minification
npm run build

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

#  localhost:3000
npm run server

# webpack,express'dist'
npm run start