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

Vue3项目开发——新闻发布管理系统（一）

news 2026/3/28 3:13:01

文章目录

  • 一、项目要实现的功能
  • 二、项目用到的技术栈
  • 三、项目创建
    • 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…...

编程日记 2024/8/22 8:38:54

前端调用后端，出现跨域报错怎么办

我前端是vue，后端是其他同事写的python，因为部署在不同的机器上，我前端如果直接调用他的python，axios请求就会出现跨域报错，如下 blocked by CORS policy 云云 怎么办呢，网上探索了一下午，才找…...

编程日记 2024/8/22 8:35:51

使用Node-RED发送数据到巴法云

上一篇博文完成了Node-RED的安装，下面来尝试一下用Node-RED来发送数据到巴法云服务器。 我在教学用MQTT工具的思考-CSDN博客中说过，巴法云支持云云互联，可以连小米、百度，学生使用的兴趣高。所以今天先测试Node-RED和巴法云的连接…...

编程日记 2024/8/22 8:34:50

【今夕是何年】雅达利发布Atari 7800+游戏主机：配备无线手柄、HDMI接口

雅达利（Atari）发布了Atari 7800游戏主机，目前这款主机在其官方商城接受预定，售价129.99美元。Atari 7800游戏主机，作为Atari 7800系列的革新升级版本，搭载了高效的Rockchip 3128处理器，不仅确保…...

编程日记 2024/8/22 8:33:49

APP支付宝授权获取code uniapp

1.点击使用plus.runtime跳转打开支付宝 //打开支付宝授权，在支付宝APP中授权后会在支付宝中跳转到你填写的h5地址//urls是授权地址可以后端拼接也可以前端写死 //以下是一个拼接示例，需修改app_id的值和redirect_uri的值即可 //app_id是商户的APPID&…...

编程日记 2024/8/22 8:32:48

在Linux系统下安装、配置ETCD

在Linux系统下安装、配置ETCD（一个分布式键值存储系统）涉及多个步骤，包括下载、安装、配置、启动以及使用ETCD的常用命令。以下是对这些步骤的详细讲解，内容不少于2000字。 一、ETCD简介 ETCD是一个高可用的键值存储系统&#x…...

编程日记 2024/8/22 8:31:47

lambda 表达式可以传递引用为什么需要引用捕获

当 lambda 表达式被传递或存储在其他地方时，通过引用捕获可以确保它始终访问正确的外部变量。—— 引用捕获可以精确地控制被捕获的引用变量的作用域。如果一个 lambda 表达式被存储在一个容器中，并且在不同的时间点被调用，引用捕获可以确保它…...

编程日记 2024/8/22 8:30:45

【Java】/* 双向链表 - 底层实现 */

【难点】&#xff1a;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…...

编程日记 2024/8/22 8:28:43

Go 语言协程管理精解

1.基础 协程切换需要操作寄存器&#xff0c;这些操作需要通过汇编辅助实现。另外&#xff0c;每一个协程都有一个协程栈&#xff0c;实际上协程栈也是有结构的。汇编程序和栈结构这些概念可能大部分开发者都不太了解&#xff0c;在介绍协程管理之间&#xff0c;先简要介绍。 1…...

编程日记 2024/8/22 8:27:41

C库函数signal()信号处理

signal()是ANSI C信号处理函数&#xff0c;原型如下&#xff1a; #include <signal.h>typedef void (*sighandler_t)(int); sighandler_t signal(int signum, sighandler_t handler); signal()将信号signum的处置设置为handler&#xff0c;该handler为SIG_IGN&#xff…...

编程日记 2024/8/22 8:26:40

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…...

编程日记 2024/8/22 8:25:39

编译环境揭秘

不同平台因为偏好差异&#xff0c;编译环境的准备会有差异。对于MSVC&#xff0c;微软提供简单的VS安装界面&#xff0c;比较省心。在Ubuntu发行版&#xff0c;gcc/make等程序可能不自带&#xff0c;当需要安装这些软件时就需要不少命令。当然比较麻烦&#xff0c;提供了统一的…...

编程日记 2024/8/22 8:18:32

不同的字符集(ASCII、UTF-8、UTF-16/UCS-2、UTF-32/UCS-4)

来自&#xff1a;C标准库(第2版)...

编程日记 2024/8/22 8:16:30

STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(3)

STM32f407 网络接收 fpga 的 bin 文件并更新到 fpga series7(3) 简介 实验 3&#xff1a;在搭建好 tcp 服务器&#xff0c;并拟定好协议的前提下&#xff0c;接收每一个 bin 文件的块&#xff0c;配置到 fpga。 原理图 fpga fpga1 stm32 接线总结 // fpga引脚 stm32…...

编程日记 2024/8/22 8:15:29

JavaScript基础知识(七)

数组相关api再续前缘 arr.forEach(function) 对arr数组的每一项执行遍历操作,并且可以通过function来对相关元素进行二次操作 function: 函数,同时接收三个参数 - item: 数组中的每一项 - index: 数组每一项的下标(item的对应下标) - arr: 原数组 arr.map(function) 对数组的…...

编程日记 2024/8/22 8:14:28

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 百度&#xff1a;rk3588 buildroot exFAT mount: mounting /dev/mmcblk1p1 on /mnt failed: Invalid argument Disk /dev/mmcblk1: 955 GB, 10254234…...

编程日记 2024/8/22 8:13:28

Java HashMap练习

JDK1.2添加&#xff0c;线程不安全&#xff0c;性能相对较好 注意&#xff1a;允许使用null作为key或者value 使用数组加链表结构&#xff0c;结合数组和链表的优点 Hash Map的基本使用 package HashMap;import text5.Student;import java.util.Collection; import java.ut…...

编程日记 2024/8/22 8:10:25

前后端分离项目实战-通用管理系统搭建（前端Vue3+ElementPlus，后端Springboot+Mysql+Redis）第三篇：登录功能优化

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…...

编程日记 2024/8/22 8:08:23

8.20 Redis ACL配置 多个用户连接同一个Redis

**一、首先通过 linux命令 redis-cli 输入用户名和密码连接redis的客户端** **二、查看用户&#xff0c;创建用户&#xff0c;设置密码操作** &#xff08;1&#xff09;**ACL LIST** 命令 可以查看到当前的权限用户 &#xff08;2&#xff09;**ACL SETUSER userName** 此…...

编程日记 2024/8/22 8:07:22

【C语言】static和extern的作用

本文首发于 ❄️慕雪的寒舍 简单介绍C/C中static关键字和extern关键字的作用。 1.简介 在之前的博客中&#xff0c;提到过static的三个作用&#xff0c;但是没有详细说明这三个作用的场景&#xff0c;现在回过头来记录一下。 修饰函数修饰全局变量修饰函数内变量 static还有…...

编程日记 2024/8/22 8:06:21

PHP 的异步编程 该怎么选择

一切的起点&#xff1a;synchronized 的舒适区 刚开始写代码时&#xff0c;思维往往停留在"单机"模式。遇到需要控制并发的地方&#xff0c;直觉反应就是加个 synchronized 关键字。 1. 曾经写过的代码 // 简单的库存扣减 public synchronized void deductStock(Stri…...

编程新知 2026/3/28 1:35:46

深度学习中的优化器：原理与实践

深度学习中的优化器&#xff1a;原理与实践 一、背景与动机 在深度学习中&#xff0c;优化器是模型训练的核心组件&#xff0c;它决定了模型参数如何根据损失函数的梯度进行更新。选择合适的优化器对于模型的训练速度和最终性能至关重要。本文将深入探讨各种优化器的核心原理、…...

编程新知 2026/3/28 1:23:43

OpenRocket：模型火箭仿真的全流程技术解决方案

OpenRocket&#xff1a;模型火箭仿真的全流程技术解决方案 【免费下载链接】openrocket Model-rocketry aerodynamics and trajectory simulation software 项目地址: https://gitcode.com/GitHub_Trending/op/openrocket OpenRocket作为一款开源的模型火箭仿真软件&…...

编程新知 2026/3/28 0:33:28

R语言新手必看：clusterProfiler功能富集分析从安装到实战（附常见报错解决方案）

R语言实战&#xff1a;clusterProfiler功能富集分析全流程指南 第一次接触功能富集分析时&#xff0c;我被那些密密麻麻的基因列表和复杂的生物学术语搞得晕头转向。直到发现了clusterProfiler这个神器&#xff0c;它就像生物信息学分析中的瑞士军刀&#xff0c;把复杂的富集过…...

编程新知 2026/3/28 0:31:27

【收藏干货】IndexRAG：离线生成桥接事实，实现单次检索的多跳推理

plaintext IndexRAG: Bridging Facts for Cross-Document Reasoning at Index Timehttps://arxiv.org/pdf/2603.16415 ### 一、多跳QA的困境多跳问答&#xff08;Multi-hop QA&#xff09;要求模型跨越多篇文档进行推理&#xff0c;比如回答"电影Aylwin的导演出生在哪里&q…...

编程新知 2026/3/28 0:11:21

当多线雷达遇上RTK：一个能跑工业现场的SLAM方案

多传感器融合建图及定位的工程化落地方案&#xff0c;多线雷达rtk&#xff1b;室内室外导航都适用。 包含部署文档和代码注释&#xff1b;包含工程落地角度的优化。 不含运动控制。 室外场景用RTK信号稳如老狗&#xff0c;一进厂房立马抓瞎&#xff1b;多线雷达在室内横扫千军…...

编程新知 2026/3/27 21:52:01

高性能指纹特征提取开源方案：FingerJetFX OSE架构解析与实现指南

高性能指纹特征提取开源方案&#xff1a;FingerJetFX OSE架构解析与实现指南 【免费下载链接】FingerJetFXOSE Fingerprint Feature Extractor; the initial contribution by DigitalPersona is MINEX Compliant (SDK 3F). 项目地址: https://gitcode.com/gh_mirrors/fi/Fing…...

编程新知 2026/3/27 21:52:01

每日算法题 17---205.同构字符串

题目 205.同构字符串 要求 给定两个字符串 s 和 t &#xff0c;判断它们是否是同构的。如果 s 中的字符可以按某种映射关系替换得到 t &#xff0c;那么这两个字符串是同构的。每个出现的字符都应当映射到另一个字符&#xff0c;同时不改变字符的顺序。不同字符不能映射到同一…...

编程新知 2026/3/27 21:07:45

LangChainJS设计模式：可复用AI组件的架构思想

LangChainJS设计模式&#xff1a;可复用AI组件的架构思想 【免费下载链接】langchainjs 项目地址: https://gitcode.com/GitHub_Trending/la/langchainjs LangChainJS是一个用于构建LLM驱动应用程序的JavaScript/TypeScript框架&#xff0c;它通过可复用AI组件和设计模…...

编程新知 2026/3/27 20:43:38

STM32CubeMX+Keil MDK联合开发：手把手教你配置蓝桥杯G431工程模板

STM32CubeMXKeil MDK联合开发&#xff1a;手把手教你配置蓝桥杯G431工程模板 对于参加蓝桥杯嵌入式赛道的选手来说&#xff0c;掌握STM32G431RBT6开发板的快速工程搭建是必备技能。本文将带你从零开始&#xff0c;通过STM32CubeMX和Keil MDK的协同工作&#xff0c;完成一个标准…...

编程新知 2026/3/27 20:43:38