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"

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

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

相关文章

11.3 冒泡排序

目录 11.3 冒泡排序 11.3.1 算法流程 11.3.2 效率优化 11.3.3 算法特性 11.3 冒泡排序 冒泡排序(bubble sort)通过连续地比较与交换相邻元素实现排序。这个过程就像气泡从底部升到顶部一样,因此得名冒泡排序。 如图 11-4 所示…

数据结构与算法笔记:基础篇 - 链表(上):如何实LRU缓存淘汰算法

概述 本章聊聊 “链表” 这个数据结构。学习链表有什么作用? 我们先来讨论一个经典的链表应用场景,那就是 LRU 缓存淘汰算法。 缓存是一种提高数据读取性能的技术,在硬件设计、软件开发中有着非常广泛地应用,比如场景的 CPU 缓…

登录安全分析报告:小米官网注册

前言 由于网站注册入口容易被黑客攻击,存在如下安全问题: 暴力破解密码,造成用户信息泄露短信盗刷的安全问题,影响业务及导致用户投诉带来经济损失,尤其是后付费客户,风险巨大,造成亏损无底洞 …

[12] 使用 CUDA 加速排序算法

使用 CUDA 加速排序算法 排序算法被广泛用于计算应用中有很多排序算法,像是枚举排序或者说是秩排序、冒泡排序和归并排序,这些排序算法具有不同的(时间和空间)复杂度,因此对同一个数组来说也有不同的排序时间&#xf…

使用Streamlit和MistralAI创建AI聊天机器人应用

大家好,创建交互式和用户友好型的应用程序通常需要复杂的框架和耗时的开发过程。Streamlit是一个Python库,它简化了以数据为重点的网络应用程序的创建过程,使开发人员和数据科学家能够快速将他们的想法转化为交互式仪表盘和原型。本文将介绍使…

使用autodl服务器进行模型训练

1.注册并且选择一个服务器租用 2.点击jupyter lab进入服务器内部 3.把yolov5-master这个的压缩文件上传到jupyter的文件列表中 4.打开终端 (1)查看目录 ls (2)解压yolov5-master(1) unzip "yolov5-master (1).zip" 可以看到解压成功! (3)进入yolov5-m…

开源与闭源 AI 模型:发展路径的比较与前瞻

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

VB.net进行CAD二次开发(四)

netload不能弹出对话框&#xff0c;参考文献2 参考文献1说明了自定义菜单的问题&#xff0c;用的是cad的系统命令 只要加载了dll&#xff0c;自定义的命令与cad的命令同等地位。 这时&#xff0c;可以将自定义菜单的系统命令替换为自定义命令。 <CommandMethod("Add…

【如何在日志中输出精确到毫秒的时间戳】

1. 需求 在日志中输出精确到毫秒级的时间戳&#xff0c; 格式为&#xff1a;%Y-%m-%d %H:%M:%S.%MS 如&#xff1a;2024-05-30 22:33:25.821 2. 代码实现 #include <iostream> #include <chrono> #include <iomanip> #include <sstream> #include &…

HTTP请求拦截器链

文章目录 HTTP请求拦截器链需求定义写一个Controller方法接口写三个http请求拦截器把拦截器加入到配置中&#xff0c;并且配置拦截规则在postman里面发送请求&#xff0c;看下测试结果是否正确第三个参数的作用 HTTP请求拦截器链 需求定义 我们写一个包含三个HTTP请求拦截器的…

硬币检测电路设计

一、来源&#xff1a;凡亿教育 第一场&#xff1a;硬币检测装置原理分析、电路设计以及器件选型_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1Zh4y1V7Px/?p1&vd_source43eb1cb50ad3175d7f3b9385905cd88f 二、开发软件&#xff1a;KEIL MDK 三、主控芯片&#…

vs2019 c++20 规范 STL库中关于时间的模板

在学习线程的时候&#xff0c;一些函数会让线程等待或睡眠一段时间。函数形参是时间单位&#xff0c;那么在 c 中是如何记录和表示时间的呢&#xff1f;以下给出模板简图&#xff1a; 谢谢

CMake的作用域:public/private/interface

在 CMake 中&#xff0c;public、private和 interface是用来指定目标属性的作用域的关键字&#xff0c;这三个有什么区别呢&#xff1f;这些关键字用于控制属性的可见性和传递性&#xff0c;影响了目标之间的依赖关系和属性传递。 public 如果在一个目标上使用 public关键字时…

mysql去除重复数据

需求描述 doc表有很多重复的title,想去除掉重复的记录 表结构 CREATE TABLE doc (id INT PRIMARY KEY,title VARCHAR(255),content TEXT );去重SQL -- 创建临时表 CREATE TEMPORARY TABLE temp_doc AS SELECT * FROM doc WHERE 10;-- 插入唯一的记录&#xff08;每个title最…

FPGA定点数FFT过后转换为浮点数与Matlab计算的FFT结果进行比对

目录 1.前言2.FPGA的testbench中如何读取数据文件3.FPGA的testbench中如何将输出数据存储在文件中4.Matlab去读取testbench存储的文件数据4.1纯数字不带编码4.2 带编码的数据&#xff0c;如定点数 微信公众号获取更多FPGA相关源码&#xff1a; 1.前言 前面一篇文章讲了&…

基础—SQL—DCL(数据控制语言)小结

一、总结 在SQL分类中的DCL语句部分&#xff0c;主要讲到了两个部分的知识。 1、用户管理 用户管理&#xff0c;主要是管理哪些用户可以访问当前 mysql 数据库。 包括&#xff1a;创建用户、修改用户密码以及删除用户 2、权限控制 权限管理&#xff0c;主要是控制我们当前用户…

iOS App Tech Support(URL)

咪萌是一个语音类交友直播App&#xff0c;分成红艳知己&#xff0c;点唱大厅&#xff0c;歌手驻唱等不同房间分类&#xff0c;广场可以看到其他人发的一些动态&#xff0c;一个非常不错的App 如果您有任何疑问&#xff0c;您可以留言或者将问题发送至我们的邮箱。 我们会第一时…

Python知识点5---字符串的使用

提前说一点&#xff1a;如果你是专注于Python开发&#xff0c;那么本系列知识点只是带你入个门再详细的开发点就要去看其他资料了&#xff0c;而如果你和作者一样只是操作其他技术的Python API那就足够了。 Python的字符串在使用上和其他语言的差别不大&#xff0c;常规操作都…

GPT-4o VS GPT-3.5 完胜

前言&#xff1a; 最近&#xff0c;GPT-4o已经限时免费开放了&#xff0c;试了一下&#xff0c;然后&#xff0c;说我的时间到了&#xff0c;然后&#xff0c;有给我转到3.5&#xff0c;正好遇到一个问题做一下对吧&#xff0c;感觉4O完胜啊。3.5还是很好胡诌&#xff0c;也就…