当前位置: 首页 > news >正文

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

Vue无代码可视化项目

  • 项目搭建
    • 初始步骤
    • 拓展:工程项目从0-1
    • 项目规范化
      • package.json
      • cpell.json
      • custom-words.txt
      • ts-eslint规则
        • .eslintrc.cjs
      • git钩子
      • 检查有没有问题
        • type-check
        • spellcheck
        • lint:style
      • husky操作
        • 安装
        • pre-commit
      • pnpm的commit规范
        • package.json:
        • commitlint.config.cjs
        • 安装
      • stylelint额外的
        • stylelint.config.cjs
        • 执行
      • 启动项目

项目搭建

初始步骤

npm create vue@latest

在这里插入图片描述
在这里插入图片描述

pnpm i

项目基础架子
在这里插入图片描述
查看npm下载源:

npm config get registry

设置npm官方下载源

npm config set registry https://registry.npmjs.org

请添加图片描述

拓展:工程项目从0-1

全程参与了 - 把控/管控App的生命周期
细分周期

  1. 需求评审
  2. 方案评审
  3. 实际开发
  4. 模块化设计-项目架子搭建
    webpack
    vite
    turbopack
    rspack
    打包构建
  5. 模块选择
    nest.js
    luck.js
    ssr的结构
    客户端渲染结构
    多页的结构
  6. 构建的脚本
    webpack watch
    webpack build命令
    webpack大量用到loader-plugin
    vite也要大量用到vite-plugin
  7. 考虑团队规范,eslint、spell-lint、spell-check等等
  8. git规范决定协同开发的范式、也决定了上线的节奏(两周做了一个发布,第一周开发周、第二周测试修bug)
    功能提测,代码review,通过分支管控实现
    比如,master是线上主分支,其他的开发基于features开发,合并到测试环境,tr到测试环境,测试的时候要做到归档处理,打tag
  9. 后续部署到CI/CD。资源是否需要传到os,是否用cdn加速。
    构建过程中,是用什么形式构建的,docker镜像部署,还是用静态资源部署的方式,这种一般结合nginx做反向代理的。
    现在基本上整个项目上线成功了
  10. 后续做版本控制,版本迭代所有的功能。

项目规范化

除了已有的基础架子之外,还要在这基础上再加一些规范化的产物

package.json

scripts:{..."lint:style":"stylelint \"src/**/*.{vue,css}\" --fix","spellcheck":"cspell \"src/**/*.{vue,ts,tsx}\""
}
"devDependencies": {"stylelint":"16.2.1","cspell":"8.6.0"
}

创建cpell.json文件:
创建custom-words.txt

  • cspell.json
  • .cspell
    • custom-words.txt

cpell.json

{"import": ["@cspell/dict-lorem-ipsum/cspell-ext.json"],"caseSensitive": false,"dictionaries": ["custom-words"],"dictionaryDefinitions": [{"name": "custom-words","path": "./.cspell/custom-words.txt","addWords": true}],"ignorePaths": ["**/node_modules/**", "**/dist/**", "**/lib/**", "**/docs/**", "**/stats.html","**/detect.ts"]}

custom-words.txt

byelide
pinia
rushstack
stylelint

在这里插入图片描述

固定版本:版本前面"^"符号去掉:
请添加图片描述
版本统一:
package.json:

{"name": "byelide","version": "0.0.0","private": true,"type": "module","scripts": {"dev": "vite","build": "run-p type-check \"build-only {@}\" --","preview": "vite preview","test:unit": "vitest"

相关文章:

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

Vue无代码可视化项目 项目搭建初始步骤拓展:工程项目从0-1项目规范化package.jsoncpell.jsoncustom-words.txtts-eslint规则.eslintrc.cjsgit钩子检查有没有问题type-checkspellchecklint:stylehusky操作安装pre-commitpnpm的commit规范package.json:commitlint.config.cjs安装…...

初识C++ · 模拟实现list

目录 前言 1 push_back pop_back 2 迭代器类 2.1 ! 2.2 -- 2.3 * 3 Print_List 4 有关自定义类型 5 有关const迭代器 6 拷贝构造 赋值 析构 Insert erase 前言 有了string,vector的基础,我们模拟实现list还是比较容易的,这里同…...

电商运营-2024年6月1日

作为一名电商运营,针对淘工厂平台,需要具备以下核心技能和素质: 核心技能 新店入驻与产品管理 熟练掌握淘工厂平台的新店入驻流程,包括资质准备、资料提交、审核跟进等。精通产品上架技巧,确保产品信息准确、图片清晰…...

Go跨平台编译

1.编译windows平台运行程序 # windows env GOOSwindows GOARCHamd64 go build main.go2.编译linux平台运行程序 # linux env GOOSlinux GOARCHamd64 go build main.go 3.编译macos平台运行程序 # macos env GOOSdarwin GOARCHamd64 go build main.go 编译结果:...

生产计划排产,制定每小时计划产量(“查表法”SQL计算)

根据日生产计划产量排产,制定每2小时理论计划生产产量。 每2小时计划产量 每2小时工作时间(秒)/生产计划节拍(秒)。 假设,生产计划节拍 : 25.0(秒)/台 工厂以每天8点00分钟作为当日工作日的…...

视频汇聚管理安防监控平台EasyCVR程序报错“create jwtSecret del server class:0xf98b6040”的原因排查与解决

国标GB28181协议EasyCVR安防视频监控平台可以提供实时远程视频监控、视频录像、录像回放与存储、告警、语音对讲、云台控制、平台级联、磁盘阵列存储、视频集中存储、云存储等丰富的视频能力,平台支持7*24小时实时高清视频监控,能同时播放多路监控视频流…...

头歌页面置换算法第2关:计算OPT算法缺页率

2 任务:OPT算法 2.1 任务描述 设计OPT页面置换算法模拟程序:从键盘输入访问串。计算OPT算法在不同内存页框数时的缺页数和缺页率。要求程序模拟驻留集变化过程,即能模拟页框装入与释放过程。 2.2任务要求 输入串长度作为总页框数目,补充程序完成OPT算法。 2.3算法思路 OPT算…...

vscode怎么拷贝插件到另一台电脑

说明 vscode插件默认存放在 C:\Users\用户名\.vscode 目录下的 extensions 文件夹中 方法 拷贝 C:\Users\用户名\.vscode 目录下的 extensions 文件夹到另一台电脑的C:\Users\用户名\.vscode 目录下 C:\Users\用户名\.vscode...

网络协议分析

网络协议分析 网络协议分析概述用IP实现异构网络互联网络协议的分层TCP/IP的分层模型协议分析协议分析应用协议分析任务 常见网络协议PPP协议报文选项IPCP认证协议PAP安全缺陷认证协议CHAPPPPoE协议流程 地址解析协议ARPARP的思想和步骤ARP报文格式及封装 移动IP移动IP的工作机…...

GAMIT目录配置

1打开home,显示隐藏文件,CTRH 2修改目录 #set gamitpath gamitpath/opt/gamit10.7 export PATH$PATH:${gamitpath}/com/:${gamitpath}/gamit/bin:${gamitpath}/kf/bin HELP_DIR${gamitpath}/help export HELP_DIR #set GMT path gmtpath/usr/lib/gmt P…...

基于JSP的九宫格日志网站

你好呀,我是学长猫哥!如果有需求可以文末加我。 开发语言:Java 数据库:MySQL 技术:JSP技术 工具:浏览器/服务器(B/S)结构 系统展示 首页 管理员功能模块 用户功能模块 摘要 本…...

C#中结构struct能否继承于一个类class,类class能否继承于一个struct

C#中结构struct能否继承于一个类class,类class能否继承于一个struct 答案是:都不能。 第一种情行,尝试结构继承类 报错:接口列表中的类型"XX"不是接口interface。 一般来说,都是结构只能实现接口&#x…...

【Vulhub】Fastjson 1.2.24_rce复现

文章目录 一,Fastjson是什么?二,fastjson漏洞原理三,判断是否有fastjson反序列化四,复现Fastjson 1.2.24_rce(vulhub)环境配置1.判断是否存在Fastjson反序列化2.反弹shell3.启动RMI服务器4.构造恶意POST请求 一&#x…...

【iconv】UTF-8字符串转换为UTF-16字符串

使用<iconv.h>来进行字符串编码的转换 #include <iconv.h> #include <iostream> #include <string.h> #include <unistd.h> #include <memory> #include <fcntl.h>// 需要链接iconv库// iconv -l 命令可列出所有支持的格式 // exam…...

AI技术的未来展望:重塑人类社会的智能革命

一、引言 随着技术的飞速发展&#xff0c;人工智能&#xff08;AI&#xff09;已经不再是科幻小说中的概念&#xff0c;而是成为了我们生活中不可或缺的一部分。从简单的智能助手到复杂的自动化生产线&#xff0c;AI技术正在以前所未有的速度改变着世界。本文将对AI技术的未来…...

掘金AI 商战宝典-系统班:2024掘金AIGC课程(30节视频课)

课程目录 1-第一讲学会向Al提问&#xff1a;万能提问公式_1.mp4 2-第二讲用AI写视频脚本_1.mp4 3-第三讲用AI写视频口播文案_1.mp4 4-第四讲用AI自动做视频&#xff08;上&#xff09;_1.mp4 5-第五讲用AI自动做视频&#xff08;中&#xff09;_1.mp4 6-第六讲用AI自动做视…...

C# WinForm —— 26 ImageList 介绍

1. 简介 图片集合&#xff0c;用于存储图像的资源&#xff0c;并在关联控件中显示出来 可以通过 索引、键名 访问每张图片 没有事件 2. 属性 属性解释(Name)控件ID&#xff0c;在代码里引用的时候会用到,一般以 imgList 开头ClolorDepth用于呈现图像的颜色数&#xff0c;默…...

Vue:现代前端开发的首选框架-【声明周期钩子详解】

引言 Vue.js 是一个流行的前端框架&#xff0c;它通过组件化的开发方式&#xff0c;让开发者能够构建出高效且可维护的应用程序。在Vue中&#xff0c;生命周期钩子&#xff08;Lifecycle Hooks&#xff09;是理解组件行为的关键概念。本文将深入探讨Vue生命周期钩子&#xff0…...

【因果推断python】8_线性回归模型2

目录 回归理论 非随机数据的回归 回归理论 我不打算深入研究线性回归是如何构建和估计的。然而&#xff0c;一点点理论将有助于解释它在因果推断中的力量。首先&#xff0c;回归解决了理论上的最佳线性预测问题。令 是一个参数向量&#xff1a; 线性回归找到最小化均方误差 (…...

MySQL目录和文件

MySQL目录和文件 bin目录 存储一些mysql脚本比如mysqld、mysqld-self等等&#xff0c;用于执行mysql一些操作 数据目录 show variables like datadir;--查看数据目录位置每一个数据库都有一个和数据库名相同的文件夹&#xff1b;MySQL5.7开始每创建一个表&#xff0c;在Innod…...

YOLOv11涨点改进| 全网独家创新、检测头Head改进篇| CVPR 2026顶会 |使用FAAHead改进YOLOv11的检测头,处理小目标、遮挡小目标检测、旋转目标检测有效涨点,助力高效发论文

一、本文介绍 🔥本文给大家介绍使用CVPR 2026顶会 FAAHead 和 OBB_FAAHead 改进 YOLOv11的检测头,可以有效缓解目标检测中分类分支与框回归分支之间的特征冲突问题,尤其适合旋转目标检测或含明显方向信息的目标检测任务。FAAHead 的核心思想是在检测头阶段先对 RoI 或候选…...

开源键盘固件终极配置指南:轻松自定义你的机械键盘

开源键盘固件终极配置指南&#xff1a;轻松自定义你的机械键盘 【免费下载链接】vial-qmk QMK fork with Vial-specific features. 项目地址: https://gitcode.com/gh_mirrors/vi/vial-qmk 想要完全掌控你的机械键盘&#xff0c;打造独一无二的输入体验吗&#xff1f;Vi…...

vLLM-v0.17.1效果展示:vLLM在中文古诗生成任务中的韵律保持能力

vLLM-v0.17.1效果展示&#xff1a;vLLM在中文古诗生成任务中的韵律保持能力 1. vLLM框架简介 vLLM是一个专为大型语言模型(LLM)设计的高性能推理和服务库&#xff0c;以其出色的速度和易用性著称。这个项目最初由加州大学伯克利分校的天空计算实验室开发&#xff0c;现在已经…...

ChatGLM3-6B新手必看:断网可用的本地智能对话解决方案

ChatGLM3-6B新手必看&#xff1a;断网可用的本地智能对话解决方案 1. 引言&#xff1a;为什么你需要一个本地AI助手&#xff1f; 想象一下&#xff0c;你正在处理一份敏感的客户合同&#xff0c;需要AI帮你分析条款&#xff1b;或者你在一个没有稳定网络的环境里&#xff0c;…...

OpenClaw安全防护指南:百川2-13B-4bits量化模型权限管控实践

OpenClaw安全防护指南&#xff1a;百川2-13B-4bits量化模型权限管控实践 1. 为什么需要安全防护&#xff1f; 当我第一次把OpenClaw接入百川2-13B-4bits量化模型时&#xff0c;那种兴奋感至今难忘——终于可以在本地运行一个强大的AI助手了。但很快&#xff0c;一个意外让我意…...

仅剩最后23套田间网关固件兼容包!Python农业物联网部署必备的8个设备驱动补丁(含Raspberry Pi 5专用版)

第一章&#xff1a;田间网关固件兼容包的农业物联网部署意义 在农业物联网&#xff08;Agri-IoT&#xff09;规模化落地过程中&#xff0c;田间网关作为边缘侧核心枢纽&#xff0c;承担着多源异构传感器数据汇聚、协议转换、本地决策与上云协同等关键职能。然而&#xff0c;我国…...

北京大学钟亦武老师招收博士生、实习生

点击下方卡片&#xff0c;关注“CVer”公众号AI/CV重磅干货&#xff0c;第一时间送达冲刺今年春招、秋招和实习&#xff01;大家快加入2026年AI校招群&#xff01;赠送今年最大的80元优惠券&#xff0c;大家扫码下方二维码即可加群学习&#xff01;北京大学智能学院介绍&#x…...

Xcode打包上传App Store Connect失败?可能是这些配置没做好(含解决方案)

Xcode打包上传App Store Connect失败排查指南&#xff1a;从配置到解决方案 每次提交应用上架都是iOS开发者必经的考验&#xff0c;而Xcode打包上传过程中遇到的"无效二进制文件"错误堪称拦路虎。这种错误往往不会给出明确提示&#xff0c;而是通过邮件通知或在App S…...

开源像素艺术工具推荐:Pixel Fashion Atelier vs Automatic1111定制化对比

开源像素艺术工具推荐&#xff1a;Pixel Fashion Atelier vs Automatic1111定制化对比 1. 工具概览 1.1 Pixel Fashion Atelier简介 Pixel Fashion Atelier是一款基于Stable Diffusion与Anything-v5的图像生成工作站。它采用独特的复古日系RPG界面设计&#xff0c;将AI图像生…...

FRCRN模型结构解析:频域卷积+循环网络如何协同提升信噪比

FRCRN模型结构解析&#xff1a;频域卷积循环网络如何协同提升信噪比 1. 引言&#xff1a;语音降噪的挑战与突破 语音降噪技术一直面临着"既要又要"的难题&#xff1a;既要彻底消除背景噪声&#xff0c;又要完整保留人声细节。传统的降噪方法往往在这两者之间难以平…...