vue3标准化开发

pnpm安装

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

安装方式：npm install -g pnpm

创建项目：pnpm create vue
image

ESLint & prettier 配置代码风格

环境同步：

  1. 安装了插件 ESlint，开启保存自动修复
  2. 禁用了插件 Prettier，并关闭保存自动格式化
// 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解构（关闭）
    再根目录中的.eslintrc.cjs中配置

    // 1.禁用格式化插件 prettier  format on save 关闭
    // 2.安装Eslint 插件，并配置保存时自动修复，再setting中设置
  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 配置

  1. git初始化 git init

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

安装pnpm dlx husky-init && pnpm install
修改 .husky/pre-commit 文件
pnpm lint

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

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

调整项目目录

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

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

  1. 删除文件

  2. 修改内容

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 目录
image

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

VueRouter4 路由代码解析

官方文档：https://router.vuejs.org/zh/installation.html

安装：npm install vue-router@4

基础代码解析：

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), // 默认是/ 可以去vite.config.ts  添加配置  base
  routes: []
})

export default router // 对外暴露，在main.js中引入

路由监听

route 对象是一个响应式对象，所以它的任何属性都可以被监听，但你应该避免监听整个 route 对象。在大多数情况下，你应该直接监听你期望改变的参数。

import { useRoute } from 'vue-router'
import { ref, watch } from 'vue'


export default {
  setup() {
  // 获取路由参数
    const route = useRoute()
    const userData = ref()

    // 当参数更改时获取用户信息
    watch(
	// 监听路由参数的变化
      () => route.params.id,
      async newId => {
        userData.value = await fetchUser(newId)
      }
    )
  },
}

请注意，在模板中我们仍然可以访问 $router 和 $route，所以不需要在 setup 中返回 router 或 route。

导航守卫

// 引入 Vue Router 中的导航守卫钩子
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
// 引入 Vue Composition API 中的 ref 函数
import { ref } from 'vue'

export default {
  setup() {
    // 在组件设置阶段，使用 onBeforeRouteLeave 钩子
    onBeforeRouteLeave((to, from) => {
      // 在用户试图离开路由前执行的逻辑
      const answer = window.confirm(
        'Do you really want to leave? You have unsaved changes!'
      )
      // 如果用户点击取消，则阻止导航，保持在同一页面上
      if (!answer) return false
    })

    // 使用 ref 创建响应式数据 userData
    const userData = ref()

    // 使用 onBeforeRouteUpdate 钩子
    onBeforeRouteUpdate(async (to, from) => {
      // 仅当路由参数中的 id 发生变化时才获取用户数据
      if (to.params.id !== from.params.id) {
        // 使用 fetchUser 函数获取用户数据，这里是一个示例，你需要实现这个函数
        userData.value = await fetchUser(to.params.id)
      }
    })
  },
}

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

组件使用：

<script setup>
// 再Vue3 CompositionAPi中
// 1.获取路由对象 router，通过 useRouter
// 2.获取路由参数 route 通过useRoute
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()
<script >

<template>
{{$router.push('/xxxx')}} ------ {{$route.query.xxx}}
</template>

引入 element-ui 组件库

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

安装： pnpm add element-plus

自动按需：

  1. 安装插件
pnpm add -D unplugin-vue-components unplugin-auto-import
  1. 然后把下列代码插入到你的 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()]
    })
  ]
})

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

image

官方文档：https://prazdevs.github.io/pinia-plugin-persistedstate/zh/
安装插件 pinia-plugin-persistedstate
使用 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 使用

仓库 统一导出

- 现在：使用一个仓库 import { useUserStore } from ./stores/user.js 不同仓库路径不一致

- 优化：由 stores/index.js 统一导出，导入路径统一 ./stores，而且仓库维护在 stores/modules 中

stores/index.js文件如下：

import persist from 'pinia-plugin-persistedstate' // 引入 pinia 持久化插件
import { createPinia } from 'pinia'

const pinia = createPinia()
pinia.use(persist)
export default pinia

// import { useUserStore } from './modules/user'
// // 对外爆出
// export { useUserStore }
// 上诉的导出太过于麻烦，采用下列方法,下列方式等价于上面的两种结合
export * from './modules/user' // 相当于同时导入了user中的所有方法对外暴露

在main.js 中修改配置：

import pinia from '@/stores/index'
const app = createApp(App)
app.use(pinia)

组件使用：

// 这样就统一路径了
import { useUserStore } from '@/stores'

创建 axios 实例

官网：https://www.axios-http.cn/docs/instance

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

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

新建 utils/request.js 封装 axios 模块
利用 axios.create 创建一个自定义的 axios 来使用

基本的通用封装

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

完成 axios 基本配置

// 引入 Pinia 的 useUserStore 函数，用于获取用户仓库实例
import { useUserStore } from '@/stores/user'

// 引入 Axios 库
import axios from 'axios'

// 引入 Vue Router 对象
import router from '@/router'

// 引入 Element Plus 中的 Message 组件
import { ElMessage } from 'element-plus'

// 设置基础 URL
const baseURL = 'http://big-event-vue-api-t.itheima.net'

// 创建 Axios 实例
const instance = axios.create({
  baseURL, // 设置基础 URL
  timeout: 100000 // 设置请求超时时间
})

// 请求拦截器，用于在请求发起前添加处理逻辑
instance.interceptors.request.use(
  (config) => {
    // 使用 Pinia 的 useUserStore 函数获取用户仓库实例
    const userStore = useUserStore()

    // 如果用户存在 token，将其添加到请求头中
    if (userStore.token) {
      config.headers.Authorization = userStore.token
    }

    return config
  },
  // 请求发生错误时的处理逻辑
  (err) => Promise.reject(err)
)

// 响应拦截器，用于在响应后添加处理逻辑
instance.interceptors.response.use(
  // 响应成功时的处理逻辑
  (res) => {
    // 如果返回的数据 code 为 0，表示请求成功
    if (res.data.code === 0) {
      return res
    }

    // 否则，使用 Element Plus 的 Message 组件显示错误消息
    ElMessage({ message: res.data.message || '服务异常', type: 'error' })

    // 并返回一个带有错误信息的 Promise
    return Promise.reject(res.data)
  },
  // 响应发生错误时的处理逻辑
  (err) => {
    // 使用 Element Plus 的 Message 组件显示错误消息
    ElMessage({
      message: err.response.data.message || '服务异常',
      type: 'error'
    })

    // 在控制台输出错误信息
    console.log(err)

    // 如果响应状态码为 401（未授权），跳转到登录页面
    if (err.response?.status === 401) {
      router.push('/login')
    }

    // 并返回一个带有错误信息的 Promise
    return Promise.reject(err)
  }
)

// 导出 Axios 实例和基础 URL
export default instance
export { baseURL }
posted @   自学Java笔记本  阅读(53)  评论(0)  编辑  收藏  举报
相关博文：
· Vue项目demo
· Vue3中的Pinia
· vue3的基础用法
· 手把手教你—搭建Vue3企业级项目规范+基础封装配置
· [完整]流程解决Vue3项目搭建步骤
阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
· 上周热点回顾（2.24-3.2）
点击右上角即可分享
微信分享提示