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

本项目的技术栈 本项目技术栈基于:

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 模块

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. 携带token
    const 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

  • 16
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值