vue3小兔鲜

B站视频
操作笔记 09_vue/视频2：vue3 小兔鲜
2023-08-28 17:35:36（开始）
2023-08-31 11:19:04（结束） 3天，得益于有素材和资料，以及之前的操作经验，并部署
.
vue2+vue3 相关文档链接：
.
Vue.js 官方文档
pinia官方文档
axios 中文文档
pinia 持久化 ===> 官方文档
json-server 官方地址
vant2 官方文档
element-plus 官方文档
.
.
.
本文相关链接：
接口文档
阿里巴巴矢量图标库
vueuse 吸顶

关键提交记录

• 吸顶

  // vueuse
      pnpm add @vueuse/core
      吸顶   https://vueuse.org/core/useScroll/#usescroll
      import { useScroll } from '@vueuse/core'
      const { y } = useScroll(window)
      <div class="app-header-sticky" :class="{show:y>78}">

• 图片懒加载
• 路由参数变化
• 方法抽取
• 加载更多
• 路由滚动条位置
• 放大镜
• 全局组件注册
• tab切换实现
• 分页逻辑
• 默认三级路由设置

项目开发搭建

# 创建
pnpm create vue
pnpm install
pnpm dev

# 打包
pnpm build
    vite.config.js
    export default defineConfig({
        base: '/xtx',// 小兔鲜

# 部署
    1. FinalShell 进入此目录 /app/docker/nginx/html
    2. 右键新建文件夹 xtx
    3. 进入 xtx 文件夹，把打包后的 dist 文件夹拖进来
    4. FinalShell 进入此目录 /app/docker/nginx/conf/conf.d
    5. 选中 ssl.conf，右键【打开】，添加下面内容，Ctrl + S 保存
            location /xtx {
                    alias /usr/share/nginx/html/xtx/dist/;
                    index index.html index.html;
                    try_files $uri $uri/ /xtx/index.html;
            }# 005-小兔鲜
    6. docker restart nginx01
    7. blog/themes/next/_config.yml
            links:
              005-小兔鲜: http://taopanfeng.com/xtx