VITE+VUE3

初始化项目

设置浏览器自动打开项目(在package.json文件中)

"dev": "vite --open"

eslint配置

配置prettier

src文件夹别名配置

环境变量的配置

svg图标配置

<template>
  <div>
    <svg :style="{width,height}">
      <use :href="prefix+name" :fill="color"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    prefix: {
      type: String,
      default: '#icon-'
    },
    name: String,
    color: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '16px'
    },
    height: {
      type: String,
      default: '16px'
    },
  })
</script>

<style scoped>

</style>

入口处全局注册svg组件

// component文件夹下的index.ts文件
import SvgIcon from './SvgIcon/Index.vue'

const allGloableComponent = { SvgIcon }

export default {
  install(app) {
    Object.keys(allGloableComponent).forEach(key => {
      app.component(key, allGloableComponent[key])
    });
  }
}

scss 配置

mock接口

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default ({ command }) => {
  return {
    plugins: [
      vue(),
      viteMockServe({
        enable: command == 'serve'
      }),
      createSvgIconsPlugin({
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        symbolId: 'icon-[dir]-[name]',
      }),
    ],
    resolve: {
      alias: {
        "@": path.resolve("./src")
      }
    }
  }
}

function createUserList() {
  return [
    {
      userId: 1,
      avatar: '',
      username: 'admin',
      password: '111111',
      desc: '平台管理员',
      roles: ['平台管理员'],
      routes: ['home'],
      token: 'admin tokin'
    }
  ]
}

export default [
  {
    url: '/api/user/login',
    method: 'post',
    response: ({ body }) => {
      const { username, password } = body
      const checkUser = createUserList().find(item => item.username === username && item.password === password)
      if (!checkUser) {
        return {
          code: 201,
          data: {
            message: '账号或密码不正确'
          }
        }
      }

      const { token } = checkUser
      return {
        code: 200,
        data: {
          token
        }
      }
    }
  },
  {
    url: '/api/user/info',
    method: 'get',
    response: (request) => {
      const token = request.headers.token
      const checkUser = createUserList().find(item => item.token === token)
      if (!checkUser) {
        return {
          code: 201,
          data: {
            msg: '获取用户信息失败'
          }
        }
      }

      return {
        code: 200,
        data: {
          checkUser
        }
      }
    }
  }
]

axios封装

// /src/utils/request.ts
import axios from 'axios'
import { ElMessage } from 'element-plus'

let request = axios.create({
  baseURL: '/api',
  timeout: 5000
})

request.interceptors.request.use((config) => {
  return config
})

request.interceptors.response.use((response) => {
  // 成功回调
  // 简化数据
  return response.data
}, (error) => {
  // 失败回调：处理http网络错误
  let message = ''
  let status = error.response.status
  switch (status) {
    case 401:
      message = "TOKEN过期"
      break
    case 403:
      message = "无权访问"
      break
    case 404:
      message = "请求地址错误"
      break
    case 500:
      message = "服务器出现问题"
      break
    default:
      message = "网络出现问题"
      break
  }
  ElMessage({
    type: 'error',
    message
  })
  return Promise.reject(error)
})

export default request

import axios from 'axios'
import { ElMessage } from 'element-plus'

let request = axios.create({
  baseURL: '/api',
  timeout: 5000
})

request.interceptors.request.use((config) => {
  return config
})

request.interceptors.response.use((response) => {
  // 成功回调
  // 简化数据
  return response.data
}, (error) => {
  // 失败回调：处理http网络错误
  let message = ''
  let status = error.response.status
  switch (status) {
    case 401:
      message = "TOKEN过期"
      break
    case 403:
      message = "无权访问"
      break
    case 404:
      message = "请求地址错误"
      break
    case 500:
      message = "服务器出现问题"
      break
    default:
      message = "网络出现问题"
      break
  }
  ElMessage({
    type: 'error',
    message
  })
  return Promise.reject(error)
})


export function get(url: string, params: Object) {
  return request.get(url, { params });
}

export function post(url: string, data: any) {
  return request.post(url, data);
}

export function put(url: string, data: any) {
  return request.put(url, data);
}


export default {
  get,
  post,
  put
}

统一管理api接口

// src/api/user/index.ts
import request from '@/utils/request'
import { loginForm, loginResponseData, userResponseData } from './type'

// 统一管理接口
enum API {
  LOGIN_URL = '/user/login',
  USERINFO_URL = '/user/info'
}

//暴露请求函数
// 登录接口
export const reqLogin = (data: loginForm) => request.post<any, loginResponseData>(API.LOGIN_URL, data)


// 获取用户信息接口
export const reqUserInfo = () => request.get<any, userResponseData>(API.USERINFO_URL)

// /src/api/user/type.ts
// 登录接口需要携带的参数类型
export interface loginForm {
  username: string,
  password: string
}

interface dataType {
  token: string
}

// 登录接口返回数据类型
export interface loginResponseData {
  code: number,
  data: dataType
}


interface userInfo {
  userId: number,
  avatar: string,
  username: string,
  password: string,
  desc: string,
  roles: string[],
  routes: string[],
  token: string
}
// 服务器返回用户信息相关数据类型
interface user {
  checkUser: userInfo
}
export interface userResponseData {
  code: number,
  data: user
}

路由配置

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  scrollBehavior() {
    return {
      left: 0,
      top: 0
    }
  },
  routes: [
    {
      path: '/login',
      component: () => import('@/views/login/index.vue'),
      name: 'login'
    },
    {// 登录成功以后展示数据内容
      path: '/',
      component: () => import('@/views/home/index.vue'),
      name: 'home'
    },
    {
      path: '/404',
      component: () => import('@/views/404/index.vue'),
      name: '404'
    },
    {// 任意路由
      path: '/:pathMatch(.*)*',
      redirect: '/404',
      name: 'any'
    }
  ]
})
export default router

// main.ts
import router from './router'
app.use(router)