webterminal's Introduction

webTerminal

Vue3 + Ts + vite +antD-V + pinia
实现你想实现的指令
回车即可执行

灵感来源

学习心得

0.env.d.ts

    /// <reference types="vite/client" />

    // 为Vue文件生命类型模块，记住就行，这样在import vue组件时vscode不报错
    declare module '*.vue' {
        import type { DefineComponent } from 'vue'
        // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
        const component: DefineComponent<{}, {}, any>
        export default component
    }

1.Ts命名空间实现类型说明模块化

2.antD-V的基本使用

3.防抖与节流实现

4.getopt库的基本使用

option配置
参数配置
获取解析后的参数

5.页面组件与指令分离的设计模式

defineAsyncComponent的使用
指令的设计
父子指令的调用关系

6.store持久化

7.StyleValue类型的使用

8.自定义hooks

useHint
useHistory
useDebounce

9.Porps参数的接受与默认值

10.website命令的设计模式

Vue组件完成负责数据操作
Command命令完成数据展示

11.初次体验讲前端项目Chorme插件化

取消路由使用
打包项目
dist文件下新增manifest.json文件
配置manifest.json

12.上传本地图片作为背景图片

    let imageObj = (img.files[0])
    let fr = new FileReader() //异步读取文件对象

    fr.readAsDataURL(imageObj)  //读取为data:url数据流
    fr.onloadend = function(){
        // 把base64数据存放到localStorage中
        localStorage.setItem("imgBase",fr.result)
    }

Recommend Projects