介绍

vue-mooc是一个使用Vue相关技术栈，高仿慕课网PC端的一个项目，项目中涉及到的技术栈如下：

Vue生态:

• Vue.js：基础框架，Vue.js官网。
• Vue-cli3.0+：一个Vue官方提供的一个脚手架工具，它提供了标准的目录结构和一些必要的配置，Vue-cli3.0官网
• Vuex：数据状态管理工具，Vuex官网。
• Vue-router：路由管理工具，Vue-router官网。
• VuePress：撰写静态站点的工具(你所看到的本站点是采用VuePress1.x)，VuePress官网。

CSS预编译器：

• Stylus：一种CSS预编译工具，类似的还有Sass/Less，Stylus官网

数据请求：

• axios：一个非常出名的HTTP请求工具，axios官网

服务端接口：

• koa框架：使用koa2Node服务端框架，Koa官网
• mongoose：使用mongoose来链接和操作mongodb。Mongoose官网
• mongodb：使用非关系型数据库mongodb来存储数据。Mongodb官网

背景

在目前的业务搬砖中，接触到的项目大多是中后台项目，每日搬砖无非就是拿element-ui轮子一把嗦，轮子仔当久了自己也安逸了，痛定思痛后决定当一会轮子的制造者。
本项目中关于基础组件的封装，尽可能抛弃使用element-ui，而采用自己封装，知其然同时又知其所以然。

基础公共组件完成情况：
Container(布局容器)
Star(星级评分)
Badge(标记)
Switch(开关)

Progress(进度条)

BackTop(返回顶部)
Button(按钮)
Message(消息提示)
MessageBox(消息确认)
Carousel(轮播)
Dialog(弹窗)
Pagination(基于element-ui二次封装)

源码地址&开发

如果你需要看一看此项目的源码，请移步:point_right: 源码仓库

开发

一方面由于采用Node+MongoDB来撰写后端接口，另一方面暂时还不方便部署在云服务器，因此此项目需要本地安装MongoDB数据库，你可以点击MongoDB官网去下载最新版本的。

# 克隆代码
$ git clone https://github.com/wangtunan/vue-mooc.git

# 安装依赖
$ npm install

# 启动Node接口
$ npm run node

# 启动本地开发服务
$ npm run serve

静态站点介绍

本静态站点采用VuePress1.x撰写而来，你可以在其官网很方便的找到该如何配置以及搭建属于自己的静态站点。
如果你对于官网中的文档不太那么理解，那么请移步:point_right: 从今天开始拿起VuePress打造属于自己的专属博客
这篇博客也同时提供了一个简单的VuePress配置Demo
如果你想要一个更贴近于实际的配置参考，那么请移步:point_right:本站点的VuePress站点

部分页面功能演示

首页

免费课程

实战课程

专栏

猿问

手记

购物车

消息中心

订单中心

个人中心