基于vue、vuex、express、mongodb的一个单页应用,包括前后端,前端主要是使用vue,后端是node的express,数据库是使用的mongodb

1.下载使用

git clone https://github.com/rainbowChenhong/vue-config-demo.git
cd vue-config-demo
cd node-server
npm install //安装后端依赖包
cd config-page
npm install //安装前端依赖包

2.启动后台

这里的后台主要是express4+mongoDB,代码主要是在node-server文件夹下面,链接数据库的地址在db/db.js修改即可,需要先启动mongoDB的服务器,再执行此代码,否则会报错

npm run server (正常启动模式)
访问 http://localhost:8088

这样服务器就启动好了。

3.前端运行

 npm run dev (正常编译模式)
npm run build (发布生产版本,提取公共代码,分离css文件)
访问 http://localhost:8080

4.效果展示

5.GitHub地址

感兴趣的朋友可以去GitHub上去看源码

git clone https://github.com/rainbowChenhong/vue-config-demo.git

使用的vue、elementUI、vuex、express、mongoDB的单页应用的更多相关文章

  1. 使用 Flask 和 Vue.js 来构建全栈单页应用

    在这个教程中,我将向你展示如何将 Vue 的单页面应用和 Flask 后端连接起来. 简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的. 但在实际中存在一个明显的问题就是 Fla ...

  2. vue路由实现多视图的单页应用

    多视图的单页应用:在一个页面中实现多个页面不同切换,url也发生相应变化. router-view结合this.$router.push("/pickUp")实现,效果如下: 当点 ...

  3. vue + element-ui 制作tab切换(适用于单页切换不同标记显示不同内容)

    本篇文章使用vue结合element开发tab切换单页不同的标记显示不同的内容. 1.安装element-ui npm install element-ui --save 2.在main.js中引入e ...

  4. 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果

    基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...

  5. Vue之vue自动化工具快速搭建单页项目目录

    1 生成项目目录 使用vue自动化工具可以快速搭建单页应用项目目录. 该工具为现代化的前端开发工作流提供了开箱即用的构建配置.只需几分钟即可创建并启动一个带热重载.保存时静态检查以及可用于生产环境的构 ...

  6. vue+websocket+express+mongodb实战项目(实时聊天)

    继上一个项目用vuejs仿网易云音乐(实现听歌以及搜索功能)后,发现上一个项目单纯用vue的model管理十分混乱,然后我去看了看vuex,打算做一个项目练练手,又不想做一个重复的项目,这次我就放弃颜 ...

  7. vue.js+socket.io+express+mongodb打造在线聊天

    vue.js+socket.io+express+mongodb打造在线聊天 在线地址观看 http://www.chenleiming.com github地址 https://github.com ...

  8. vue.js+socket.io+express+mongodb打造在线聊天[二]

    vue.js+socket.io+express+mongodb打造在线聊天[二] 在线地址观看 http://www.chenleiming.com github地址 https://github. ...

  9. vue+websocket+express+mongodb实战项目(实时聊天)(二)

    原项目地址:[ vue+websocket+express+mongodb实战项目(实时聊天)(一)][http://blog.csdn.net/blueblueskyhua/article/deta ...

随机推荐

  1. 【转】__ATTRIBUTE__ 你知多少

    __ATTRIBUTE__ 你知多少? GNU C 的一大特色就是__attribute__ 机制.__attribute__ 可以设置函数属性(Function Attribute ).变量属性(V ...

  2. Linux系统中/opt 和 /usr目录

    重点:usr是Unix Software Resource的缩写,即“UNIX操作系统软件资源”所放置的目录. 下面是个人找到的适合类似我这种从Windows转向Linux小白的文章. Ref:htt ...

  3. 安装Xtrabackup,设置定时备份msyql数据库

    Xtrabackup是由percona提供的mysql数据库备份工具,据官方介绍,这也是世界上惟一一款开源的能够对innodb和xtradb数据库进行热备的工具. XtraDB 存储引擎是由Perco ...

  4. process.nextTick,Promise.then,setTimeout,setImmediate执行顺序

    1. 同步代码执行顺序优先级高于异步代码执行顺序优先级: 2. new Promise(fn)中的fn是同步执行: 3. process.nextTick()>Promise.then()> ...

  5. BRIEF特征点描述子

    简介 BRIEF是2010年的一篇名为<BRIEF:Binary Robust Independent Elementary Features>的文章中提出,BRIEF是对已检测到的特征点 ...

  6. 题解【51nod 1290 Counting Diff Pairs】

    Description 求区间内有多少对 \((i,j)\) 满足 \(|a_i - a_j| \leq k\) Solution 可以莫队做(万能的莫队) 只需要考虑加入一个数会产生多少贡献即可 离 ...

  7. 【Asp.net入门05】第一个ASP.NET 应用程序-测试Asp.net程序

    测试示例应用程序 本部分内容: ASP.NET应用程序测试方法 web窗体访问过程 Visual Studio工具栏上有一个下拉列表,其中列出了工作站上已安装的浏览器的名称(单击浏览器名称右侧的向下箭 ...

  8. python基础之while语句continue以及break --语法以及案例

    1.while 死循环 [root@localhost python]# cat while.py #!/usr/bin/env python # _*_ coding:utf8 _*_ import ...

  9. P3924 康娜的线段树

    P3924 康娜的线段树 题目描述 小林是个程序媛,不可避免地康娜对这种人类的"魔法"产生了浓厚的兴趣,于是小林开始教她OI. 今天康娜学习了一种叫做线段树的神奇魔法,这种魔法可以 ...

  10. JVM 体系结构介绍

    JVM是Java的一大利器.它可以屏蔽各个计算机平台相关软件和硬件之间的差异.把平台相关的耦合统一工作交由JVM的实现者. JVM(Java 虚拟机),它通过模拟一个计算机来达到一个计算机所拥有的计算 ...