自己设计的Vue3的实用项目(内含对项目亮点的实现思路与介绍)(上)

简介: 接下来就详细地介绍一下我的项目。

设计初衷


我现在也是个非计算机专业的大四在校生,平时前端都是自学的,所以从初学到现在基本上都是通过白嫖网上的视频、买书或从图书馆借书看、逛技术博客长长见识等等。这期间我会看到很多实用的工具网站或一些有趣的网站,我都会把他们收藏下来,生怕之后找不到了,但是随着时间的推移,收藏的网站越来越多,我的浏览器收藏夹可能变成了这样


cd8388f1eb2217d28486ec8cb486f403.png


这些都是我很久之前收藏夹收藏的,要是按照这个势头,我的收藏夹不出半年就爆满了,到时候找网站都不方便,所以我就想做一个我自己的网站导航栏,要求不高 : 简单大方方便快捷


于是就有了现在这个项目,如下图所示:


d3844a662e1aa37076865f598780cf02.png


项目功能 && 特色


毕竟是个网址导航栏,所以功能非常的简单,但之后我会尽可能地去完善该项目的一些额外的功能


项目的功能:


✅ 标签的添加、修改、删除


✅ 网址的添加、修改、删除


✅ 搜索功能


✅ 配置的导入、导出


项目的特色:


⭐ 基于 Vue3 开发


⭐ 页面简单大方


⭐ 提供网站图标名称的获取接口


⭐ 标签栏支持多种 icon 选择


⭐ 通过 localStorage 存储,无需配置数据库


⭐ 用 Vue3 封装了 Element UImessagedialogbuttoninputpopover 组件


⭐ 通过 Vuex 4 进行状态管理


⭐ 页面的滚动动画


⭐ 支持一键保存导出数据一键导入数据


项目文件结构


整个项目主要的文件都在 src 文件夹下,结构目录如下:


├── src 
     ├── assets      // 存放静态资源
     ├── components  // 各种组件
     │   ├── main    // 页面主要内容相关组件
     │   ├── tabs    // 标签栏相关组件
     │   └── public  // 全局公共组件
     ├── network     // 网络请求
     ├── store       // Vuex
     ├── utils       // 存放自己封装的工具
     ├── APP.vue
     └── main.jsss


重点介绍


对于项目的逻辑代码,你们可以直接查看我的源码,全部都是用的 Vue3 语法写的


在最初做这个项目时,还没找到合适的 Vue3 组件库,所以我就根据自己的需求,封装了 messagedialoginputbuttonpopover 这样五个组件,其中重点讲一下 messagedialog 吧,另外还有这个项目的亮点:配置导入与导出


Dilog组件


首先是组件内容:


// lp-dialog.vue
<template>
  <div class="lp-confirm-container" ref="lpConfirmAlert">
      <div class="lp-confirm-box">
          <div class="lp-confirm-title">
              <span class="lp-confirm-title-txt">{{ title }}</span>
              <span class="lp-confirm-title-close" @click="closeConfirm">&#10006;</span>
          </div>
          <div class="lp-confirm-content">
              <span class="lp-confirm-content-txt">{{ content }}</span>
          </div>
          <div class="lp-confirm-btn-groups">
              <lp-button type="primary" class="lp-confirm-btn" @_click="sureConfirm">确定</lp-button>
              <lp-button type="default" class="lp-confirm-btn lp-confirm-btn-cancel" @_click="closeConfirm">取消</lp-button>
          </div>
      </div>
  </div>
</template>
<script>
import lpButton from '../lp-button/lp-button'
import {ref} from 'vue'
export default {
    components: {
        lpButton
    },
    props: {
        title: {
            type: String,
            default: '提示'
        },
        content: {
            type: String,
            default: '确定关闭吗?'
        }
    },
    setup() {
        const status = ref(-1)       // 存储用户点的状态,-1:未点击;0:取消;1:确定
        const lpConfirmAlert = ref(null)
        function removeElement() {     
            lpConfirmAlert.value.parentNode.removeChild(lpConfirmAlert.value)
        }
        function closeConfirm() {
            status.value = 0
            removeElement()
        }
        function sureConfirm() {
            status.value = 1
            removeElement()
        }
        return {removeElement, closeConfirm, sureConfirm, status, lpConfirmAlert}
    }
}
</script>
<style scoped>
 /* 样式见源码,此处省略 */
</style>


这里我在 dialog 组件内设定了一个组件的状态变量 status,用于确认用户的点击情况


再来看看组件的处理代码:


// lp-dialog.js
import lp_dialog from './lp-dialog.vue'
import {defineComponent, createVNode, render, toRef, watch} from 'vue'
const confirmConstructor = defineComponent(lp_dialog)
export const createDialog = (options) => {
    if(!Object.prototype.toString.call(options) === '[Object Object]') {
        console.error('Please enter an object as a parameter');
    }
    options = options ? options : {}
    // 生成组件实例
    const instance = createVNode(
        confirmConstructor,
        options
    )
    // 渲染挂载组件
    const container = document.createElement('div')
    render(instance, container)
    document.querySelector('#app').appendChild(instance.el)
    // 初始化组件参数
    const props = instance.component.props
    Object.keys(options).forEach(key => {
        props[key] = options[key]
    })
    // 获取组件的 status 状态变量
    const status = toRef(instance.component.setupState, 'status')
    // 返回 promise,方便外部调用
    return new Promise((resolve, reject) => {
     // 监听组件的按钮点击情况
        watch(status, (now) => {
            if(now == 0) reject();
            else if(now == 1) resolve()
        })
    })   
}


接下来把 dialog 作为一个方法注册到全局中,这个我就把它放在了 App.vue 文件中,通过 Vue3provide 方法暴露在全局


<template>
    <div id="app"></div>
</template>
<script>
import { provide } from 'vue'
import createDialog from './components/public/lp-dialog/lp-dialog.js'
export default {
    setup() {
     // 全局暴露创建 dialog 组件的方法
     provide('confirm', createDialog)
    }
}
</script>


然后在别的组件中使用 dialog 组件


<template>
    <div class="tabs" @click="btnConfirm"></div>
</template>
<script>
import { inject } from 'vue'
export default {
    setup() {
     // 接收创建 dialog 组件的方法
     let $confirm = inject('confirm')
        btnConfirm() {
            // 调用方法
            $confirm({
                title: '提示',     // 确认框的标题
                content: '确认关闭吗?',  // 消息内容
            })
            .then(() => {
                console.log('确认')
            })
            .catch(() => {
                console.log('取消')
            })
        }
        return { btnConfirm }
    }
}
</script>


这样就实现了一个基于 promise 的链式调用,可以设定用户点击了 确认取消 之后的处理代码


还有下文~

相关文章
|
8天前
|
存储 JavaScript 前端开发
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
【10月更文挑战第21天】 vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
vue3的脚手架模板你真的了解吗?里面有很多值得我们学习的地方!
|
5天前
|
JavaScript 前端开发 开发者
Vue 3中的Proxy
【10月更文挑战第23天】Vue 3中的`Proxy`为响应式系统带来了更强大、更灵活的功能,解决了Vue 2中响应式系统的一些局限性,同时在性能方面也有一定的提升,为开发者提供了更好的开发体验和性能保障。
16 7
|
6天前
|
前端开发 数据库
芋道框架审批流如何实现(Cloud+Vue3)
芋道框架审批流如何实现(Cloud+Vue3)
20 3
|
5天前
|
JavaScript 数据管理 Java
在 Vue 3 中使用 Proxy 实现数据双向绑定的性能如何?
【10月更文挑战第23天】Vue 3中使用Proxy实现数据双向绑定在多个方面都带来了性能的提升,从更高效的响应式追踪、更好的初始化性能、对数组操作的优化到更优的内存管理等,使得Vue 3在处理复杂的应用场景和大量数据时能够更加高效和稳定地运行。
22 1
|
5天前
|
JavaScript 开发者
在 Vue 3 中使用 Proxy 实现数据的双向绑定
【10月更文挑战第23天】Vue 3利用 `Proxy` 实现了数据的双向绑定,无论是使用内置的指令如 `v-model`,还是通过自定义事件或自定义指令,都能够方便地实现数据与视图之间的双向交互,满足不同场景下的开发需求。
21 1
|
7天前
|
前端开发 JavaScript
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
简记 Vue3(一)—— setup、ref、reactive、toRefs、toRef
|
8天前
Vue3 项目的 setup 函数
【10月更文挑战第23天】setup` 函数是 Vue3 中非常重要的一个概念,掌握它的使用方法对于开发高效、灵活的 Vue3 组件至关重要。通过不断的实践和探索,你将能够更好地利用 `setup` 函数来构建优秀的 Vue3 项目。
|
8天前
|
JavaScript 测试技术 UED
解决 Vue 项目中 Tree shaking 无法去除某些模块
【10月更文挑战第23天】解决 Vue 项目中 Tree shaking 无法去除某些模块的问题需要综合考虑多种因素,通过仔细分析、排查和优化,逐步提高 Tree shaking 的效果,为项目带来更好的性能和用户体验。同时,持续关注和学习相关技术的发展,不断探索新的解决方案,以适应不断变化的项目需求。
|
9天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
1天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发