Vue进阶之Vue无代码可视化项目(三)

Vue无代码可视化项目

  • 项目初始化
    • store的使用
      • DataSourceView.vue
      • stores/counter.ts
    • 开发模式按钮
      • store/editor.ts
      • LayoutView.vue
    • 导航条
      • 安装图标icon
        • package.json
      • store/debug.ts
      • src/components/AppNavigator.vue
        • AppNavigator.ts:
        • AppNavigator.vue:
      • theme样式
        • theme/reset.css
        • theme/variable.css
        • theme/base.css
        • theme/main.css
      • main.ts
      • App.vue
      • router/index.ts

项目初始化

store的使用

DataSourceView.vue

<template><div class="about"><h1>DataSource {{ store.count }}-{{ store.double }}<button @click="store.increment">+</button><button @click="store.decrement">-</button></h1></div>
</template><script lang="ts" setup>
import {useCounterStore} from '@/stores/counter'// 丢掉响应式
// const {count,increment,double,decrement} = useCounterStore()
const store=useCounterStore()
</script><style>
@media (width >= 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}
}
</style>

stores/counter.ts

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {const count=ref(0)const double=computed(()=>count.value*2)const increment=()=>{count.value++}const decrement=()=>{count.value--}return{count,double,increment,decrement}
})

请添加图片描述

开发模式按钮

创建editor.ts文件

  • store
    • editor.ts

store/editor.ts

import { ref } from 'vue'
import { defineStore } from 'pinia'export const useEditorStore = defineStore('editor', () => {//  开发模式const debug=ref(false)const toggleDebug=()=>{debug.value=!debug.value}return{debug,toggleDebug}
})

LayoutView.vue

<template><div class="about" :class="{debug:editorStore.debug}" @click="editorStore.toggleDebug()"><h1>Layout</h1></div>
</template><script lang="ts" setup>
import {useEditorStore} from '@/stores/editor'
const editorStore = useEditorStore()
</script>
<style>
@media (width >= 1024px) {.about {min-height: 100vh;display: flex;align-items: center;}.debug {border: 2px dashed #afafaf;}
}
</style>

请添加图片描述

导航条

安装图标icon

icon-park github
icon-park官网

package.json
"dependencies": {..."@icon-park/vue-next":"1.4.2"

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/339396.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CRM系统主要是干什么?CRM系统主要功能和作用

什么是CRM 系统&#xff1f;CRM系统到底是干什么的&#xff1f;不同的企业人员该如何利用CRM去解决他们的问题等等&#xff0c;问题太多了&#xff0c;今天来为大家详细介绍。 干货满满&#xff0c;建议收藏&#xff01;&#xff01; 首先第一个问题&#xff0c;什么是CRM系统…

智能监控技术助力山林生态养鸡:打造智慧安全的养殖新模式

随着现代科技的不断发展&#xff0c;智能化、自动化的养殖方式逐渐受到广大养殖户的青睐。特别是在山林生态养鸡领域&#xff0c;智能化监控方案的引入不仅提高了养殖效率&#xff0c;更有助于保障鸡只的健康与安全。视频监控系统EasyCVR视频汇聚/安防监控视频管理平台在山林生…

国产操作系统上Vim的详解01--vim基础篇 _ 统信 _ 麒麟 _ 中科方德

原文链接&#xff1a;国产操作系统上Vim的详解01–vim基础篇 | 统信 | 麒麟 | 中科方德 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在国产操作系统上使用Vim的详解文章。Vim是一款功能强大且高度可定制的文本编辑器&#xff0c;广泛应用于编程和日常文本编辑中。…

FreeRTOS基础(九):FreeRTOS的列表和列表项

今天我们将探讨FreeRTOS中的一个核心概念——列表&#xff08;List&#xff09;和列表项&#xff08;List Item&#xff09;。在实时操作系统&#xff08;RTOS&#xff09;中&#xff0c;任务的管理和调度是至关重要的&#xff0c;而FreeRTOS使用列表来实现这一功能。列表可以说…

oracle数据回显时候递归实战

太简单的两篇递归循环 orcale 在项目里递归循环实战 先看资产表T_ATOM_ASSET结构 看业务类别表T_ATOM_BUSI_CATEGORY结构 问题出现 页面显示 实际对应的归属业务分类 涉及到oracle递归实战(这里不会如何直接在atomAsset的seelct里面处理递归回显) 直接在实现层看atomAs…

NVIDIA - QPU

转载自 What Is a QPU? ( 2022 年 7 月 29 日 里克梅里特 https://blogs.nvidia.com/blog/what-is-a-qpu/ 文章目录 一、概述二、那么&#xff0c;什么是 QPU&#xff1f;三、量子处理器如何工作&#xff1f;四、制作量子比特的多种方法五、光的量子比特六、简单的芯片&#x…

李廉洋:6.2黄金原油持续走低,下周一行情走势分析及策略。

黄金消息面分析&#xff1a;尽管通胀数据显示出稳定迹象&#xff0c;但美联储对此仍持谨慎态度。美国商务部经济分析局发布的数据显示&#xff0c;4月PCE物价指数月率维持在0.3%&#xff0c;而消费者支出的增长放缓至0.2%&#xff0c;低于3月份的0.7%。这表明&#xff0c;尽管通…

CSAPP Lab07——Malloc Lab完成思路

等不到天黑 烟火不会太完美 回忆烧成灰 还是等不到结尾 ——她说 完整代码见&#xff1a;CSAPP/malloclab-handout at main SnowLegend-star/CSAPP (github.com) Malloc Lab 按照惯例&#xff0c;我先是上来就把mm.c编译了一番&#xff0c;结果产生如下报错。搜索过后看样子应…

SpringBoot:手动创建应用

Spring提供了在线的Spring Initialzr在线创建Spring Boot项目&#xff0c;为了更好的理解Spring Boot项目&#xff0c;这里我们选择手动创建。 1.新建Web应用 1.1 生成工程 首先要做是创建一个Java项目&#xff0c;这里我们选择使用Maven来支持&#xff0c;使用archetype:ge…

React + SpringBoot开发用户中心管理系统

用户中心项目搭建笔记 技术栈 前端技术栈 “react”: “^18.2.0”,ant-design-pro 后端技术栈 SpringBoot 2.6.x 项目源码地址 https://gitee.com/szxio/user-center 前端项目搭建 快速搭建一个后端管理系统项目框架 初始化 antDesignPro 官网&#xff1a; https://…

众汇:外汇狙击指标如何使用?

对于投资者来说&#xff0c;我们各位交易的目的是什么?WeTrade众汇认为那就是盈利。所以来说有一个指标对各位投资者来说那是相当有帮助的。这是因为对于交易者而言&#xff0c;利用这些指标可以快速识别盈利的买卖时机。当我们选择一个指标之后&#xff0c;深入了解其适用范围…

luckysheet的使用

前言 公司新需求要一个在线的excel编辑器 一、luckysheet是什么&#xff1f; LuckySheet是一款基于Web的在线表格组件&#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源结合Vue3可以实现数据的动态展示和编辑&#xff0c;为用户提供良好的…

2024年四川省三支一扶报名流程图解✅

2024年四川省三支一扶报名流程图解✅ &#x1f534;时间安排 1、报名时间&#xff1a;5月31日—6月4日17:00 2、资格初审时间&#xff1a;5月31日—6月5日17:00 3、准考证打印时间&#xff1a;6月25日—6月29日 4、笔试时间&#xff1a;6月30日 5、笔试成绩&#xff1a;7…

C++:特殊类设计和四种类型转换

一、特殊类设计 1.1 不能被拷贝的类 拷贝只会放生在两个场景中&#xff1a;拷贝构造函数以及赋值运算符重载&#xff0c;因此想要让一个类禁止拷贝&#xff0c;只需让该类不能调用拷贝构造函数以及赋值运算符重载即可。 C98&#xff1a; 1、将拷贝构造函数与赋值运算符重载只…

【Unity Shader入门精要 第12章】屏幕后处理效果(三)

1. Bloom效果 Bloom描述的是图像中较亮的部分向周围一定范围内发生扩散&#xff0c;造成一种朦胧的效果&#xff0c;常用于表现游戏中的灯光或隧道出口之类的效果。 下面的例子将实现一个简单的Bloom效果&#xff0c;其原理是&#xff1a; 将原始图像中较亮&#xff08;灰度…

2023-2025年最值得选择的Java毕业设计选题大全:1000个热门选题推荐✅✅✅

&#x1f497;博主介绍&#xff1a;✌全网粉丝1W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;还…

密码加密及验证

目录 为什么需要加密&#xff1f; 密码算法分类 对称密码算法 非对称密码算法 摘要算法 DigestUtils MD5在线解密工具原理 实现用户密码加密 代码实现 为什么需要加密&#xff1f; 在MySQL数据库中&#xff0c;我们常常需要对用户密码、身份证号、手机号码等敏感信息进…

centos8stream 编译安装 php-rabbit-mq模块

官方GitHub&#xff1a;https://github.com/php-amqp/php-amqp 环境依赖安装 dnf install cmake make -y 1.安装rabbitmq-c cd /usr/local/src/ wget https://github.com/alanxz/rabbitmq-c/archive/refs/tags/v0.14.0.tar.gz tar xvf v0.14.0.tar.gz cd rabbitmq-c-0.14.0/…

NoSQL是什么?NoSQL数据库存在SQL注入攻击?

一、NoSQL是什么&#xff1f; NoSQL&#xff08;Not Only SQL&#xff09;是一种非关系型数据库的概念。与传统的关系型数据库不同&#xff0c;NoSQL数据库使用不同的数据模型来存储和检索数据。NOSQL数据库通常更适合处理大规模的非结构化和半结构化数据&#xff0c;且能够…

Docker-----emqx部署

emqx通过Docker容器化部署流程 1.创建持久化挂载目录 mkdir -p /home/emqx/etc ------挂载emqx的配置文件目录 mkdir -p /home/emqx/data ------挂载emqx的存储目录 mkdir -p /home/emqx/log ------挂载emqx的日志目录 [root home]# mkdir -p /home/emqx/etc [root home]# mkd…