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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/847799.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python | 试卷刷题and基础笔记

1.下列转义字符中&#xff0c; 属于“回车”含义的是 \n 换行 \r 回车 2.for循环遍历字典 在Python中&#xff0c;你可以使用for循环来遍历字典的键&#xff08;keys&#xff09;、值&#xff08;values&#xff09;或者键-值对&#xff08;items&#xff09;。下面是三种遍历…

supervisord常用命令及服务配置记录

whereis supervisor主进程配置文件&#xff1a;/etc/supervisord.conf 子进程配置文件&#xff1a;/etc/supervisor/conf.d 启动supervisor服务 sudo supervisord -c /etc/supervisor/supervisord.conf关闭supervisor则执行命令 sudo supervisorctl shutdown重启supervisor则…

Postman接口测试笔记(超详细)

基于工具Poatman的接口自动化基础应用以及接口关联 一、什么是接口&#xff1f; 硬件接口&#xff1a;USB接口&#xff0c;投影仪接口&#xff0c;鼠标键盘接口 软件接口&#xff1a;称为API&#xff0c;主要使用于数据交互 软件接口分类&#xff1a; 内部接口&#xff1a…

Vue3实战笔记(61)—Vue 3 Watch进化论:解锁实时数据监听新境界

文章目录 前言基本使用总结 前言 Vue 3 中的 watch 功能相比Vue 2有了改进和扩展&#xff0c;旨在提供更灵活的数据监听方式。 基本使用 Vue 3中的watch可以用于Composition API和Options API&#xff0c;但Composition API的使用更为常见。它主要用于监听响应式数据的变化&a…

树莓派5烧系统和ssh远程实现

1、硬件说明 树莓派5 64G micro SD卡读卡器 2、烧录系统过程记录 之前写过一篇pi4B烧录Ubuntu22.04的博客&#xff0c;这篇就简单记录备份下 2.1 去ubuntu官网在树莓派上安装Ubuntu | Ubuntu下载Ubuntu 桌面 24.04 LTS 我之前已经下好了就有个(1) 2.2 用读卡器把SD卡插到…

富格林:采用安全出金操作方法

富格林指出&#xff0c;现货黄金投资是近几年来热门的投资产品&#xff0c;剧烈的行情波动会给投资者带来充分的盈利机会&#xff0c;让不少投资者都开始投身于黄金市场。不过对于新手而言&#xff0c;要想实现安全盈利出金并没有那么容易&#xff0c;需要把握一些正规的交易技…

实战:一款唯美的个人主页-home2.0-2024.6.4(测试成功)

目录 文章目录 目录实验软件前提条件效果说明1、背景2、配置1、克隆代码库2、配置并构建镜像3、部署测试方案1&#xff1a;从docker容器拷贝生成的静态文件放到网站/目录方案2&#xff1a;启动容器&#xff0c;nginx里配置反向代理&#xff08;推荐&#xff09; 4、访问 3、总结…

“物联网安全:万物互联背景下的隐私保护与数据安全策略“

在物联网&#xff08;IoT&#xff09;时代&#xff0c;随着智能设备的普及和万物互联的加速&#xff0c;隐私保护与数据安全成为了亟待解决的关键问题。以下是一些重要的隐私保护与数据安全策略&#xff0c;以确保在万物互联背景下信息的安全&#xff1a; 1. 加强设备安全&…

.NET Core 应用程序发布指南

引言 .NET Core 是一个开源、跨平台的框架&#xff0c;用于构建现代化的、高性能的应用程序。本文将介绍如何将一个 .NET Core 应用程序发布到不同的环境中&#xff0c;包括本地、云端和容器化部署。 准备工作 在开始之前&#xff0c;请确保您的开发环境已经安装了以下工具&…

MySQL数据库开发设计规范总结

MySQL数据库开发设计规范总结 概述MySQL数据库设计规范设计规范-库设计规范-表、列设计规范-索引跟索引相关的SQL优化设计规范-视图设计规范-存储过程设计规范-触发器设计规范-安全规范 数据库架构设计原则一、高可用架构选择二、扩展性三、安全性策略四、数据完整性策略五、规…

全球首款AR电脑上线,可投影100英寸屏幕

近日&#xff0c;Sightful公司推出了一款名为Spacetop G1的革命性笔记本电脑&#xff0c;将AR技术与传统笔记本电脑巧妙融合&#xff0c;打造出令人惊叹的全新办公体验。 全球首款AR电脑上线&#xff0c;可投影100英寸屏幕 不同于传统笔记本电脑依赖物理屏幕显示内容&#xff0…

异常概述

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在程序运行过程中&#xff0c;经常会遇到各种各样的错误&#xff0c;这些错误统称为“异常”。这些异常有的是由于开发者将关键字敲错导致的&#xf…

重学java 63.IO流 字节流 ④ 文件复制

身处泥泞&#xff0c;看满山花开 —— 24.6.4 图片复制 分析 1.创建两个对象 FilelnputStream —>读取指定的文件 FileOutputStream —> 将读到的字节写到指定的位置 2.边读边写 import java.io.FileInputStream; import java.io.FileOutputStream;public class Demo…

2024年湖北省中级职称代申报不通过扣除手续费套路满满

2024年湖北省中级职称代申报不通过扣除手续费套路满满 建筑类中级职称&#xff0c;市场需求大。建筑企业、人才、工程项目招投标等等都需要一定数量的中级职称。建筑类中级职称申报一年1-2批次。湖北省不同地级市安排不同。湖北建筑类中级职称申报方式 1.公司内部组织申报&…

二进制安装Prometheus

从 https://prometheus.io/download/ 下载相应版本&#xff0c;安装到服务器上官网提供的是二进制版&#xff0c;解压就 能用&#xff0c;不需要编译 1、下载软件 [rootlocalhost ~]# wget -c https://github.com/prometheus/prometheus/releases/download/v2.45.5/prometheus…

训练Pytorch深度学习模型出现StopIteration

训练一个深度学习检测模型&#xff0c;突然出现&#xff1a; 是因为next(batch_iterator)&#xff0c;可能迭代器读出来的数据为空。 # load train data# 原先代码images, targets next(batch_iterator)# 更改为&#xff1a;try:images, targets next(batch_iterator)except…

Flutter 中的 ParentDataWidget 小部件:全面指南

Flutter 中的 ParentDataWidget 小部件&#xff1a;全面指南 Flutter 是一个由 Google 开发的跨平台 UI 框架&#xff0c;它提供了丰富的组件来帮助开发者构建高性能、美观的应用。在 Flutter 的布局体系中&#xff0c;ParentDataWidget 是一个抽象类&#xff0c;用于定义如何…

LeetCode刷题之最大子数组

今天打算多做一题。 1、题目描述 2、逻辑分析 哈哈&#xff0c;这题我前两天在小红书刷到了&#xff0c;博主答不上来&#xff0c;一样的是&#xff0c;我也不知道怎么做。当时只看到评论说什么dp解法&#xff0c;看看题解怎么说。现在才反应过来dp dynamic programming &am…

二叉树遍历 和 线索二叉树

文章目录 1.1 二叉树遍历1.1 前提问题1&#xff1a; 什么叫二叉树的遍历&#xff1f;二叉树的三种遍历&#xff1a;三个概念&#xff1a;遍历 和 访问 和 经过重要概念&#xff1a;遍历过程中的经过节点&#xff0c;不代表访问节点 问题2&#xff1a;遍历和访问的联系&#xff…

Android 应用权限

文章目录 权限声明uses-permissionpermissionpermission-grouppermission-tree其他uses-feature 权限配置 权限声明 Android权限在AndroidManifest.xml中声明&#xff0c;<permission>、 <permission-group> 、<permission-tree> 和<uses-permission>…