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.mzph.cn/diannao/20169.shtml

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

相关文章

Oracle 19c Active Data Guard (ADG)新特性

自动DML重定向(ADG DML Redirection): 这是一个关键特性,允许在Active Data Guard备用数据库上直接执行DML(数据操作语言)操作,而不是仅限于查询。当在备用数据库上执行DML时,该操作…

跨站点脚本 (XSS) 攻击是什么

跨站点脚本 (XSS) 攻击是什么 跨站点脚本(Cross-Site Scripting,简称 XSS)攻击是一种注入攻击,其中恶意脚本被注入到受信任的网站中。攻击者使用 Web 应用程序向不同的最终用户发送恶意代码,通常以浏览器端脚本的形式…

C语言编程炮弹轨迹:深入探索与实战解析

C语言编程炮弹轨迹:深入探索与实战解析 在C语言编程的世界中,模拟炮弹轨迹是一个充满挑战与乐趣的课题。它结合了数学、物理和编程的精髓,让我们能够通过代码来模拟现实世界中的复杂现象。本文将带领大家从四个方面、五个方面、六个方面和七…

论文笔记:Image Anaimation经典论文-运动关键点模型(Monkey-Net)

Monkey-Net(MOviNg KEYpoints) paper: https://arxiv.org/pdf/1812.08861, CVPR 2019 code: https://github.com/AliaksandrSiarohin/monkey-net/tree/master 相关工作 视频生成演变过程: spatio-temporal network: 如基于GAN网络的生成模…

异常处理1--5.31

try--catch--finally格式: try{ }catch(错误类型){ }finally{ } 执行情况: package javatest5;public class test {public static void main(String[] args) {int num115;int num20;try{System.out.println("商等于:"num1/num…

太速科技-基于3U VPX 4核8线程I7 X86主板

基于3U VPX 4核8线程I7 X86主板 一、产品概述 该产品是一款基于第六代Intel i7四核八线程处理器的高性能3U VPX刀片式计算机。产品提供了4个x4 PCIe 3.0总线接口,其中2个x4 PCIe 3.0接口可配置为1个x8 PCIe3.0接口,另外2个x4 PCIe 3.0接口可灵活配置…

记一次RabbitMQ未配置Listener导致的报错

简单配置rabbitmq参数 spring: rabbitmq:host: 192.168.1.2port: 5672username: guestpassword: guestpublisher-confirms: truevirtual-host: print_test 发送消息和接收消息虽然能成功,但是监听器接收消息确认后一直会打印如下错误 Shutdown Signal: ch…

OpenFeign+Hystrix 熔断器

OpenFeignHystrix 熔断器 文章目录 OpenFeignHystrix 熔断器一,OpenFeign1.OpenFeign介绍2.OpenFeign使用3.OpenFeign 的特性和工作原理。特性:工作原理: 二,Hystrix 熔断器1.介绍2.和OpenFeign整合使用 一,OpenFeign …

Unity版本使用情况统计(更新至2024年4月)

UWA发布|本期UWA发布的内容是第十四期Unity版本使用统计,统计周期为2023年11月至2024年4月,数据来源于UWA网站(www.uwa4d.com)性能诊断提测的项目。希望给Unity开发者提供相关的行业趋势作为参考。 2023年11月 - 2024年…

达梦数据库(六) -------- 数据迁移MYSQL->达梦数据库

前言:确保安装好达梦数据库,达梦数据库(三) -------- 安装和初始化达梦数据库_达梦数据库安装-CSDN博客,需要安装达梦的数据库软件包,直接安装达梦8是包含这个功能的。安装包下载地址如下需要注册: https://www.damen…

android 应用安装目录

三方:data/app/ 系统应用:system/app/ 声明so压缩 android:extractNativeLibstrue如果lib没有so,可能是在base.apk,如果so不压缩,直接在base.apk运行时提取 https://www.cnblogs.com/xiaxveliang/p/14583802.html 若…

【网络安全】Web安全学习-前言及先导

一、网络安全概述 网络安全是指网络系统的硬件、软件及其系统中的数据受到保护,不因偶然的或者恶意的原因遭到破坏、更改、泄露,系统能连续可靠的正常运行,网络服务不中断。简单来说。就是要保障我们的网络环境安全稳定,不被人破…

vmware workstation 17.0.0 ubuntu删除快照导致无法启动的问题打不开磁盘xxxxxxx或它所依赖的某个快照磁盘

在使用vmware workstation的时候 在我删除多余的快照的时候,发现删除快照后打不开虚拟机了, 提示: 打不开此虚拟磁盘的父磁盘打不开磁盘“D:\Virtual Machines\Ubuntu 64 位\Ubuntu 64 位-000003.vmdk”或它所依赖的某个快照磁盘。模块“Dis…

docker 启动关闭,设置仓库地址

1. 配置/etc/docker/daemon.json cat /etc/docker/daemon.json# 内容 {"registry-mirrors": ["https://0nth4654.mirror.aliyuncs.com"],"insecure-registries": ["harbor.domain.io"] }2. 配置systemd启动文件 和方法1配置会有冲突&a…

一次滑稽的面试(鼎夏)

本文记述自己今天面试的经历,堪称滑天下之大稽 清晨起来打开窗,心情美美哒,boss上有个小姐姐给我推荐职位,把简历发送过后,小姐姐立即就给我安排了下午的面试,并且时间准确,我问的问题也及时回…

C语言 | Leetcode C语言题解之第124题二叉树中的最大路径和

题目: 题解: /*** Definition for a binary tree node.* struct TreeNode {* int val;* struct TreeNode *left;* struct TreeNode *right;* };*/ int max; int dfs(struct TreeNode* root){if(!root) return 0;int left dfs(root->left…

JS的基本内容

JS中的六中数据类型字符型,数值型,布尔型,Null,undefined和对象Object:符合数据类型,对象是属性和方法的集合甚至是另一种类型的对象。 基本数据类型:数值、字符串、null、undefined、布尔&…

基于Raspi的Opencv-Python开发笔记

本文所有未强调 “windows终端” 的 “终端”字眼,都是默认树莓派的终端 系统版本 系统版本有必要强调一下,因为不同版本很多操作需要修改 在终端输入uname -a Release就是版本号,Codename是版本名 以下操作仅在此版本验证可行 使能摄像…

WalleWeb简化你的DevOps部署流程

walle-web:简化部署流程,提升开发效率,Walle Web让DevOps触手可及 - 精选真开源,释放新价值。 概览 Walle Web是一个功能强大且免费开源的DevOps平台,旨在简化和自动化代码部署流程。它支持多种编程语言,包…

短剧系统源码:构建互动娱乐的新平台

随着数字媒体的兴起,短剧成为了一种新兴的娱乐形式,它以紧凑的叙事和快速的节奏迎合了现代观众的观看习惯。短剧系统源码的开发,为短剧内容的创作、传播和消费提供了一个全面的技术解决方案。本文将探讨短剧系统源码的关键组成部分及其功能。…