移动项目

//1. 移动端适配
 //导包
 //npm install postcss-px-to-viewport --save-dev
 //根目录新建并配置postcss.config.js
 module.exports = ({ file }) => {
  const designWidth = file.includes('node_modules\\vant') ? 375 : 750
  return {
    plugins: {
      'postcss-px-to-viewport': {
        viewportWidth: designWidth
      }
    }
  }
}

//2. 使用van-tabbar-item的作用域插槽icon的active参数可以完成图标自定义和状态切换。

//3. 使用svg的字体图标库iconfont
    不封装组件：iconfont.com上生成字体图标js文件，public下的index.html引入js文件，使用svg标签
    指定类名来指定图标，并在使用svg标签的组件中加入通用css代码
    封装组件：将html与css封装在一个组件中，暴露props属性来指定类名从而指定标签
    
//4.token与refresh_token =》用户无感刷新token

当用户登录成功，后端会返回token和refresh_token，前者只能保存2小时，后者可以保存14天，当token过期，
用户发送ajax请求，后台返回401错误，拦截器截获401，使用refresh_token访问刷新token的接口，
返回新的token(保质期仍旧是2h)，请求成功，则用新token继续之前失败的请求，请求失败，说明用户未登录，
则带着当前路由完整地址跳转登录，重新登录后返回当前

注意：用refresh_token请求新token时，要用axios，不要用实例request，请求拦截器中会覆盖请求头

//5.使用await-to-js代替try catch处理await代码异常，避免出现try嵌套

//npm i await-to-js
//const [err,res] = await to(接口返回的Promise对象) //注意数组中err与res的顺序不可变

//6. 使用vant组件库组件实现移动端上拉加载与下拉刷新效果
<template>
<div>
//下拉刷新：
<van-pull-refresh
v-model="refreshing"
@refresh="onRefresh"
success-text="刷新成功"
>
//上拉加载：
<van-list
v-model="loading"
:finished="finished"
@load="onLoad"
finished-text="没有更多了"
>
//列表渲染
<div v-for="item in list" :key="item.id"></div>
</van-list>
</div>
</template>
export default {
data(){
    return {
        list:[]
        loading:false,
        finished:true,
        refreshing:false
    }
},
methods:{
    onLoad(){
        const [err,res] = await to(ajax返回的Promise)
        this.loading = false
        this.list.push(res.data.results)
        if(判断list的长度>=后台数据的总数){
            //后台数据获取完毕
            this.finished = true
        }
    }
},
    onRefresh(){
        const [err,res] = await to(ajax返回的Promise)
        this.list=res.data.results
        //注意，下拉刷新会重置列表，需要将finished重置为true
        this.finished = false
    }
}

7. vant实现移动端骨架效果
//loading为false，隐藏骨架展示子组件，loading为true，展示骨架隐藏子组件
<van-skeleton title avatar :row="3" :loading="loading">
<div>子组件</div>
</van-skeleton>

8.使用dayjs将时间字符串以指定格式返回
  const date = dayjs(this.birthday).format('YYYY-MM-DDTHH:mm:ss')
  
9.keep-alive针对具体组件缓存
<keep-alive :include="['componenName']"><router-view /></keep-alive>

10. 保存缓存组件的阅读位置

缓存组件会自动生成两个钩子，activated与deactivated，缓存组件定义data变量scrollTop保存位置，
template的根元素设置ref与scroll事件，当根元素滚动触发事件，将根元素的scrollTop赋值给变量
scrollTop，当组件重新激活执行activated，将scrollTop赋值给根元素的scrollTop

11.文本高亮

//npm i highlight.js@10.7.2
//自定义插件
//创建js文件，导入highlight.js与'highlight.js/styles/vs2015.css'使用install函数扩展vue功能：定义全局指令/组件
export default {
    install(Vue){
        Vue.directive('highlight',el=>{
            const codeList = el.queryselectorAll('pre code')
            codeList.forEach(code=>{
                hljs.highlightElement(code)
            })
        })
    }
}
//main.js中导入插件，注册
import useComponents from '@/plugins/useComponents'
Vue.use(useComponents)
//组件中直接使用v-highlight指令

12.tab栏管理支持线上与本地

13.实现评论与回复功能

14.使用socket.io-client完成双向通讯