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

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】/* 双向链表 - 底层实现 */

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

Go 语言协程管理精解

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

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

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

编译环境揭秘

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

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

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

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

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

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

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

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

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

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

【C语言】static和extern的作用

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

小程序签名组件避坑指南:从米字格绘制到图片生成的完整流程

小程序签名组件开发实战&#xff1a;从米字格绘制到图片生成的深度解析 在小程序开发中&#xff0c;签名功能的需求日益增多&#xff0c;无论是电子合同签署、教育类应用的字帖练习&#xff0c;还是个性化签名设计&#xff0c;都需要一个稳定高效的签名组件。本文将深入探讨如何…...

CLAP Zero-Shot Audio Classification Dashboard部署教程:HTTPS反向代理配置(Nginx)保障生产环境访问安全

CLAP Zero-Shot Audio Classification Dashboard部署教程&#xff1a;HTTPS反向代理配置&#xff08;Nginx&#xff09;保障生产环境访问安全 1. 为什么需要HTTPS反向代理 当你成功部署了CLAP音频分类应用后&#xff0c;可能会发现直接通过HTTP访问存在一些安全问题。在生产环…...

告别手动标注!用RexUniNLU零样本模型自动提取电商评论情感

告别手动标注&#xff01;用RexUniNLU零样本模型自动提取电商评论情感 1. 电商评论分析的痛点与解决方案 电商平台每天产生海量用户评论&#xff0c;这些评论蕴含着宝贵的用户反馈和市场洞察。传统的情感分析方法通常面临两大难题&#xff1a; 标注成本高&#xff1a;需要大…...

香橙派OrangePi One到手必做:Linux系统首次启动自动扩容rootfs的保姆级验证指南

香橙派OrangePi One开箱指南&#xff1a;首次启动自动扩容rootfs的完整验证流程 第一次拿到香橙派开发板时&#xff0c;最让人困惑的莫过于如何确认系统是否成功利用了TF卡的全部空间。作为嵌入式Linux新手&#xff0c;我清楚地记得自己第一次启动OrangePi One时的忐忑——那些…...

深入解析BUCK、BOOST与Charge Pump电路的设计与应用

1. 开关电源基础&#xff1a;为什么需要BUCK、BOOST和Charge Pump&#xff1f; 刚入行那会儿&#xff0c;我总觉得电源设计就是个"变压器加整流桥"的事&#xff0c;直到某次项目里把12V电池直接怼到3.3V的MCU上——随着一缕青烟升起&#xff0c;我才明白电压转换这门…...

影墨·今颜效果实测:100张生成图中98.3%通过小红书内容审核标准

影墨今颜效果实测&#xff1a;100张生成图中98.3%通过小红书内容审核标准 1. 真实效果惊艳展示 「影墨今颜」作为基于FLUX.1-dev引擎的高端AI影像系统&#xff0c;在实际测试中展现出了令人印象深刻的效果表现。我们进行了严格的批量测试&#xff0c;生成100张不同风格的人像…...

告别重复造轮子,用快马ai一键生成tomcat高效开发工具集与配置模板

今天想和大家分享一个提升Tomcat开发效率的小技巧。作为一个经常和Tomcat打交道的开发者&#xff0c;我发现每次新建项目都要重复写一些基础工具类&#xff0c;特别浪费时间。最近在InsCode(快马)平台上尝试用AI生成了一套可复用的工具集&#xff0c;效果很不错。 数据库连接池…...

AI编程实战:如何用Cursor和Coze在1小时内完成文生图小程序开发

AI编程实战&#xff1a;如何用Cursor和Coze在1小时内完成文生图小程序开发 当产品灵感突然闪现&#xff0c;如何在最短时间内将它变成可交互的原型&#xff1f;传统开发流程中&#xff0c;从UI设计到API对接至少需要数天时间。而现在&#xff0c;借助AI编程工具链&#xff0c;我…...

保姆级教程:用Docker Compose一键部署带汉化和HTTPS的n8n,并配置反向代理(Nginx)

企业级n8n自动化平台全栈部署实战&#xff1a;从容器编排到安全加固 在数字化转型浪潮中&#xff0c;自动化工作流平台已成为企业降本增效的核心基础设施。n8n作为GitHub上增长最快的开源自动化工具之一&#xff0c;凭借其可视化编排能力和400节点生态&#xff0c;正在重塑企业…...

技术指标——格雷厄姆指数

文章目录1. 格雷厄姆指数是什么&#xff1f;2. 格雷厄姆指数的作用是什么&#xff1f;3. 举例计算例1&#xff1a;牛市顶部&#xff08;2021年2月&#xff09;例2&#xff1a;熊市底部&#xff08;2024年2月&#xff09;例3&#xff1a;中性水平&#xff08;假设某一般时刻&…...