vue（八）头条项目-cnblog

vue（八）头条项目

1. 项目结构

• 根据vue create my-toutiao创建项目
• 勾选上router

2. 生成的项目中的view文件夹和compoent文件夹

• 都是用于存放组件
• view中的组件是通过路由来切换的
• compoent文件夹中的组件是可以复用的UI结构

3. 将axios封装成一个js文件，向外提供方法

• src目录下建立utils文件夹（工具性质的文件放在这里）
• 建立发请求的包request.js

import axios from 'axios'
 
const request = axios.create({
  baseURL: 'https://www.escook.cn'
})
 
export default request
 

4. 项目使用vant2的组件进行开发

• 使用哪个组件，查阅文档进行开发

• 导入所有组件（main.js）

import Vant from 'vant'
import 'vant/lib/index.less'

5.eslint 的检查规则

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'space-before-function-paren': 0
  }

6.将ajax请求文章列表封装成一个api

• 在src目录下新建api文件夹，新建articleApi.js

import request from '@/utils/request'
 
// ajax请求函数api
 
export const getArticleApi = function(_page, _limit) {
  // 发起ajax请求获取文章列表,返回的值为promise对象
  return request.get('/articles', {
    params: {
      _page,
      _limit
    }
  })
}
 

7.定制vant2主题

7.1 第一种方法（不推荐）

• main.js中
• 导入less，而不是

import 'vant/lib/index.less'

• 在vue.config.js中配置

// 直接覆盖css的样式
module.exports.css = {
  loaderOptions: {
    less: {
      // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
      lessOptions: {
        modifyVars: {
            // 要修改的样式
          'nav-bar-background-color': 'green'
        }
      }
    }
  }
}

7.2 第二种方式

• 在src目录下新建一个theme.less文件，通过这里面的配置覆盖原有组件的默认配置

// 用于覆盖vant2组件的原有样式
 
// 定义导航栏背景颜色
 
@blue:#0077ff;
 
// 覆盖nav-bar的背景颜色
 
@nav-bar-background-color:@blue;

• 在vue.config.js中配置

// theme.less文件路径
const path = require('path')
 
const themePath = path.join(__dirname, './src/theme.less')
 
// 直接覆盖css的样式
module.exports.css = {
  loaderOptions: {
    less: {
      // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
      lessOptions: {
        modifyVars: {
          // 'nav-bar-background-color': 'green'
 
          // 模板字符串拼接
          hack: `true; @import "${themePath}";`
        }
      }
    }
  }
}
 

8.切换页面时，保持组件滚动原来的位置

• 使用lodash来节流
• 使用vue-router提供的组件滚动事件来保存滚动位置
• 使用keep-alive时组件在切换时不被销毁（而是激活和失活）
• 使用生命周期函数来监听滚动事件，从而记录位置

vue-router提供的滚动组件

 const scrollBehavior = function (to, from, savedPosition) {
        // savedPosition 会在你使用浏览器前进或后退按钮时候生效
       // 也就是如果触发了hash地址路由的变化，就会触发
       if (savedPosition) {
            return savedPosition
          } else {
            // 如果不是通过上述行为切换组件，就会让页面回到顶部
            return {x: 0, y: 0}
        }
    }
 
 
 // 完整的代码
 
 const router = new VueRouter({
  routes: [
    { path: '/', component: Home, meta: { isRecord: true, top: 0 } },
    { path: '/user', component: User }
  ],
  scrollBehavior(to, from, savedPosition) {
    // return 期望滚动到哪个的位置
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: to.meta.top || 0 }
    }
  }
})

• 使文章列表保存活性(app.vue)

<keep-alive include="Home">
      <router-view></router-view>
    </keep-alive>

• home.vue监听滚动事件，记录位置

activated() {
    fn = this.recordTopHandler()
    window.addEventListener('scroll', fn)
  },
  deactivated() {
    window.removeEventListener('scroll', fn)
 
 
// 导入lodash来节流
import _ from 'lodash'
let fn = null
recordTopHandler() {
      return _.debounce(
        () => {
          this.$route.meta.top = window.scrollY
          console.log(this.$route)
        },
        50,
        { trailing: true }
      )
    }

• debounce参数说明