从零到无搭建Vue项目及代码风格规范

news2024/7/6 17:49:51
  • 注:已经有vue项目的可以跳过项目初始化

Vue项目搭建

  • 环境搭建 安装nvm 方便后续切换不通的node版本
    nvm官网
    在这里插入图片描述
    傻瓜安装就行 或者搜下自己(非本文重点)
  • nvm 安装好后 安装一个Node版本 本文使用的
    在这里插入图片描述
  • 有了环境开始创建Vue项目 打开命令行 cmd
npm install -g vue-cli			// 全局安装Vue CLI脚手架工具

然后就可以使用脚手架创建项目了

vue create my-vue-project		// 创建名为"my-vue-project"的Vue项目

在这里插入图片描述
Default上面的选项是我之前搭建的保存的项目预设,这里我们选择最后一个自定义,按方向键向下,然后按Enter键,这里没选vuex,后面安装pina吧
在这里插入图片描述

按空格勾选对应的选项,这里我们勾选如上图,继续Enter键下一步
在这里插入图片描述
这里选择Vue3.x版本 继续Enter键下一步,其他选择如下

在这里插入图片描述

等待完成就可以了
在这里插入图片描述
项目好了,目录结构
在这里插入图片描述

配置格式化规范

prettier官网
按步骤执行

npm install --save-dev --save-exact prettier
echo {}> .prettierrc.json

然后继续按着官网步骤 创建一个 .prettierignore 文件 表明我们不需要格式化的文件
在这里插入图片描述

提交代码自动格式化

Pre-commit Hook
运行此命令

npx mrm@2 lint-staged

看看他做了哪些事情,观察package.json中的变化,及根目录
在这里插入图片描述

  • 需要修改package.json文件(增加.vue文件的格式化,如果是ts项目还需要增加ts)
    在这里插入图片描述

  • prettier和eslint会有冲突
    在这里插入图片描述
    安装一下依赖 eslint-config-prettier

npm i eslint-config-prettier -D

修改以下文件,解决冲突
在这里插入图片描述
这样我们的提交代码自动格式化就完成了

提交代码规范git commit -m ‘feat:xxx’

commitlint官网
安装依赖

npm install --save-dev @commitlint/{config-conventional,cli}

运行此命令

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

最后执行此命令

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

此时我们不规范提交就提交不了了
在这里插入图片描述
应该是 git commit -m ‘特定的词:xxxx描述本次提交’ 这样的格式
在这里插入图片描述
提交前缀可以是以上 也可以自己再去自定义

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

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

相关文章

Redis底层学习(五)—存储类型-Set篇

文章目录 特点具体服务器操作命令底层结构应用场景 特点 适⽤场景:存储有去重需求的数据,⽐如:针对⼀篇⽂章⽤户进⾏点赞操作。 它的特点是内部元素⽆序且不重复。它的内部实现相当于⼀个特殊的字典,字典中所有的 value 的值都为…

这么好看的头像,岂不拿下!

❝ 如此好看的头像,怎么能不喜欢??? ❞ 代码放在了最后 后续还会出一个工具,以便于随时打开下载。 看上述的头像是不是还是很不错的。看着网站还是✨✨每天都会有更新的✨✨。 所以,我动手了,下…

5.2 案例引入

博主简介:一个爱打游戏的计算机专业学生博主主页: 夏驰和徐策所属专栏:算法设计与分析 1.什么是大数据时代的到来? 大数据时代指的是在现代社会中,产生和积累的数据规模庞大、速度快、种类多样的时代。随着计算机技术…

《商用密码应用与安全性评估》第四章密码应用安全性评估实施要点4.4密码应用安全性评估测评过程指南

目录 概述 1.基本原则 2.风险测评控制 3.测评过程 密码应用评估方案 1.主要内容 1)密码应用解决方案评估要点 2)实施方案评估要点 3)应急处置方案评估要点 2.主要任务 3.密码应用方案评估的输出文档 测评准备活动 1.测评准…

不愧是阿里,扣的真细。

铜三铁四已经过去了,今天的行情虽然没有以前好,但是相比去年来说也算是好了一些了。有一些人已经在这个招聘季拿到了不错的Offer了。 今天给大家分享一份面经,今天这位朋友的背景是Java五年本,2023年前被毕业后投入了面试大军怀抱…

Baseline Profile 安装时优化在西瓜视频的实践

‍ 动手点关注 干货不迷路 背景 在Android上,Java/Kotlin代码会编译为DEX字节码,在运行期由虚拟机解释执行。但是,字节码解释执行的速度比较慢。所以,通常虚拟机会在解释模式基础上做一些必要的优化。 在Android 5,Goo…

chatgpt赋能python:Python列表:完整介绍与使用指南

Python列表:完整介绍与使用指南 Python是一种非常受欢迎的编程语言,而Python列表是Python编程中最基本的数据结构之一。列表在Python中的使用频率极高,因为列表可以存储许多不同类型的数据,并且可以很方便地进行操作和修改。在本…

Unity Addressables学习笔记(2)---创建远程服务器对象

1.先创建对象 我的做法是: 先拖动一张图片到Resources/img下就是我选中的这张文件夹 2.把图片拖动到Hierarchy里变成一个对象,再把对象拖动到Resources/prefabs里,图片里的单词敲错了哈哈哈哈。 这样这个图片就变成了预制体,然…

AMD在数据中心领域举步维艰,竞争越来越难

来源:猛兽财经 作者:猛兽财经 数据中心业务举步维艰 2023年第一季度,AMD的数据中心业务收入为13亿美元,几乎没有同比增长,反而环比下降了22%。与此同时,它的主要竞争对手英伟达(NVDA)却获得了越来越多的订…

行为型设计模式04-状态模式

✨作者:猫十二懿 ❤️‍🔥账号:CSDN 、掘金 、个人博客 、Github 🎉公众号:猫十二懿 状态模式 1、状态模式介绍 状态模式(State)是一种行为型设计模式,当一个对象的内在状态改变时…

python---条件语句(1)

顺序语句 按照写的顺序执行 条件语句 条件语句的一些注意事项: 1.情况1 2.情况2 bbb已经不属于条件语句中的内容了 3.情况3 通常使用4个空格或一个制表符tab来表示! if语句的嵌套 当有多级条件嵌套时,当前的语句属于哪个代码块,完全取决于缩进的级别.

SOFA Weekly|SOFAArk 社区会议预告、Layotto 社区会议回顾与预告、社区本周贡献

SOFA WEEKLY | 每周精选 筛选每周精华问答,同步开源进展 欢迎留言互动~ SOFAStack(Scalable Open Financial Architecture Stack)是蚂蚁集团自主研发的金融级云原生架构,包含了构建金融级云原生架构所需的各个组件&am…

PostgreSql根据给的时间范围统计15分钟粒度、小时粒度、天粒度、周粒度、月粒度工单

PostgreSql根据给的时间范围统计15分钟粒度、小时粒度、天粒度、周粒度、月粒度工单 说明实现15分钟粒度工单统计小时粒度工单统计天粒度工单统计周粒度工单统计月粒度工单统计 说明 项目有个需求是统计故障工单每15分钟、每小时、每天、每周和每月共有多少工单。 这里先做个笔…

JavaEE进阶(统一功能处理)6/2

目录 1.使用拦截器实现用户登录的校验功能 2.统一数据格式的返回 3.统一异常的返回 1.使用拦截器实现用户登录的校验功能 Spring拦截器 关键步骤1.实现HandlerInterceptor接口 2.重写preHeadler方法,在方法中编写自己的业务代码 将拦截器添加到配置文件中&#xf…

【剑指offer】二维数组中的查找(详细解析)

文章目录 题目思路代码实现 题目 题目链接入口:牛客:JZ4 二维数组中的查找 思路 1.核心考点 (1) 数组相关:二维数组(矩阵)。 (2) 特性观察:在一个二维数组…

如何使用宝塔面板搭建网站(最后一步!上传文件至宝塔面板)

这里就是我们搭建宝塔面板的最后一步了,把我们的PHP文件上传到宝塔面板上,就可以通过因特尔网络访问我们的网址了。 第一步:基础安装 必须是Linux服务器 不支持window服务器 最低要求配置1核1G当然再低些也能运行但是不建议 要求服务器环…

值得收藏 | 脑机交互作用研究

神经损伤和疾病对许多人的生活产生了巨大的影响,导致了许多运动障碍和日常任务无法独立完成。皮质假体系统通过脑机接口(BCI)接收一个动作命令来执行所需的位置,从而使得经历神经损伤的人能够实现部分功能恢复。BCI技术可以在侵入…

chatgpt赋能python:Python创建二维列表的方法

Python创建二维列表的方法 Python是一种高级编程语言,它的灵活性和功能强大的库使其成为数据科学和机器学习的最佳工具之一。其中一个常用的数据结构是二维列表,本文将介绍如何在Python中创建一个二维列表。 什么是二维列表? 在Python中&a…

华为OD机试真题 Java 实现【表示数字】【牛客练习题】

一、题目描述 将一个字符串中所有的整数前后加上符号“*”,其他字符保持不变。连续的数字视为一个整数。 数据范围:字符串长度满足1≤n≤100 。 二、输入描述 输入一个字符串。 三、输出描述 字符中所有出现的数字前后加上符号“*”,其…

arcgis for javascript中的TileLayer(缓存地图服务图层)

一、什么是图层 要理解TileLayer图层,咱要先搞清楚在arcgis中图层的概念: ArcGIS for JavaScript中的图层是数据的可视化链接。简单来说,它可以将数据显示在地图上。 图层是地图上的一个图形单元,可以是点、线、面、文本等&#…