欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 社会 > Vue3.0项目实战(一)——Vue3 大事件管理系统项目搭建

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

2024/10/30 12:38:01 来源:https://blog.csdn.net/weixin_56370772/article/details/141531123  浏览:    关键词: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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com