牛咔视频平台图片预览插件

特性

1. 使用 v-model 绑定图片列表
2. 绑定 v-model 即可渲染组件
3. 内置面板模式和卡片模式，传入 type 可以切换模式
4. 内置组件可单独使用，自行引入 ImageCard，ImagePanel 组件
5. 基于 vue2 版本封装，强依赖于 element-ui

引入

牛咔视频平台步骤条组件

特性

1. 使用 active 绑定当前步骤
2. 传入 steps 即可渲染组件
3. 支持配置 icon 图标
4. 基于 vue2 版本封装

引入

基础用法

设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。

配置 icon

可以在 steps 中配置 icon 字段来切换步骤中的图标

牛咔视频平台带面板的开发组件

特性

1. 使用 v-model 绑定选中标签的值
2. 传入 info 即可渲染组件
3. 可以通过 v-for 批量渲染，支持 sort 序号显示
4. 支持 slot 显示备注信息
5. 基于 vue2 版本封装，强依赖于 element-ui

引入

基础用法

绑定 v-model 记录开关的值，传入记录开关信息的 info

项目地址

qiankun-template

搭建基座项目

在命令行中运行以下命令

pnpm create vue@latest

最近使用 vuepress-theme-hope 搭建博客时，发现之前使用的 demo 展示出现了问题，控制台报错并且不展示组件了，赶紧去官网看了下，也是同样的问题，这里决定自己封装下

安装 markdown 增强插件

先安装用于增强 markdown 的插件

pnpm install markdown-it-container markdown-it

这里参考 vuepress2 的官方文档，和 vuepress2 生态系统

创建插件

在项目根目录创建 plugins 文件夹用于存放本地插件

使用 vuepress-theme-hope 主题开发时，使用 vuepress-plugin-search-pro 作为搜索插件。

问题描述

问题已提交到GitHub

Checklist

• I am using LTS version of Node.js.
• I am using the latest v2 version of VuePress and VuePress official plugins.
• I am using the latest v2 version of vuepress-theme-hope and all plugins in this repo.
• I followed the docs and I double checked my configuration.
• I have searched FAQ and I did not find the answer.

问题描述

项目运行后，浏览器控制台报错：Uncaught (in promise) Error: useXXX() is called without provider.

解决方法

此类错误通常是因为项目中错误的含有多个 vue 或 vuepress 版本引起的。

使用 vp-update 命令来升级依赖

pnpm dlx vp-update

• 控制台报错 Uncaught (in promise) Error: useXXX() is called without provider.
• vuepress-theme-hope 主题中使用 searchPro 进行全文检索时输入中文报错

通过代理服务器解决跨域，详见

安装 vite 打包工具

这里使用 vite 作为打包工具进行代理

npm i -D @vuepress/bundler-vite@next