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

特性

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

vue3 新增了 setup 语法糖，相应的 props，也会有相应的变化

defineProps

在使用 <script setup> 语法糖的组件中，props 可以使用 defineProps() 宏来声明

在 Vue3 中，定义一个全局变量，便于在各个文件中直接使用，而无需每次都引入

设置全局变量

通过在 main.ts 入口文件中注册 Vue 的时候绑定全局变量，这里以 http 模块为例

import { createApp } from 'vue';
import App from './App.vue';
import http from './http';

const app = createApp(App);
app.config.globalProperties.$http = http;

app.mount('#app');

项目地址

single-spa-template

搭建基座项目

在命令行中运行以下命令

pnpm create vue@latest

• Vue3 支持 Vue2 的大多数特性
• 更好支持了 TypeScript
• 打包是排除多余代码，性能提升

新增特性

• Composition API
• setup
  • ref 和 reactive
  • computed 和 watch
  • 新的生命周期
  • provide 与 inject
• 新组件
• 其他 API 更新
  • 全局 API 修改
  • 将原本的全局 API 转移到应用对象
  • 模板语法变化