Vue3实战项目拓展

项目安装：

pnpm create vue
# or
npm init vue@latest
# or
yarn create vue

1.移动端适配（使用vant）

npm i amfe-flexible

2.在main.js中加载执行该模块

import 'amfe-flexible'

3.安装postcss-pxtorem依赖：

yarn add -D postcss-pxtorem
或者是
npm install postcss-pxtorem -D
这里解释一下：# -D 是 --save-dev 的简写 把依赖包的版本信息写进 package.json 文件里面

4.在根目录下新建 postcss.config.js 文件

module.exports = {
    plugins: {
        // postcss-pxtorem 插件的版本需要 >= 5.0.0
        // 适用版本 5.1.1
        // yarn add -D postcss-pxtorem@5.1.1
        // npm install postcss-pxtorem@5.1.1 -D
        'postcss-pxtorem': {
            rootValue({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小
                // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750
                return file.indexOf('vant') !== -1 ? 37.5 : 75;
            },
            // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化
            propList: ['*'],
        },
    },
};

pinia持久化存储

1. 安装

pnpm i pinia-plugin-persistedstate
# or
npm i pinia-plugin-persistedstate
# or
yarn add pinia-plugin-persistedstate

2. 在创建pinia实例化对象的地方引入该插件，例如mian.js

import persist from 'pinia-plugin-persistedstate'
const app = createApp(App)

app.use(createPinia().use(persist))

3.配置

import type { User } from '@/types/user'
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useUserStore = defineStore(
  'cp-user',
  () => {
    // 用户信息
    const user = ref<User>()
    // 设置用户，登录后使用
    const setUser = (u: User) => {
      user.value = u
    }
    // 清空用户，退出后使用
    const delUser = () => {
      user.value = undefined
    }
    return { user, setUser, delUser }
  },
  {
    persist: true
  }
)

4.使用

<script setup lang="ts">
import { useUserStore } from './stores/user'


const store = useUserStore()
</script>


<template>
  <p>{{ store.user }}</p>
  <button @click="store.setUser({ id: '1', mobile: '1', account: '1', avatar: '1', token: '1' })">
    登录
  </button>
  <button @click="store.delUser()">退出</button>
</template>

请求相关配置以及路由回跳

import axios from "axios"
import { useUserStore } from '@/stores'
import router from '@/router'
import { showToast } from 'vant'
// 基础配置
const instance = axios.create({
    baseURL: 'https://consult-api.itheima.net/',
    timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
    (config) => {
        // 携带token
        // 在拦截器中使用,因为在模块中的话,store可能还没初始化
        const store = useUserStore()
        if (store.user?.token && config.headers) {
            config.headers['Authorization'] = `Bearer ${store.user?.token}`
        }
        return config
    },
    (err) => Promise.reject(err)
)

// 响应拦截器
instance.interceptors.response.use(
    (res) => {
        // 后台约定
        if (res.data?.code !== 10000) {
            showToast(res.data?.message || '业务失败')
            return Promise.reject(res.data)
        }
        // 业务成功,返回响应数据
        return res.data
    },
    (err) => {
        if (err.response.status === 401) {
            // 删除用户信息
            const store = useUserStore()
            store.delUser()
            // 跳转登录,带上接口失效所在页面的地址,登录完成后回跳使用
            router.push({
                path: "/login",
                query: {
                    // returnUrl 是作为查询参数传递的键,router.currentRoute.value.fullPath
                    // 则是获取当前路由的完整路径作为其值
                    returnUrl: router.currentRoute.value.fullPath
                }
            })
        }
        return Promise.reject(err)
    }
)

// 其他模块要使用 baseURL
export { baseURL, instance }

其中要注意，接口返回状态为 401 时，表示需要登录，跳转登录后，需要回跳，则需要 router.currentRoute.value.fullPath 获取当前路由的完整路径作为他的值 来回跳

自动按需导入插件

1.安装

# 通过 npm 安装
npm i unplugin-vue-components -D
# 通过 yarn 安装
yarn add unplugin-vue-components -D
# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

2.在vite.config.js中配置

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  plugins: [
    vue(),
    // 自动导入的插件，解析器可以是 vant element and-vue 
    Components({
      // 不自动开启声明文件
      dts: false,
      // 原因：Toast Confirm 这类组件的样式还是需要单独引入，样式全局引入了，关闭自动引入
      resolvers: [VantResolver({ importStyle: false })]
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

图标组件封装SVG

1.安装插件

yarn add vite-plugin-svg-icons -D
# or
npm i vite-plugin-svg-icons -D
# or
pnpm install vite-plugin-svg-icons -D

2. 使用插件，在 vite.config.ts 中配置

import { VantResolver } from 'unplugin-vue-components/resolvers'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    Components({
      dts: false,
      resolvers: [VantResolver({ importStyle: false })]
    }),
+    createSvgIconsPlugin({
+      // 指定图标文件夹，绝对路径（NODE代码）
+      iconDirs: [path.resolve(process.cwd(), 'src/icons')]
+    })
  ],

3.在 main.js 中导入配置

+import 'virtual:svg-icons-register'

4.封装SVG组件

在components/CpIcon.vue

<script setup lang="ts">
// 提供name属性即可
defineProps<{
  name: string
}>()
</script>

<template>
  <svg aria-hidden="true" class="cp-icon">
    <use :href="`#icon-${name}`" />
  </svg>
</template>

<style lang="scss" scoped>
.cp-icon {
  // 和字体一样大
  width: 1em;
  height: 1em;
}
</style>