Vite + Vue 3 前端项目实战

一、项目创建

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 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 开发服务器的主机、端口、自动打开浏览器以及代理设置，以解决跨域请求问题。

export default defineConfig({server: {host: "localhost", // 服务启动地址 默认： '127.0.0.1'port: 8888, // 服务启动端口 默认值： 3000https: 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是替换的关键字}}}
});

四、路径别名设置

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

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组件自动注册

插件安装

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

插件配置

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

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

插件配置

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

使用案例

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

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

[3] 路由安装

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

npm install vue-router

主文件app.vue

<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

// 从 '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") // 从本地存储中获取 tokenif (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安装

插件安装

 npm install axios

request封装

// request.js
import axios from "axios";
// 创建一个 Axios 实例
const service = axios.create({baseURL: "api/v1/",timeout: 5000, // 请求超时时间
});
// 请求拦截器
service.interceptors.request.use((config) => {// 可以在这里添加请求头，例如 Authorizationconst 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文件

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

使用示例

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

[5] SCSS预处理器

插件安装

npm add -D sass

案例：

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