上下固定，中间滚动布局(FLEX)

Vue插件封装(loading实例)

src/omponents/loading/Loading.vue
     src/omponents/loading/index.js

axios全局路由拦截及结合promise对axios请求进行处理

/*状态码200：操作成功400：请求无法处理，检查参数是否正确401：未通过身份验证402: 账号在别处登录403：已通过身份验证，但不具备访问权限404：请求的资源不存在500：已收到请求，服务器处理发生了意外503：服务器停止工作*/import Vue from 'vue' import axios from 'axios'import Qs from 'qs'import 'vuex'import store from './../vuex/store' //项目数据仓库import router from './../router/index' //路由文件import Loading from '@/components/loading/index.js' //loading 插件Vue.use(Loading) //使用loading插件// 基地址const baseUrl = 'xxxx'axios.defaults.withCredentials = true// 添加请求拦截器axios.interceptors.request.use(function (config) {  config.headers.Authorization = JSON.stringify(store.state.user) !== '{}' ? store.state.user.token : '' //把拿到的token放到请求头部  Vue.$loading.show() //每个请求都增加loading效果  return config}, function (error) {  return Promise.reject(error)})// 添加响应拦截器axios.interceptors.response.use(function (response) {  // console.log(response)  Vue.$loading.hide() //服务器响应后把loading隐藏掉  //后面根据不同的状态码，可做不同的操作  switch (response.data.code) {    case 401:      store.dispatch('setUser', {}) //未通过验证，把store里的数据清空      break    case 402:      store.dispatch('setUser', {}) //账号在别处登录，把store里的数据清空之后，跳转到登录页面      router.push({ name: 'signIn' })      break    case 403:      router.push({ name: 'vipRecharge', query: { type: 'life' } }) //已通过身份验证，但不具备访问权限，跳转到充值页面      break    case 404:      break    case 500:      break    case 503:      break    default:  }  return response}, function (error) {  // 对响应错误做点什么  return Promise.reject(error)})// AXIOS GET请求export const videoIndex = function () {  return new Promise((resolve, reject) => {    axios.get(`${baseUrl}/videoIndex`)      .then(res => resolve(res.data))      .catch(res => reject(res))  })}// AXIOS POST请求export const videoCollect = function (id) {    return new Promise((resolve, reject) => {        let data = {        vid: id        }        axios({        method: 'post',        url: `${baseUrl}/videoCollect`,        data: Qs.stringify(data)        })        .then(res => resolve(res.data))        .catch(res => reject(res))    })}

路由的其他一些配置

router.beforeEach((to, from, next) => {    // 动态更改页面title    if (to.meta.title) {      document.title = to.meta.title    }      // 验证是否需要登陆    if (to.meta.requireAuth && JSON.stringify(store.state.user) === '{}') {       next({ name: 'signIn' })    }      // 如果登录状态进入登录页面则，返回到个人中心页面    if (JSON.stringify(store.state.user) !== '{}') {      if (to.name === 'signIn' || to.name === 'resetPassword' || to.name === 'mobileLogin') {        next({ name: 'personal', query: { type: 'records' } })      }    }    next()})

解决移动端click300ms问题

安装npm install fastclick --save使用import fastclick from 'fastclick'fastclick.attach(document.body)

Vue父子组件通讯

父向子传递参数Parent.vue(父组件)
     Child.vue(子组件)
     子向父传递参数Child.vue(子组件)
     Parent.vue(父组件)
     

Vuex数据操作及数据持久化

使用vuex-persistedstate插件const store = new Vuex.Store({    state: {      // 用户信息      user: {},      // 分类页数据筛选      videoListFilterTerm: {        catId: 0,        courseId: 0,        software: 0,        diff: 0,        sort: 3,        page: 1      }    },    //获取state数据    getters: {      getUser (state) {        return state.user      }    },    //操作state数据    mutations: {      setUser (state, user) {        state.user = user      },      setVideoListFilterTerm (state, videoListFilterTerm) {        state.videoListFilterTerm = videoListFilterTerm      }    },    //触发mutations函数    actions: {      setUser ({ commit }, user) {        commit('setUser', user)      },      setVideoListFilterTerm ({ commit }, videoListFilterTerm) {        commit('setVideoListFilterTerm', videoListFilterTerm)      }    },    //插件配置    plugins: [createPersistedState({      storage: window.localStorage,      reducer (val) {        return {          user: val.user        }      }    })]  })

Vue m3u8视频播放配置

播放m3u8视频需要用到 videojs-contrib-hls插件安装 npm install videojs-contrib-hls --save导入import 'videojs-contrib-hls'

Vue-router 实现模块化加载

使用该方式导入组件，打包模块会自动把组件进行模块化打包const xxx = () => import('@/views/xxx')

Vue路由切换增加动画效果

90sheji-video/src/App.vue
          src/components/layout/Layout.vue
      组件切换有两种情况，一种是兄弟与兄弟组件切换，一种是子组件与父组件之间切换，所以这里转场动画用的不一样，所以贴出了两个组件用法
      
        增加这个标签表示组件可以被缓存起来，强烈加上
        前面用了组件缓存，所以路由视图的key一定要加上，不然路由和页面有些会不匹配
      

vue使用官方脚手架打包上线配置

/config/index.jsbuild: {    // Template for index.html    index: path.resolve(__dirname, '../dist/index.html'),//入口文件    // Paths    assetsRoot: path.resolve(__dirname, '../dist'),//编译后所有需要部署的文件都放到了这里    assetsSubDirectory: 'public',//静态资源存放的文件目录    assetsPublicPath: './',// ./是相对路径，/是绝对路径，这里改为相对路径，不然打包后上线图片访问不了    productionSourceMap: true,//是否开启SourceMap压缩    devtool: '#source-map',    productionGzip: false,//是否开启Gzip压缩    productionGzipExtensions: ['js', 'css'],//Gzip压缩    bundleAnalyzerReport: process.env.npm_config_report}

后端解决跨域配置

resp.setHeader("Access-Control-Allow-Origin", "*");resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

package.json文件中dependencies与devDependencies的区别

dependencies:打包上线需要用到的插件 使用npm inatall --save xxx 安装插件devDependencies:开发环境需要用到的插件 使用npm install --save-dev xxx 安装插件