longer008 / baohe

使用以下框架/库搭建的一个小demo

baohe

😀表情包地址

• 知乎热榜
• 微博热搜
• 笑话
• 土味情话
• 加油吧，打工人
• 毒鸡汤
• 疫情
• 基金
• 移动端适配
• jenkins 持续集成

添加完husky 需要

husky 版本 5.*,git 版本 2.9+ , 解决方案：https://typicode.github.io/husky/#/?id=yarn-on-windows

yarn husky install

npx husky init

package.json 中删除

"husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

用koa进行接口转发

后端地址：https://github.com/longer008/baohe-service

nginx 接口代理

location /api/ {                                      rewrite ^/api/(.*) /$1 break;              proxy_pass http://127.0.0.1:7002; }

按需加载插件

vite-plugin-imp虽然比vite-plugin-style-import最终打包体积小一点， 但element-plus官方支持vite-plugin-style-import，所以现在用vite-plugin-style-import.

转后台管理

全屏

yarn add screenfull

页面缓存

 <router-view v-slot="{Component}">
      <!-- 缓存页面 -->
    <keep-alive v-if="$route.meta.keepAlive">
      <component :is="Component" />
    </keep-alive>
    <component :is="Component" v-else />
  </router-view>

这种方式缓存不生效的话用下面这种

    <router-view v-slot="{Component}">
      <!-- 缓存页面 -->
      <keep-alive :include="$store.state.keepLiveRoute">
        <component :is="Component" />
      </keep-alive>
    </router-view>

store文件

export default createStore({
  state:{
  keepLiveRoute:[
    'Zhihu',
    'Hello',
    'About',
  ]
  }
})

技巧

页面中如果需要用到 useStore,useRoute,useRouter,不必在每个页面引入 模板中直接$store/$route/$router即可， js中先获取实例

import { getCurrentInstance } from 'vue'

然后赋值

const app:any=getCurrentInstance()?.proxy

最后使用,例route

app.$route

部署

提交代码

yarn cz

自动代码检测->.husky/pre-commit

发布版本、生成changelog

yarn release

other

• vscode 打开多个vscode窗口 ：ctrl + shift + n
• 知乎页面加载大量网络图片，所以比较慢
• 因为最终调用的还是别人的接口，出于人道主义精神，微博页面就不每分钟刷新了，利用localStorage进行缓存;知乎页面使用keep-alive缓存