Vue3.0项目实战(一)——Vue3 大事件管理系统项目搭建

本文主要是介绍Vue3.0项目实战(一)——Vue3 大事件管理系统项目搭建,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1. 大事件项目介绍和创建

1.1 Vue3 大事件管理系统

1.2 pnpm 包管理器 - 创建项目

1.3 创建项目

2. Eslint 配置代码风格

2.1 环境同步

2.2 Eslint 配置代码风格

3. 基于 husky 的代码检查工作流

3.1 提交前做代码检查

3.2 暂存区 eslint 校验

3.3 总结

4. 目录调整

4.1 目录调整

5. vue-router4 路由代码解析

5.1 路由初始化

5.2 组件内使用路由

6. 引入 Element Plus 组件库

6.1 按需引入 Element Plus

7. Pinia 构建仓库和持久化

8. Pinia - 配置仓库统一管理

9. 数据交互 - 请求工具设计

9.1 创建 axios 实例

9.2 完成 axios 基本配置

10. 首页整体路由设计


1. 大事件项目介绍和创建

1.1 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

1.2 pnpm 包管理器 - 创建项目

一些优势:

  • 比同类工具快2倍左右、节省磁盘空间... https://www.pnpm.cn/
安装方式:
  • npm install -g pnpm
创建项目:
  • pnpm create vue

1.3 创建项目

2. Eslint 配置代码风格

2.1 环境同步

  • 安装了插件 ESlint,开启保存自动修复

  • 禁用了插件 Prettier,并关闭保存自动格式化

// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {"source.fixAll": true
},
"editor.formatOnSave": false,

2.2 Eslint 配置代码风格

配置文件 .eslintrc.cjs
① prettier 风格配置 https://prettier.io
  • 单引号
  • 不使用分号
  • 宽度80字符
  • 不加对象|数组最后逗号
  • 换行符号不限制(win mac 不一致)
② vue组件名称多单词组成(忽略index.vue)
③ props解构(关闭)
提示
  • 安装Eslint且配置保存修复,不要开启默认的自动保存格式化

3. 基于 husky 的代码检查工作流

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

3.1 提交前做代码检查

① 初始化 git 仓库,执行 git init 即可
② 初始化 husky 工具配置,执行 pnpm dlx husky-init && pnpm install 即可
  • https://typicode.github.io/husky/
③ 修改 .husky/pre-commit 文件
问题:
  • pnpm lint 是全面检查,耗时问题,历史问题。

3.2 暂存区 eslint 校验

① 安装 lint-staged 包
  • pnpm i lint-staged -D
② package.json 配置 lint-staged 命令
③ .husky/pre-commit 文件修改

3.3 总结

  • 如何在 git commit 前执行 eslint 检查?
    • 使用 husky 这个 git hooks 工具
  • 如何只检查暂存区代码?
    • 使用 lint-staged 工具

4. 目录调整

4.1 目录调整

默认生成的目录结构不满足我们的开发需求,所以这里需要做一些自定义改动。
主要是以下工作:
  • 删除一些初始化的默认文件
  • 修改剩余代码内容
  • 新增调整我们需要的目录结构
  • 拷贝全局样式和图片,安装预处理器支持

① 删除文件

② 修改内容

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'const router = createRouter({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')

③ 新增需要目录 api、utils

④ 将项目需要的全局样式 和 图片文件,复制到 assets 文件夹中, 并将全局样式在main.js中引入

  • import '@/assets/main.scss'
  • 安装 sass 依赖
    • pnpm add sass -D

5. vue-router4 路由代码解析

5.1 路由初始化

  • 创建路由实例由 createRouter 实现
  • 路由模式
    • history 模式使用 createWebHistory()
    • hash 模式使用 createWebHashHistory()
    • 参数是基础路径,默认/

5.2 组件内使用路由

创建一个路由实例,路由模式是 history 模式,路由的基础地址是 vite.config.js中的 base 配置的值, 默认是 / , import.meta.env.BASE_URL 是 Vite 环境变量

环境变量地址: https://cn.vitejs.dev/guide/env-and-mode.html

6. 引入 Element Plus 组件库

6.1 按需引入 Element Plus

① 安装:
  • pnpm add element-plus
② 配置按需导入:
  • 官方文档:https://element-plus.org/zh-CN/guide/quickstart.html

③ 直接使用组件
④ 彩蛋:
  • 默认 components 下的文件也会被 自动注册~

7. Pinia 构建仓库和持久化

官方文档:Home | pinia-plugin-persistedstate

① 安装插件 pinia-plugin-persistedstate  

  • pnpm add pinia-plugin-persistedstate -D

② 使用 main.js

  • import persist from 'pinia-plugin-persistedstate'
  • app.use(createPinia().use(persist))

③ 配置 stores/user.js

  • persist: true

8. Pinia - 配置仓库统一管理

pinia 独立维护
现在:
  • 初始化代码在 main.js 中,仓库代码在 stores 中,代码分散职能不单一
优化:
  • stores 统一维护,在 stores/index.js 中完成 pinia 初始化,交付 main.js 使用

stores/index.js:

main.js

仓库 统一导出
现在:
  • 使用一个仓库 import { useUserStore } from `./stores/user.js` 不同仓库路径不一致
优化:
  • stores/index.js 统一导出,导入路径统一 `./stores`,而且仓库维护在 stores/modules

9. 数据交互 - 请求工具设计

9.1 创建 axios 实例

使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)

一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用

① 安装 axios

  • pnpm add axios

② 新建 utils/request.js 封装 axios 模块

  • 利用 axios.create 创建一个自定义的 axios 来使用
  • axios中文文档|axios中文网 | axios

9.2 完成 axios 基本配置

import axios from 'axios'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'
import router from '@/router/index.js'
const baseURL = 'http://big-event-vue-api-t.itheima.net'const instance = axios.create({// TODO 1. 基础地址和超时时间baseURL,timeout: 100000
})// 请求拦截器
instance.interceptors.request.use((config) => {// TODO 2. 携带tokenconst userStore = useUserStore()if (userStore.token) {config.headers.Authorization = userStore.token}return config},(err) => Promise.reject(err)
)
// 响应拦截器
instance.interceptors.response.use((res) => {// TODO 4. 摘取核心响应数据if (res.data.code === 0) {return res}// TODO 3. 处理业务失败ElMessage.error(res.data.message || '服务异常')return Promise.reject(res.data)},(err) => {// TODO 5. 处理401错误// 错误的特殊情况 => 401 权限不足或 token 过期 => 拦截登录if (err.response && err.status === 401) {router.push('/login')}// 错误默认情况 => 只要给提示ElMessage.error(err.response.data.message || '服务异常')return Promise.reject(err)}
)export default instance

10. 首页整体路由设计

实现目标:

  • 完成整体路由规划【搞清楚要做几个页面,它们分别在哪个路由下面,怎么跳转的.....】

  • 通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口

  • 我们需要搭建嵌套路由

目标:

  • 把项目中所有用到的组件及路由表, 约定下来

明确了路由规则,可以全部配完,也可以边写边配。

import { createRouter, createWebHistory } from 'vue-router'
import LoginPage from '@/views/login/LoginPage.vue'
import LayoutContainer from '@/views/layout/LayoutContainer.vue'
import ArticleManage from '@/views/article/manage/ArticleManage.vue'
import ArticleChannel from '@/views/article/channel/ArticleChannel.vue'
import UserAvatar from '@/views/user/avatar/UserAvatar.vue'
import UserPassword from '@/views/user/password/UserPassword.vue'
import UserProfile from '@/views/user/profile/UserProfile.vue'
// createRouter 创建路由实例
// 配置 history 模式
//  1. history 模式:createWebHistory 地址栏不带 #
//  2. hash 模式:createWebHahsHistory 地址栏带 #// vite 中的环境变量 import.meta.env.BASE_URL 就是vite.config.js 中的 base 配置对象
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: [{path: '/login',component: LoginPage},{path: '/',component: LayoutContainer,redirect: '/article/manage',children: [{path: 'article/manage',component: ArticleManage},{path: 'article/channel',component: ArticleChannel},{path: 'user/profile',component: UserProfile},{path: 'user/avatar',component: UserAvatar},{path: 'user/password',component: UserPassword}]}]
})export default router

这篇关于Vue3.0项目实战(一)——Vue3 大事件管理系统项目搭建的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1107528

相关文章

Python办公自动化实战之打造智能邮件发送工具

《Python办公自动化实战之打造智能邮件发送工具》在数字化办公场景中,邮件自动化是提升工作效率的关键技能,本文将演示如何使用Python的smtplib和email库构建一个支持图文混排,多附件,多... 目录前言一、基础配置:搭建邮件发送框架1.1 邮箱服务准备1.2 核心库导入1.3 基础发送函数二、

PowerShell中15个提升运维效率关键命令实战指南

《PowerShell中15个提升运维效率关键命令实战指南》作为网络安全专业人员的必备技能,PowerShell在系统管理、日志分析、威胁检测和自动化响应方面展现出强大能力,下面我们就来看看15个提升... 目录一、PowerShell在网络安全中的战略价值二、网络安全关键场景命令实战1. 系统安全基线核查

从原理到实战深入理解Java 断言assert

《从原理到实战深入理解Java断言assert》本文深入解析Java断言机制,涵盖语法、工作原理、启用方式及与异常的区别,推荐用于开发阶段的条件检查与状态验证,并强调生产环境应使用参数验证工具类替代... 目录深入理解 Java 断言(assert):从原理到实战引言:为什么需要断言?一、断言基础1.1 语

深度解析Java项目中包和包之间的联系

《深度解析Java项目中包和包之间的联系》文章浏览阅读850次,点赞13次,收藏8次。本文详细介绍了Java分层架构中的几个关键包:DTO、Controller、Service和Mapper。_jav... 目录前言一、各大包1.DTO1.1、DTO的核心用途1.2. DTO与实体类(Entity)的区别1

Java MQTT实战应用

《JavaMQTT实战应用》本文详解MQTT协议,涵盖其发布/订阅机制、低功耗高效特性、三种服务质量等级(QoS0/1/2),以及客户端、代理、主题的核心概念,最后提供Linux部署教程、Sprin... 目录一、MQTT协议二、MQTT优点三、三种服务质量等级四、客户端、代理、主题1. 客户端(Clien

在Spring Boot中集成RabbitMQ的实战记录

《在SpringBoot中集成RabbitMQ的实战记录》本文介绍SpringBoot集成RabbitMQ的步骤,涵盖配置连接、消息发送与接收,并对比两种定义Exchange与队列的方式:手动声明(... 目录前言准备工作1. 安装 RabbitMQ2. 消息发送者(Producer)配置1. 创建 Spr

深度解析Spring Boot拦截器Interceptor与过滤器Filter的区别与实战指南

《深度解析SpringBoot拦截器Interceptor与过滤器Filter的区别与实战指南》本文深度解析SpringBoot中拦截器与过滤器的区别,涵盖执行顺序、依赖关系、异常处理等核心差异,并... 目录Spring Boot拦截器(Interceptor)与过滤器(Filter)深度解析:区别、实现

如何在Spring Boot项目中集成MQTT协议

《如何在SpringBoot项目中集成MQTT协议》本文介绍在SpringBoot中集成MQTT的步骤,包括安装Broker、添加EclipsePaho依赖、配置连接参数、实现消息发布订阅、测试接口... 目录1. 准备工作2. 引入依赖3. 配置MQTT连接4. 创建MQTT配置类5. 实现消息发布与订阅

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实