01.vue3大事件——项目初始化、技术介绍

后台数据管理系统 - 项目架构设计

在线演示:https://fe-bigevent-web.itheima.net/login

接口文档: https://apifox.com/apidoc/shared-26c67aee-0233-4d23-aab7-08448fdf95ff/api-93850835

接口根路径: http://big-event-vue-api-t.itheima.net

本项目的技术栈 本项目技术栈基于 ES6、vue3、pinia、vue-router 、vite 、axios 和 element-plus

前端技术栈

  • Vue3 compositionAPl
  • pnpm包管理升级
  • Pinia/Pinia持久化处理
  • Eslint+prettier更规范的配置
  • Element Plus(表单校验,表格处理,组件封装)
  • husky(Git hooks.工具)代码提交之前,进行校验
  • 请求模块设计
  • VueRouter4路由设计
  • AI大模型开发一整个项目模块(掌握最新的开发方式)

项目页面介绍

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

pnpm 包管理器 - 创建项目

一些优势:比同类工具快 2倍 左右(比yarn更快)、节省磁盘空间… https://www.pnpm.cn/

安装方式:

npm install -g pnpm

创建项目:

pnpm create vue    

在这里插入图片描述

选择需要的依赖:router、pinia、ESLint、prettier

ESLint & prettier 配置代码风格

环境同步:

  1. 安装了插件 ESlint,开启保存自动修复(在vue2课程中已经配置过了)
  2. 禁用插件 Prettier,并关闭保存自动格式化(我们使用的是通过包引入的Prettier插件,并不是vscode中的,所以下载过也禁用掉)
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {"source.fixAll": true
},
"editor.formatOnSave": false,

配置文件 .eslintrc.cjs(项目中的)

  1. prettier 风格配置 https://prettier.io

    1. 单引号

    2. 不使用分号

    3. 每行宽度至多80字符

    4. 不加对象|数组最后逗号

    5. 换行符号不限制(win mac 不一致)

  2. vue组件名称多单词组成(忽略index.vue)

  3. props解构(关闭)

  rules: {'prettier/prettier': ['warn',{singleQuote: true, // 单引号semi: false, // 无分号printWidth: 80, // 每行宽度至多80字符trailingComma: 'none', // 不加对象|数组最后逗号endOfLine: 'auto' // 换行符号不限制(win mac 不一致)}],'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue组件名称多单词组成(忽略index.vue)}],'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验// 💡 添加未定义变量错误提示,create-vue@3.6.3 关闭,这里加上是为了支持下一个章节演示。'no-undef': 'error'}

基于 husky 的代码检查工作流

husky 是一个 git hooks 工具 ( git的钩子工具,可以在特定时机执行特定的命令 )

检查提交到git的代码是否规范,不规范的代码不能提交,否则别人拉取后运行不了。

husky 配置(在项目终端输入,注意是bash终端)

  1. git初始化 git init

  2. 初始化 husky 工具配置 https://typicode.github.io/husky/

pnpm dlx husky-init && pnpm install
  1. 修改 .husky/pre-commit 文件

npm test修改为pnpm lint

pnpm lint

在bash终端执行:

git add 所提交文件   --将指定文件添加到暂存区
git add .        --将项目添加到暂存区
git commit -m '提交测试'  -- 或者通过侧边栏第三个VSC版本控制工具提交代码

问题:pnpm lint 默认进行的是全量检查,耗时问题,历史问题,同时也会尝试着帮我们进行修复,项目一旦大了,且别人没有进行规范校验,你执行该·命令就会非常耗时并且可能有很多错误。所以我们要学习暂存区eslint校验,这种方式只校验我们写的代码。

lint-staged 配置

  1. 安装
pnpm i lint-staged -D
  1. 配置 package.json
{"scripts": {// ... 省略 ..."lint-staged": "lint-staged"},// ... 省略 ..."lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}    
}
  1. 修改 .husky/pre-commit 文件
pnpm lint-staged

调整项目目录

默认生成的目录结构不满足我们的开发需求,所以这里需要做一些自定义改动。主要是两个工作:

  • 删除初始化的默认文件
  • 修改剩余代码内容
  • 新增调整我们需要的目录结构
  • 拷贝初始化资源文件,安装预处理器插件
  1. 删除文件

  2. 修改内容

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({//meta.env.BASE_URL可以在`vite.config.js`中进行配置:base,不配置默认为`/`,第二节有详细讲解history: createWebHistory(import.meta.env.BASE_URL), routes: []
})export default router

src/App.vue

<script setup></script><template><div><router-view></router-view></div>
</template><style scoped></style>

src/main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'const app = createApp(App)app.use(createPinia())
app.use(router)
app.mount('#app')
  1. 新增需要目录 api utils

在这里插入图片描述

  1. 将项目需要的全局样式 和 图片文件,复制到 assets 文件夹中, 并将全局样式在main.js中引入
import '@/assets/main.scss'
  • 安装 sass 依赖
pnpm add sass -D

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

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

相关文章

不能打电话的流量卡真的合法?一篇文章让你读懂这个问题!

不能打电话的流量卡合法吗&#xff1f;主要还是看你选择的流量卡类型了。 ​  市面上不能打电话的流量卡大致分为两种&#xff1a; 一种是不带手机号码的物联卡&#xff0c;企业设备采购的话是合法的&#xff0c;一般运营商在将物联卡发售给企业法人后&#xff0c;为每个企业…

工作流能实现自动化吗?应该用什么工具?

研究显示&#xff0c;CRM系统工作流自动化软件不仅能简化冗余的工作且不需要监控和指导就能提高员工的工作效率。企业需要工作流自动化软件吗&#xff1f;答案是肯定的&#xff0c;工作流自动化的好处有哪些&#xff1f; 为什么企业需要工作流自动化软件 每家企业都希望降本增…

项目启动出现白屏问题需要刷新后才能显示解决方案

Vue项目起始时出现白屏问题需要刷新后才能显示解决方案 项目加\<div>为什么页面会出现加载过慢问题&#xff1f;如何让页面变得更快懒加载静态资源缓存 Webpack解决方案减少Js冗余操作 项目加<div> 在vue中,我们常常会因为在template模板中没有加div标签而使得页面…

企业营销管理能够实现自动化吗?怎么做?

当今企业面临着越来越多的营销难题&#xff1a;如何有效培育潜在客户、如何提高营销活动的效果、如何优化营销资源的分配......企业的营销管理怎么做&#xff1f;或许CRM系统营销自动化会起到作用。 客户细分&#xff1a; 企业可以通过CRM的客户细分功能&#xff0c;根据客户…

C#文件夹基本操作(判断文件夹是否存在、创建文件夹、移动文件夹、删除文件夹以及遍历文件夹中的文件)

判断文件夹是否存在时&#xff0c;可以使用Directory类的Exists()方法或者DirectoryInfo类的Exists属性来实现。 一、判断文件夹是否存在 1.Directory类的Exists()方法 Exists()方法用于确定给定路径是否引用磁盘上的现有目录&#xff0c;语法如下。 public static bool Ex…

cesium雷达扫描圈

import * as Cesium from "cesium"; let lastStage""; // 圆扩散 export function showCircleScan(viewer,lon, lat,color,maxRadius,height) {var cartographicCenter new Cesium.Cartographic(Cesium.Math.toRadians(lon), Cesium.Math.toRadians(lat),…

内衣洗衣机和手洗哪个干净?最好用的迷你洗衣机

随着大家工作的压力越来越大&#xff0c;下了班之后只能想躺平&#xff0c;在洗完澡之后看着还需要手洗的内衣裤真的很头疼。有些小伙伴还有会攒几天再丢进去洗衣机里面一起&#xff0c;而且这样子是非常不好的&#xff0c;用过的内衣裤长时间不清洗容易滋生细菌&#xff0c;而…

单片机学习3——数码管

数码管&#xff0c;根据内部结构&#xff0c;可分为共阴极数码管和共阳极数码管。七段发光管加上一个小数点&#xff0c;共计8段。因此&#xff0c;我们对它编程的时候&#xff0c;刚好是用一个字节。 数码管的显示方式&#xff1a; 1&#xff09;静态显示&#xff1b; 2&…

QT网络协议知识体系(一)

//获取主机的名称和ip地址 //获取主机的所有信息

终于等到你!常用的组织架构图模板,高清图片一键导出

组织架构图是一种用来展示一个组织内部人员和职责关系的图表。通过组织架构图&#xff0c;我们可以清晰地了解一个组织的层级架构和各个部门之间的关系。在本文中&#xff0c;我们将向大家推荐8个常用的组织架构图模板&#xff0c;帮助你快速制作出专业的组织架构图。 1. 市场营…

【Android知识笔记】性能优化专题(二)

Android 内存泄漏原因总结 单例模式持有 Context 对象:由于单例的静态特性使得单例的生命周期和应用的生命周期一样长,如果一个对象已经不需要使用了,而单例对象还持有该对象的引用,那么这个对象将不能被正常回收,这就导致了内存泄漏。 非静态内部类创建的静态成员变量持有…

解决Linux Visual Studio Code显示字体有问题/Liunx下Visual Studio Code更换字体

01、具体问题 在Linux下VsCode控制台与代码区显示异常&#xff0c;如下图所示&#xff1a; 代码显示 终端显示 02、解决方案 下载字体 [rootlocalhost mhzzj]$ cd /usr/share/fonts # 进入目录 [rootlocalhost fonts]$ sudo yum install git # 下载字体 [rootlocalhost fo…

多种 React 组件通信方式实践

在React中&#xff0c;组件之间的通信是一个非常重要的话题。当我们构建复杂的应用程序时&#xff0c;经常需要不同的组件之间共享数据或者进行相互协作。React提供了几种方式来实现跨组件通信&#xff0c;下面我将详细其中几种通信方式&#xff0c;并提供实际的代码示例。 使…

React入门使用 (官方文档向 Part1)

文章目录 React组件:万物皆组件 JSX: 将标签引入 JavaScriptJSX 规则1. 只能返回一个根元素2. 标签必须闭合3. 使用驼峰式命名法给 ~~所有~~ 大部分属性命名&#xff01;高级提示&#xff1a;使用 JSX 转化器 在 JSX 中通过大括号使用 JavaScript使用引号传递字符串使用大括号&…

招投标信息可以用CRM系统来查看吗?

对于B2B企业来说获客难、获客成本高是共识。做大客户的企业通过招投标获取商机是一个重要获客途径&#xff0c;然而传统方式管理招投标信息问题很多&#xff0c;例如资料丢失、手工录入出错、信息分散、信息查找费时费力。为了解决这些难题小编推荐CRM系统&#xff0c;CRM系统需…

Java基础之集合类

Java基础之集合类 一、集合的框架1.1、集合概述1.2、集合与数组区别1.3、数组的缺点&#xff1a;1.4、常用集合分类1.5、Collection常用方法 二、List集合2.1、ArrayList2.2、LinkedList2.3、Vector2.4、区别 三、Set集合3.1、HashSet集合3.2、LinkedHashSet集合3.3、TreeSet集…

Qt 网络通信

获取本机网络信息 &#xff08;1&#xff09;在 .pro 文件中加入 QT network&#xff08;2&#xff09; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QDebug> #include <QLabel> #include <QLineEdit> #include <QPu…

C#中openFileDialog控件的使用方法

目录 一、OpenFileDialog基本属性 二、使用 OpenFile 从筛选的选择中打开文件 1.示例源码 2.生成效果 3. 其它示例 三、使用 StreamReader 以流的形式读取文件 1.示例源码 2.生成效果 四、一种新颖的Windows窗体应用文件设计方法 在C#中&#xff0c;OpenFileDialog控件…

vue3+tsx的使用

<template><div><xiaoman on-click"getItem" name"似懂非懂"></xiaoman></div> </template><script setup langts>import xiaoman from "./App"const getItem(item:any)>{console.log(item,it…

redis引发的一次生产事故,内存爆满

redis引发的一次生产事故 问题描述&#xff1a; 发版后回归测试&#xff0c;不定时出现token失效&#xff0c;导致自动退出到登录界面。如果操作的人员较多&#xff0c;token失效的就比较快&#xff0c;操作的人员较少token失效的相对较慢。 问题复现&#xff1a; 同一账号…