Vue3项目开发——新闻发布管理系统(一)

news/2024/10/15 19:12:09/

文章目录

  • 一、项目要实现的功能
  • 二、项目用到的技术栈
  • 三、项目创建
    • 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快了近两倍,在磁盘空间的使用上也比


http://www.ppmy.cn/news/1512568.html

相关文章

使用 Charles 模拟手机弱网测试

在移动互联网时代,网络状况的不确定性给应用程序带来了挑战。尤其是在偏远地区或信号不佳的地方,用户的网络连接可能会变得不稳定。因此,对应用程序进行弱网测试变得尤为重要。Charles Proxy 是一款广泛使用的网络调试工具,它不仅…

书籍推荐:大数据之路 阿里巴巴大数据实践

书籍推荐:大数据之路 阿里巴巴大数据实践 这本书侧重于理论知识,并结合了阿里大数据发展的过程,将知识总结起来。总的来所,书中的有些章节个人感觉非常不错,比如:数据仓库建模;但是大部分章节都…

c#中的ManuaResetEvent

在C#中,ManualResetEvent 是一个同步事件,用于线程间通信。它允许一个或多个等待的线程等待某个事件的发生。当事件被设置为已发生(或称为“信号”)状态时,所有等待的线程都会被释放,并且可以继续执行。 以…

ansible初使用与http原理

文章目录 1.编写playbook实现nginx的安装过程,通过变量的方式传入2.http协议版本和工作原理3.IO模型和零复制技术的原理 1.编写playbook实现nginx的安装过程,通过变量的方式传入 环境:三台centos主机10.0.0.3为ansible-server 10.0.0.4与10.…

python 可迭代,迭代器,生成器,装饰器

1. 可迭代(Iterable) 可迭代 是指一个对象可以返回一个迭代器的对象。也就是说,它实现了 __iter__() 方法或 __getitem__() 方法。常见的可迭代对象有列表、元组、字符串、字典和集合。 from collections.abc import Iterablei 100 s &qu…

MySQL中处理JSON数据一文即可入门

MySQL从5.7版本开始原生支持JSON数据类型,使得在数据库中存储和查询JSON数据变得更加方便和高效。下面将介绍如何在MySQL中处理JSON数据,包括如何存储、查询和修改JSON数据。 1. 创建包含JSON列的表 首先,你需要创建一个表,该表…

招商期货:以超融合支撑期货重要业务,承载80%信创系统

招商期货有限公司(以下简称“招商期货”)成立于 1993 年,是招商证券股份有限公司的全资子公司,注册资本 35.98 亿元,是中国首批券商全资控股期货公司。 随着数字化进程快速推进、交易模式不断创新,系统建设…

Postman断言

目录 概述 断言工作原理 常用断言方法 Status code: Code is 200 Status code: Successful POST request Status code: Code name has string Response body: Contains string Response body: JSON value check Response body: ls equal to a string Response headers…