Vue3项目开发——新闻发布管理系统（一）
文章目录
- 一、项目要实现的功能
- 二、项目用到的技术栈
- 三、项目创建
- 1、pnpm安装
- 2、创建项目
- 3、项目启动
- 四、项目配置
- 1、ESLint
- 2、Prettier
- 3、ESLint + Prettier 进行配置代码风格
- 3.1配置prettier
- 3.2vue组件名称多单词组成 （忽略index.vue）
- 3.3props解构（关闭）
- 4、husky
- 4.1husky配置
- 4.2 暂存区 eslint 校验
从今天开始，我们要开发一个Vue3项目——
新闻发布管理系统。
我会从零开始详细给大家介绍项目是怎么开发出来的，跟我学完之后，你一定也就熟练掌握了Vue开发的全过程。
让我们开始吧。
一、项目要实现的功能
新闻发布管理系统主要包括以下四部分功能：
1、登录和注册
2、新闻分类管理
3、新闻管理
4、个人信息（包括基本资料、更换头像、重置密码）
二、项目用到的技术栈
本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus。
结合开发过程，我们不仅会讲解：
- Vue3 compositionAPI
- Pinia / Pinia 持久化chuli
- Element Plus (表单校验、表单处理、组件封装)
这三个核心内容，同时也会介绍以下
- pnpm 包管理工具
- Eslint + prettier (进行更规范的配置)
- husky (Git hooks工具，代码提交前进行校验)
- 请求模块设计
- VueRouter4路由设计
这些知识。
三、项目创建
本项目创建使用pnpm工具。pnpm工具是一个速度快、节省磁盘空间的软件包管理器，它比npm快了近两倍，在磁盘空间的使用上也比
相关文章：
Vue3项目开发——新闻发布管理系统（一）
文章目录 一、项目要实现的功能二、项目用到的技术栈三、项目创建1、pnpm安装2、创建项目3、项目启动四、项目配置1、ESLint2、Prettier3、ESLint + Prettier 进行配置代码风格3.1配置prettier3.2vue组件名称多单词组成 （忽略index.vue）3.3props解构（关闭）4、husky4.1husky…...
前端调用后端，出现跨域报错怎么办
我前端是vue，后端是其他同事写的python，因为部署在不同的机器上，我前端如果直接调用他的python，axios请求就会出现跨域报错，如下 blocked by CORS policy 云云 怎么办呢，网上探索了一下午，才找…...
使用Node-RED发送数据到巴法云
上一篇博文完成了Node-RED的安装，下面来尝试一下用Node-RED来发送数据到巴法云服务器。 我在教学用MQTT工具的思考-CSDN博客中说过，巴法云支持云云互联，可以连小米、百度，学生使用的兴趣高。所以今天先测试Node-RED和巴法云的连接…...
【今夕是何年】雅达利发布Atari 7800+游戏主机：配备无线手柄、HDMI接口
雅达利（Atari）发布了Atari 7800游戏主机，目前这款主机在其官方商城接受预定，售价129.99美元。Atari 7800游戏主机，作为Atari 7800系列的革新升级版本，搭载了高效的Rockchip 3128处理器，不仅确保…...
APP支付宝授权获取code uniapp
1.点击使用plus.runtime跳转打开支付宝 //打开支付宝授权，在支付宝APP中授权后会在支付宝中跳转到你填写的h5地址//urls是授权地址可以后端拼接也可以前端写死 //以下是一个拼接示例，需修改app_id的值和redirect_uri的值即可 //app_id是商户的APPID&…...
在Linux系统下安装、配置ETCD
在Linux系统下安装、配置ETCD（一个分布式键值存储系统）涉及多个步骤，包括下载、安装、配置、启动以及使用ETCD的常用命令。以下是对这些步骤的详细讲解，内容不少于2000字。 一、ETCD简介 ETCD是一个高可用的键值存储系统&#x…...
lambda 表达式可以传递引用为什么需要引用捕获
当 lambda 表达式被传递或存储在其他地方时，通过引用捕获可以确保它始终访问正确的外部变量。—— 引用捕获可以精确地控制被捕获的引用变量的作用域。如果一个 lambda 表达式被存储在一个容器中，并且在不同的时间点被调用，引用捕获可以确保它…...
【Java】/* 双向链表 - 底层实现 */
【难点】：remove、removeAllKey 一、IList package bagfive;/*** Created with IntelliJ IDEA.* Description:* User: tangyuxiu* Date: 2024-08-21* Time: 20:30*/ public interface IList<E> {//头插法void addFirst(E data);//尾插法void addLast(E data…...
Go 语言协程管理精解
1.基础 协程切换需要操作寄存器，这些操作需要通过汇编辅助实现。另外，每一个协程都有一个协程栈，实际上协程栈也是有结构的。汇编程序和栈结构这些概念可能大部分开发者都不太了解，在介绍协程管理之间，先简要介绍。 1…...
C库函数signal()信号处理
signal()是ANSI C信号处理函数，原型如下： #include <signal.h>typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t handler); signal()将信号signum的处置设置为handler，该handler为SIG_IGNÿ…...
007 SpringCloudAlibaba基础使用(nacos,gateway)
文章目录 cubemall-commoncubemall-productcubemall-gateway https://nacos.io/ https://github.com/alibaba/nacos/releases/tag/1.4.1 https://github.com/alibaba/spring-cloud-alibaba https://github.com/alibaba/Nacos https://developer.aliyun.com/mvn/guide https…...
编译环境揭秘
不同平台因为偏好差异，编译环境的准备会有差异。对于MSVC，微软提供简单的VS安装界面，比较省心。在Ubuntu发行版，gcc/make等程序可能不自带，当需要安装这些软件时就需要不少命令。当然比较麻烦，提供了统一的…...
不同的字符集(ASCII、UTF-8、UTF-16/UCS-2、UTF-32/UCS-4)
来自：C标准库(第2版)...
STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(3)
STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(3) 简介 实验 3：在搭建好 tcp 服务器，并拟定好协议的前提下，接收每一个 bin 文件的块，配置到 fpga。 原理图 fpga fpga1 stm32 接线总结 // fpga引脚 stm32…...
JavaScript基础知识(七)
数组相关api再续前缘 arr.forEach(function) 对arr数组的每一项执行遍历操作,并且可以通过function来对相关元素进行二次操作 function: 函数,同时接收三个参数 - item: 数组中的每一项 - index: 数组每一项的下标(item的对应下标) - arr: 原数组 arr.map(function) 对数组的…...
20240821让飞凌的OK3588-C的核心板在Linux R4下挂载1TB的exFAT格式的TF卡
fdisk -l df -h df -t df -T mount 20240821让飞凌的OK3588-C的核心板在Linux R4下挂载1TB的exFAT格式的TF卡 2024/8/21 19:47 百度：rk3588 buildroot exFAT mount: mounting /dev/mmcblk1p1 on /mnt failed: Invalid argument Disk /dev/mmcblk1: 955 GB, 10254234…...
Java HashMap练习
JDK1.2添加，线程不安全，性能相对较好 注意：允许使用null作为key或者value 使用数组加链表结构，结合数组和链表的优点 Hash Map的基本使用 package HashMap;import text5.Student;import java.util.Collection; import java.ut…...
前后端分离项目实战-通用管理系统搭建（前端Vue3+ElementPlus，后端Springboot+Mysql+Redis）第三篇：登录功能优化
天行健，君子以自强不息；地势坤，君子以厚德载物。 每个人都有惰性，但不断学习是好好生活的根本，共勉！ 文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。…...
8.20 Redis ACL配置 多个用户连接同一个Redis
**一、首先通过 linux命令 redis-cli 输入用户名和密码连接redis的客户端** **二、查看用户，创建用户，设置密码操作** （1）**ACL LIST** 命令 可以查看到当前的权限用户 （2）**ACL SETUSER userName** 此…...
【C语言】static和extern的作用
本文首发于 ❄️慕雪的寒舍 简单介绍C/C中static关键字和extern关键字的作用。 1.简介 在之前的博客中，提到过static的三个作用，但是没有详细说明这三个作用的场景，现在回过头来记录一下。 修饰函数修饰全局变量修饰函数内变量 static还有…...
全新分支版本！微软推出Windows 11 Canary Build 27686版
已经很久没有看到 Windows 11 全新的分支版本了，今天微软发布 Windows 11 Canary 新版本，此次版本号已经转移到 Build 27xxx，首发版本为 Build 27686 版。 此次更新带来了多项改进，包括 Windows Sandbox 沙盒功能切换到 Microsof…...
【Linux】ARM服务器命令行安装虚拟机
在Arm服务器上安装虚拟机操作笔记 一、基础环境准备1、环境准备2、检查KVM支持3、启动并启用libvirtd服务4、创建虚拟网络（可选）5、使用virt-manager创建虚拟机（支持KVM）6、管理虚拟机9、监控和日志 二、软虚拟化替代方案1、查看虚…...
Android 10.0 锁屏页面忘记锁屏密码情况下点击5次解锁图标弹出锁屏密码功能实现
1. 前言 在10.0的系统ROM定制化开发中，在一些产品中带锁屏密码的功能中，系统默认是滑动解锁，但是客户会设置锁屏密码，在某些时候会 忘掉锁屏密码，导致需要进入恢复出厂设置然后才能进入系统桌面，这样就导致系统的保存的资料都丢失了，所以需要要求在锁屏密码页面在忘记解…...
Java-CompletableFuture工具类
CompletableFuture 是 Java 8 引入的一个强大的异步编程工具，它提供了对异步计算的高级支 持，包括组合多个任务的能力、处理结果、异常处理等。为了方便地使用 CompletableFuture，你 可以创建一个工具类来封装常用的操作。 CompletableFuture 工具类 下面是一个 Complet…...
C语言：递归
递归简单来说就是函数自己调用自己。 特点：一般代码比较简洁，没有出口。 例子1：用一个函数计算阶乘 #include<stdio.h>//不用递归 int fac(int n) {int val 1;for (int i 1; i <n;i){val * i;}return val; }//用递归 int fac1(…...
自动化测试框架pytest+allure+requests
最近复习了一下关于自动化测试的内容，结合[码尚教育] 相关的思路来对测试框架进行开发。 争取实现零代码来实现自动化测试环境的搭建 AutoTestFrame 介绍 AutoTestFrame是一个基于Python的自动化测试框架，旨在帮助测试人员快速、高效地完成测试任务。…...
Python 笔记 numpy.ndarray切片
NumPy 的 ndarray 类型提供了非常灵活的切片功能，可以方便地访问和操作数组中的元素。切片允许您通过指定索引来选择数组的一部分。下面是一些基本的切片操作及其解释。 一维数组的切片 对于一维数组，切片操作类似于 Python 列表的切片。 示例 impor…...
一、HTML5知识点精讲
一、HTML5介绍 html是用来描述网页的一种语言（就是写网页的一种语言）。 它和CSS，JS称为网页三要素。 HTML负责把元素简单呈现在网页上，是网页的身体CSS负责给网页元素添加各种样式，是网页的衣服JS负责实现各种动态、…...
【杂乱算法】前缀和与差分
前缀和 文章目录 前缀和一维应用 二维差分一维 二维扩展1、前缀和与哈希表 一维 一个数组prefix中，第i个元素表示nums[0]至nums[i-1]的总和，那么我们就称这个prefix数组是nums数组的前缀和。 prefix [ i ] ∑ j 0 i nums [ j ] \text{prefix}[i] \s…...
Arduino调试ESP32常见问题 exit status 1
问题1：代码上传（烧录）报Failed uploading: uploading error: exit status 1大概率原因：没有安装对应的驱动，我的ESP32驱动是CH340点击这里下载CH340 下载后打开，若出现乱码不用在意，点击第一个按…...
南通网站建设费用/温州seo按天扣费
前两天成都出了太阳，本以为寒潮就此过去。结果今天又冷风呼呼吹，缩在家看书。手机震了一下，是微信有新的提醒，打开一看是 「小道消息」推送了一篇《学计算机的同学们啊，想清楚再去读研究生》，读完感觉一下击…...
ainihejian wordpress/著名的网络营销案例
试验网站#1搜索引擎优化收录情况记录(断续运行)日期Yahoogooglebaidusogou每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量每日收录每日收录增量2007-6-24288 333 1060 4813 2007-6-25164013523330108020481302007-6-26空间超过6月流量限制……，…...
做网站需要公司备案/关键词排名优化易下拉软件
今天晚上我迫不急待的打开电脑，一阵撕心裂肺的猫叫之后，我开始了网上的旅程。 没搞错，上不去我的网页，怎么搞的，我可是网页的版主哦，这就像因太晚没回家而被老婆关在门外的可怜人一样，只…...
wordpress手机版怎么做/互联网营销培训课程
初中就开始学习线性回归，并且可以根据最小二乘法，计算出线性回归系数，进而利用线性回归进行数据的简单预测。线性模型是机器学习中最简单、应用最广泛的模型，指通过样本特征的线性组合来进行预测的模型。给定一个d维样本[x1, ,…...
网站介绍模板/google图片搜索引擎入口
java eclipse如何显示行数 Eclipsejava编程语言专业回答liuyang0542015-05-18 18:35打开eclipse ， 随便打开一个其中的代码 ， 然后在窗口的左侧右键鼠标 选中show line numbers 就能显示行数了。 下图有说明 eclipse中查找和替换直接按快捷键 ctrl F …...
z-blog与wordpress/一句简短走心文案
依据《专利法》的规定，专利被别人恶意抢注的，不能直接要回来，但可以向专利管理部门申请宣告专利无效。专利管理部门宣告专利无效后，当事人可以申请该专利注册。关于专利被抢注了该怎么才能拿回来的问题，泸州律师在线已…...