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参数说明
