Vue3大事件管理系统

最新推荐文章于 2024-04-10 20:52:55 发布

伊人--

最新推荐文章于 2024-04-10 20:52:55 发布

阅读量351

点赞数

分类专栏： vue 文章标签： vue.js 前端

本文链接：https://blog.csdn.net/weixin_49827467/article/details/131740114

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Vue3大事件管理系统

Vue3大事件管理系统
- 1、包管理器pnpm
- - 2、Eslint配置代码风格
后台数据管理系统 - 项目架构设计

Vue3大事件管理系统

1、包管理器pnpm

pnpm是最新的包管理器；
通过 npm 安装 pnpm：

npm install -g pnpm

npm 命令	pnpm 等价命令
npm install	pnpm install
npm i 包名	pnpm add 包名
npm run dev	pnpm dev

创建项目

pnpm create vue

pnpm创建项目安装依赖
配置好需要安装的依赖后，根据提示往下进行；

2、Eslint配置代码风格

ESLint 的主要优势在于代码的风格检查并给出提示；
配置文件：.eslintrc.cjs

prettier风格配置；
是代码格式化，让代码格式更加美观；
在实际项目开发将 ESLint 结合 Prettier 一起使用。

出现这个错误：

ESlint:typeError:this.options.parse is not a function

解决：

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

在线演示：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

一、pnpm 包管理器 - 创建项目

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

安装方式：

npm install -g pnpm

创建项目：

pnpm create vue

二、ESLint & prettier 配置代码风格

环境同步：

安装了插件 ESlint，开启保存自动修复
禁用了插件 Prettier，并关闭保存自动格式化

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

配置文件 .eslintrc.cjs

prettier 风格配置 https://prettier.io
1. 单引号
2. 不使用分号
3. 每行宽度至多80字符
4. 不加对象|数组最后逗号
5. 换行符号不限制（win mac 不一致）
vue组件名称多单词组成（忽略index.vue）
props解构（关闭）

jsx
  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的钩子工具，可以在特定时机执行特定的命令 )
代码提交到仓库之前进行检查；
husky 配置

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

pnpm dlx husky-init && pnpm install

修改 .husky/pre-commit 文件

npm test 改成 pnpm lint

提交到本地仓库时会进行检测；

**问题：**默认进行的是全量检查，会有耗时问题，历史问题。

暂存区ESlint校验；——lint-staged 配置

安装

pnpm i lint-staged -D

配置 package.json

{
  // ... 省略 ...
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
}

{
  "scripts": {
    // ... 省略 ...
    "lint-staged": "lint-staged"
  }
}

修改 .husky/pre-commit 文件

pnpm lint-staged

总结：关于代码的检查工作；

编写代码时使用ESLint + prettri 进行代码的格式化；
在把代码提交到仓库是进行检查，避免出现不规范代码影响到整个仓库；
更新：在暂存区去检查你自己更改的代码的错误，是为了从仓库中拉取的新项目代码有错误，进而影响自己代码的编写；保证自己代码的正确性；

三、调整项目目录

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

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

删除文件
修改内容

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 ， axios请求的一些apI文件
utils, 自己封装好的工具函数

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

import '@/assets/main.scss'

安装 sass 依赖

pnpm add sass -D

四、VueRouter4 路由代码解析

基础代码解析

import { createRouter, createWebHistory } from 'vue-router'

// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory()   http://xxx/user
// 2. hash模式: createWebHashHistory()  http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path

// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: []
})

export default router

import.meta.env.BASE_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html

组件中，组合式API setup函数中this指向是undefind;
所以想要使用 router，或者路由参数route需要以下两个步骤：

引入import { useRoute, useRouter } from 'vue-router'
创建实例const route = useRoute(); const router = useRouter();
使用

const goList = () => {
  router.push('/list');
};

如果是在模版中可以直接使用；

五、引入 element-ui 组件库

官方文档： https://element-plus.org/zh-CN/

安装

$ pnpm add element-plus

自动按需：

安装插件

pnpm add -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 或 Webpack 的配置文件中

...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    ...
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ]
})

直接使用

<template>
  <div>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
    ...
  </div>
</template>

就可以使用了；
**彩蛋：**默认 components 下的文件也会被自动注册~

六、Pinia - 构建用户仓库和持久化

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/

构建用户仓库

安装插件 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

import { defineStore } from 'pinia'
import { ref } from 'vue'

// 用户模块
export const useUserStore = defineStore(
  'big-user',
  () => {
    const token = ref('') // 定义 token
    const setToken = (t) => (token.value = t) // 设置 token

    return { token, setToken }
  },
  {
    persist: true // 持久化
  }
)

Pinia - 配置仓库统一管理

pinia 独立维护

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

src/stores/index.js

import { createPinia } from 'pinia';
import persist from 'pinia-plugin-persistedstate';
const pinia = createPinia().use(persist);
export default pinia;

配置 main.js

import pinia from './stores';
app.use(pinia);

仓库统一导出

现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致
优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中
比如说有两个仓库user,counter,为了在组件引用时使用同一个路径；src/stores/modules/user.js
src/stores/modules/counter.js

那么就把src/stores/index.js 当做是唯一的出口路径，做法是：

export * from './modules/counter';
export * from './modules/user';

在组件当中使用：

import { useCounterStore, useUserStore } from '@/stores';

说明：

export * from './modules/counter';

等价于：

import useCounterStore from './modules/counter';
export default useCounterStore;

七、数据交互 - 请求工具设计

1. 创建 axios 实例

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

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

安装 axios

pnpm add axios

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

利用 axios.create 创建一个自定义的 axios 来使用

https://www.axios-http.cn/docs/intro

import axios from 'axios'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  // TODO 1. 基础地址，超时时间
})

instance.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    return res
  },
  (err) => {
    // TODO 5. 处理401错误
    return Promise.reject(err)
  }
)

export default instance

2. 完成 axios 基本配置

import { useUserStore } from '@/stores/user'
import axios from 'axios'
import router from '@/router'
import { ElMessage } from 'element-plus'

const baseURL = 'http://big-event-vue-api-t.itheima.net'

const instance = axios.create({
  baseURL,
  timeout: 100000
})

instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

instance.interceptors.response.use(
  (res) => {
	    if (res.data.code === 0) {
	      return res
	    }
	    ElMessage({ message: res.data.message || '服务异常', type: 'error' })
	    return Promise.reject(res.data)
	  },
	  (err) => {
	    ElMessage({ message: err.response.data.message || '服务异常', type: 'error' })
	    console.log(err)
	    if (err.response?.status === 401) {
	      router.push('/login')
	    }
    return Promise.reject(err)
  }
)

export default instance
export { baseURL }

请求拦截器

header里面放Authorization，就是为了验证用户身份。

Authorization里面放的就是token，就相当于每次发送请求的时候，拦截器都会拦截一次你的请求，来验证请求的token与储存的token是否是一致的。config.headers.Authorization = userStore.token
如果一致会把当前请求放行，
如果不一致那么服务器会截断你的请求并把错误码返给前端，让前端验证身份重新登陆

instance.interceptors.request.use(
  (config) => {
    const userStore = useUserStore()
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }
    return config
  },
  (err) => Promise.reject(err)
)

八、首页整体路由设计

实现目标:

完成整体路由规划【搞清楚要做几个页面，它们分别在哪个路由下面，怎么跳转的…】
通过观察, 点击左侧导航, 右侧区域在切换, 那右侧区域内容一直在变, 那这个地方就是一个路由的出口
我们需要搭建嵌套路由

目标：

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

约定路由规则

path	文件	功能	组件名	路由级别
/login	views/login/LoginPage.vue	登录&注册	LoginPage	一级路由
/	views/layout/LayoutContainer.vue	布局架子	LayoutContainer	一级路由
├─ /article/manage	views/article/ArticleManage.vue	文章管理	ArticleManage	二级路由
├─ /article/channel	views/article/ArticleChannel.vue	频道管理	ArticleChannel	二级路由
├─ /user/profile	views/user/UserProfile.vue	个人详情	UserProfile	二级路由
├─ /user/avatar	views/user/UserAvatar.vue	更换头像	UserAvatar	二级路由
├─ /user/password	views/user/UserPassword.vue	重置密码	UserPassword	二级路由

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

伊人--

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue3大事件管理系统

Authorization里面放的就是token，就相当于每次发送请求的时候，拦截器都会拦截一次你的请求，来验证请求的token与储存的token是否是一致的。优化：由 stores 统一维护，在 stores/index.js 中完成 pinia 初始化，交付 main.js 使用。初始化 husky 工具配置 https://typicode.github.io/husky/现在：初始化代码在 main.js 中，仓库代码在 stores 中，代码分散职能不单一。
复制链接

扫一扫