摘要：仿網易云課堂在線預覽手機瀏覽或切換谷歌瀏覽器移動調試預覽描述前端部分快速構建前端界面輪播圖，滑塊管理現非父子組件之間的通信移動設備兼容使用實現預編譯實現所有小圖標的加載，減少請求路由懶加載結合異步組件和的做請求存儲用

在線預覽：手機瀏覽或切換谷歌瀏覽器移動調試

Gif預覽

前端部分

Vue2.0 + Mint-ui快速構建前端界面（輪播圖，swiper滑塊） ---Mint-ui

Vuex 管理現非父子組件之間的通信

移動設備兼容：使用rem+flexible.js

Stylus實現css預編譯

icon-font實現所有小圖標的加載，減少http請求 ----Icon-font

路由懶加載：Vue Router結合 Vue異步組件和Webpack 的 Code Splitting

axios做ajax請求

sessionStorage 存儲用戶信息

后端部分

本地使用webpack dev-server 搭建小型express服務

服務器端使用express搭建靜態資源資源接口

待更新的功能

用 express + mongodb 保存用戶狀態

1、搜索框

1、tabbar切換

4、swiper滑動，切換頁面

6、首頁各個界面

1、實現切換分類模塊

2、右側菜單

1、判斷登錄狀態

2、用戶所學課程展示

1、賬戶的登錄

2、設置界面 退出當前賬號

1、根據用戶輸入查找所有課程中符合要求的課程并顯示

1、通過router傳參查找課程

1、根據用戶是否擁有選擇播放視頻權限

2、課程介紹界面

1、熟悉使用Vue2.0

2、在項目中，將組件進行分離，編寫可以復用的組件，提高效率

3、Vuex的狀態管理模塊，統一的狀態的管理，讓我們更好的去對數據操作

4、util的工具，倒計時js

5、對axios有更進一步的理解，利用cros進行跨域處理

6、進行路由的懶加載，優化頁面加載

router.beforeEach((to, from, next) => {
  // NProgress.start();
  if (to.path == "/login") {
    sessionStorage.removeItem("userInfo");
  }
  let userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
   if (!userInfo && to.path != "/account/login") {
     next({ path: "/account/login" })
   } else {
     next()
   }                            
  next()
})

export default new Router({
  routes: [
    {
      path: "/home",
      name: "Home",
      component: resolve => require(["@/views/Home/Home"], resolve),
    },
    ]
})

   changeToCoursedetails(course){
      this.$router.push({path:"/home/coursedetails" , query:{id:course.id}})
      // this.$router.push({name:"Coursedetails" , params:{id:course.id}}) 
      // 可使用vue.$route 獲取query和params
    },

params的特點是 路由后面要帶參數名
并且傳參的時候，參數名要跟路由后面設置的參數名對應。

但是 刷新界面，或者跳到別的界面，參數就會消失
params一旦設置在路由，params就是路由的一部分

app.use(function (req, res, next) {
    // Website you wish to allow to connect
    res.setHeader("Access-Control-Allow-Origin", "*");
    // Request methods you wish to allow
    res.setHeader("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, PATCH, DELETE");
    // Request headers you wish to allow
    res.setHeader("Access-Control-Allow-Headers", "X-Requested-With,content-type");
    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader("Access-Control-Allow-Credentials", true);
    // Pass to next layer of middleware
    next();
});

├─api
│      api.js        ---Axios請求
├─common             
│  ├─font           ---iconfont
│  ├─js
│  └─stylus             ---stylus預處理和函數
├─components
│  │  loading.vue       ---加載界面組件
│  │  NotFound.vue      ---notFound組件
│  │  search.vue        ---查找組件
│  │  tabbar.vue        ---tabbar組件
│  │  
│  └─star               ---星級組件
├─router
│      index.js         ---router入口文件
│      
├─views
│  │  Classify.vue          ---主頁分類界面
│  │  Classifydetails.vue   ---分類詳細界面
│  │  Login.vue             ---登錄界面
│  │  Mystudy.vue           ---主頁我的學習界面
│  │  
│  ├─Account                ---主頁我的賬號界面
│  │      Account.vue       
│  │      setting.vue       ---設置界面
│  │      
│  ├─Coursedetails          ---課程詳細界面
│  │      catalog.vue       
│  │      comment.vue
│  │      Coursedetails.vue 
│  │      introduce.vue     ---暫開發課程介紹界面
│  │      
│  └─Home                   ---我的主頁中首頁界面
│          classic.vue      ---經典課程界面
│          expert.vue       ---專家界面
│          Home.vue
│          major.vue        ---行家界面
│          recommend.vue    ---推薦界面
│          
└─vuex
    │  store.js             
    │  types.js
    │  
    └─modules
            com.js      ---vuex 狀態管理
            user.js     ---vuex 用戶管理

# 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

源碼地址：Github 歡迎star哦