Vite + Vue 3 前端项目实战

一、项目创建

bash 复制代码

npm install -g create-vite   #安装 Vite 项目的脚手架工具
# 或者使用yarn
yarn global add create-vite

#创建vite项目
create-vite my-vite-project

二、常用Vue项目依赖安装

|----------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| npm install unplugin-auto-import unplugin-vue-components | [[1] 安装按需自动导入组件](#npm install unplugin-auto-import unplugin-vue-components [1] 安装按需自动导入组件 npm i vite-plugin-vue-setup-extend -D [2] 扩展Vue组件中的setup函数的功能 npm install vue-router [3] 安装路由 npm install axios [4] 安装axios npm add -D sass [5] SCSS预处理器) |
| npm i vite-plugin-vue-setup-extend -D | [[2] 扩展Vue组件中的setup函数的功能](#npm install unplugin-auto-import unplugin-vue-components [1] 安装按需自动导入组件 npm i vite-plugin-vue-setup-extend -D [2] 扩展Vue组件中的setup函数的功能 npm install vue-router [3] 安装路由 npm install axios [4] 安装axios npm add -D sass [5] SCSS预处理器) |
| npm install vue-router | [[3] 安装路由](#npm install unplugin-auto-import unplugin-vue-components [1] 安装按需自动导入组件 npm i vite-plugin-vue-setup-extend -D [2] 扩展Vue组件中的setup函数的功能 npm install vue-router [3] 安装路由 npm install axios [4] 安装axios npm add -D sass [5] SCSS预处理器) |
| npm install axios | [[4] 安装axios](#npm install unplugin-auto-import unplugin-vue-components [1] 安装按需自动导入组件 npm i vite-plugin-vue-setup-extend -D [2] 扩展Vue组件中的setup函数的功能 npm install vue-router [3] 安装路由 npm install axios [4] 安装axios npm add -D sass [5] SCSS预处理器) |
| npm add -D sass | [[5] SCSS预处理器](#npm install unplugin-auto-import unplugin-vue-components [1] 安装按需自动导入组件 npm i vite-plugin-vue-setup-extend -D [2] 扩展Vue组件中的setup函数的功能 npm install vue-router [3] 安装路由 npm install axios [4] 安装axios npm add -D sass [5] SCSS预处理器) |

三、配置Vite

配置 Vite 开发服务器的主机、端口、自动打开浏览器以及代理设置，以解决跨域请求问题。

javascript 复制代码

export default defineConfig({
 server: {
  host: "localhost", // 服务启动地址 默认： '127.0.0.1'
  port: 8888, // 服务启动端口 默认值： 3000
  https: false,
  disableHostCheck: true, // 忽略host检查, 从而不会出现hot-reload失效
  open: true, // 启动时打开浏览器
  proxy: {
  // 跨域代理
   "/api": {
    // 请求接口，/api 是替换关键字，会替换api/* 目录下的请求接口函数中的url地址然后进行拼接
    target: 'https://xxxx/api',  // 实际请求的服务器地址 上面的 "/api" 在axios里就是指向这个实际的地址
    changeOrigin: true, // 是否允许跨域
    ws: false, // webStock 请求
    rewrite: (path) => path.replace(/^\/api/, ""), // 处理替换的函数 api是替换的关键字
   }
  }
 }
});

四、路径别名设置

配置模块解析选项中的路径别名，使得在项目中可以通过简写形式引用指定的目录。

json 复制代码

import { defineConfig } from "vite";// 导入 Vite 的配置定义函数，用于创建项目的配置对象
import { fileURLToPath } from 'url';// 从 Node.js 的 'url' 模块导入 'fileURLToPath' 函数，用于将文件的 URL 转换为本地文件系统路径
export default defineConfig({
 resolve: { // 配置模块解析选项
  alias: { // 配置路径别名
   '@': fileURLToPath(new URL('./src', import.meta.url))
    // '@' 别名指向 'src' 目录
    // 'fileURLToPath' 将 'URL' 转换为文件系统路径
    // 'new URL('./src', import.meta.url)' 创建一个指向 'src' 目录的 'file:' URL
    // 'import.meta.url' 是一个 ESM 特性，表示当前模块的 URL
  }
 },
})

⭐注释

[1] 自动导入和Vue组件自动注册

插件安装

bash 复制代码

npm install unplugin-auto-import unplugin-vue-components

插件配置

json 复制代码

import AutoImport from "unplugin-auto-import/vite"; //AutoImport 插件用于自动导入常用的库和模块;
import Components from "unplugin-vue-components/vite"; //Components 插件用于自动注册 Vue 组件。
export default defineConfig({
 plugins: [
  vue(), // 加载 Vue 插件
  VueSetupExtend(), // 启用 Vue setup 组件扩展插件
  AutoImport({
   resolvers: [],//自动导入
   imports: ["vue", "vue-router"], //自动导入
  }),
  Components({
   resolvers: [],
  }),
 ]
});

[2] Vue Setup 函数扩展插件

vite-plugin-vue-setup-extend 插件安装

bash 复制代码

npm i vite-plugin-vue-setup-extend -D

插件配置

javascript 复制代码

import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend(),
  ]
})

使用案例

html 复制代码

<script lang="ts" setup name="Person234"></script >

⭐提示：

当设置好以后，代码仍出现爆红问题，重启软件即可。

[3] 路由安装

路由相关以往文章有详细讲解→路由机制详解与实践

插件安装

bash 复制代码

npm install vue-router

主文件app.vue

html 复制代码

<template>
 <RouterLink to="/home" active-class="activeclass" class="active">首页</RouterLink>
 <RouterView></RouterView>
</template>

<script lang="ts" setup name="Person">
import { RouterLink, RouterView } from 'vue-router'
import { ref, reactive, watch, onMounted } from 'vue';
</script>

api.js

js 复制代码

// 从 'vue-router' 包中导入 createRouter、createWebHistory 和 RouteRecordRaw
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
// 从 'vue' 包中导入 App 类型
import { App } from 'vue'
// 导入布局组件
import Layout from '../pages/layout/index.vue';

// 定义路由配置数组
const routes: RouteRecordRaw[] = [
  {
    path: '/login', // 登录页面路径
    name: 'login', // 登录页面名称
    component: () => import('../pages/login/index.vue') // 动态导入登录页面组件
  },
  {
    path: '/Layout', // 布局页面路径
    name: 'Layout', // 布局页面名称
    component: Layout, // 布局页面组件
    redirect: '/applyMessage', // 重定向路径（未配置的子路径重定向到 '/applyMessage'）
    children: [
      {
        path: '/list', // 列表页面路径
        name: 'list', // 列表页面名称
        component: () => import('../pages/list/index.vue'), // 动态导入列表页面组件
      }
    ],
  },
]

// 创建路由实例
const router = createRouter({
  history: createWebHistory(), // 使用 HTML5 的 history 模式（去掉路径中的 '#')
  routes // 路由配置
})

// 添加路由导航守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem("token") // 从本地存储中获取 token
  if (token) { // 如果 token 存在
    // 如果用户访问的是登录页面，就直接跳转到布局页面
    console.log(to.name);
    if (to.name === 'login') {
      next({ name: 'Layout' }); // 跳转到布局页面
    } else {
      next(); // 继续导航
    }
  } else {
    next(); // 没有 token，直接继续导航
  }
})

// 导出初始化路由函数
export const initRouter = (app: App) => {
  app.use(router) // 将路由实例挂载到 Vue 应用
}

[4] axios安装

插件安装

bash 复制代码

 npm install axios

request封装

javascript 复制代码

// request.js
import axios from "axios";
// 创建一个 Axios 实例
const service = axios.create({
  baseURL: "api/v1/",
  timeout: 5000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 可以在这里添加请求头，例如 Authorization
    const token = localStorage.getItem("token");
    if (token) {
      config.headers["Authorization"] = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    // 处理请求错误
    console.error("Request error: ", error);
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response) => {
    // 处理响应数据
    return response.data;
  },
  (error) => {
    // 处理响应错误
    if (error.response) {
      // 请求已发送，服务器响应一个状态码，不在 2xx 范围内
      console.error("Response error: ", error.response);
      switch (error.response.status) {
        case 401:
          // 未授权，重定向到登录页面
          window.location.href = "/login";
          break;
        case 403:
          // 无权限
          console.log("您没有权限进行此操作");
          break;
        case 404:
          // 未找到
          console.log("请求的资源不存在");
          break;
        default:
          console.log("请求失败，请稍后重试");
      }
    } else if (error.request) {
      // 请求已发送但没有收到响应
      console.error("No response received: ", error.request);
      console.log("服务器无响应，请稍后重试");
    } else {
      // 设置请求时发生错误
      console.error("Request setup error: ", error.message);
      console.log("请求发送失败，请稍后重试");
    }
    return Promise.reject(error);
  }
);

export default service;

api文件

javascript 复制代码

import request from "./request";

// 定义请求函数
export function getWebHotlist(data) {
  return request({
    url: '/路径',
    method: "get",
    data,
  });
}

使用示例

js 复制代码

import { getWebHotlist } from './utils/api';
const fetchHotlist = async () => {
    const response = await getdata();
    console.error('接口返回数据:', response );
};

[5] SCSS预处理器

插件安装

bash 复制代码

npm add -D sass

案例：

html 复制代码

<style lang="scss">
	body {
 	 background: red;
	}
</style>