基于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. redis学习 - 数据持久化

    Redis提供了多种不同级别的持久化方式: RDB 持久化可以在指定的时间间隔内产生数据集的时间点快照(point-in-time snapshot) AOF持久化记录服务器执行的所有写操作命令,并在 ...

  2. 【bzoj1026】 SCOI2009—windy数

    http://www.lydsy.com/JudgeOnline/problem.php?id=1026 (题目链接) 题意 在区间${[A,B]}$有多少个数相邻两个数位上的数之差至少为2. Sol ...

  3. C++运算符重载形式——成员函数or友元函数

    运算符重载是C++多态的重要实现手段之一.通过运算符重载对运算符功能进行特殊定制,使其支持特定类型对象的运算,执行特定的功能,增强C++的扩展功能. 运算符重载的我们需要坚持四项基本原则: (1)不可 ...

  4. INSTALL_FAILED_TEST_ONLY: installPackageLI. 问题解决

    FAQ: Installation failed with message Failed to finalize session : INSTALL_FAILED_TEST_ONLY: install ...

  5. bzoj 3816&&uoj #41. [清华集训2014]矩阵变换

    稳定婚姻问题: 有n个男生,n个女生,所有女生在每个男生眼里有个排名,反之一样. 将男生和女生两两配对,保证不会出现婚姻不稳定的问题. 即A-1,B-2 而A更喜欢2,2更喜欢A. 算法流程: 每次男 ...

  6. Jenkins(四)---Jenkins添加密钥对

    一.添加密钥 1.添加git用户和git密码对 ,用于git客户端从gitlab上拉取代码到本地 /** lihaibo 文章内容都是根据自己工作情况实践得出. *版权声明:本博客欢迎转发,但请保留原 ...

  7. Dockerfile基本语法

    Dockerfile的组成 Dockerfile分为四部分: 基础镜像信息 维护者信息 镜像操作指令 容器启动时执行指令 Dockerfile指令说明 FROM 格式为FROM <image&g ...

  8. python 几种不同的格式化输出

    1. % %是最常用的格式化输出形式,后面接类型,%s,%d,%c等等 name = input() print('I am %s' % name) 2.format format也是常用格式化输出 ...

  9. 希尔密码(Hill Cipher)的实现

    原理应该不用多讲了,自己百度就可以. C++实现: #include <iostream> #include <string> #include <memory.h> ...

  10. C# 定时执行方法: System.Timers.Timer用法示例

    System.Timers.Timer t = new System.Timers.Timer(5000); //设置时间间隔为5秒        private void Form1_Load(ob ...