vue3 + ts +element-plus + vue-router + scss + axios搭建项目

本地环境:

node版本:20.10.0

目录

一、搭建环境

二、创建项目

三、修改页面

四、封装路由vue-router

五、element-plus

六、安装scss

七、封装axios


一、搭建环境

1、安装vue脚手架

npm i -g @vue/cli

2、查看脚手架版本

vue -V

3、切换路径到需要创建项目的地方

二、创建项目

1、创建项目

npm create vite@latest

2、根据提示依次输入以下命令:(安装依赖并运行项目)

1、cd vue3_test  //切换到项目根目录下
2、npm i         //安装依赖
3、npm run dev    //启动项目

3、浏览器打开

三、修改页面

1、删除原本的helloword页面,在src下新建view/home/index.vue文件

2、修改App.vue文件

在 Vue 3 中,<RouterView> 组件是 Vue Router 4 的一部分,用于渲染匹配到的路由组件。

<script setup lang="ts">
</script><template><RouterView></RouterView>
</template><style scoped></style>

四、封装路由vue-router

vue3需要安装4.0以上版本

vue2需要安装4.0以下版本

1、安装路由

npm i vue-router

2、在src下新建router/index.ts文件

  router/index.ts

// src/router/index.ts
import { createRouter, createWebHashHistory } from "vue-router";
const routes: any = [{path: "/",redirect: "/index",},{path: "/index",component: () => import("../view/home/index.vue"),name: "Index",menuShow: true,},
];
const router = createRouter({history: createWebHashHistory(),routes: routes,
});export default router;

3、在main.ts中引入

  main.ts

import { createApp } from 'vue';
import router from './router/index';
import App from './App.vue';const app = createApp(App);
app.use(router);
app.mount('#app');

五、element-plus

1、安装

npm install element-plus

2、全局引用

//main.ts
import { createApp } from 'vue';
import './style.css'
import App from './App.vue';
import router from './router';
import ElementUI from 'element-plus'; // 引入Element Plus配置
import "element-plus/dist/index.css"const app = createApp(App);
app.use(router);
app.use(ElementUI);
app.mount('#app');

六、安装scss

npm install sass

七、封装axios

1、安装axios

npm i axios

2、src下新建utils/axios.ts文件

// axios.ts
import axios from "axios";
import { ElMessage } from 'element-plus'
const service = axios.create({baseURL: '',  //访问后端接口,例如:192.168.1.131:8090/timeout: 3000,
})
// 请求拦截器
service.interceptors.request.use((config) => {// 在发送请求之前做些什么,例如添加请求头等return config;},(error) => {// 对请求错误做些什么return Promise.reject(error);}
);
// 相应拦截器
service.interceptors.response.use((response) => {// 对响应数据做些什么,例如处理错误信息等return response;},(error) => {if (error && error.response) {switch (error.response.status) {case 400:error.message = '400:请求错误'breakcase 403:error.message = '403:拒绝访问'breakcase 404:error.message = `404:请求地址出错: ${error.response.config.url}`breakcase 408:error.message = '408:请求超时'breakcase 500:error.message = '500:服务器内部错误,请联系管理员'breakcase 501:error.message = '501:服务未实现'breakcase 502:error.message = '502:网关错误'breakcase 503:error.message = '503:服务不可用'breakcase 504:error.message = '504:网关超时'breakcase 505:error.message = '505:HTTP版本不受支持'breakdefault:}}ElMessage({message: error.message,type: 'error',duration: 3 * 1000,})console.error(error);// 对响应错误做些什么return Promise.reject(error);}
);export default service

3、src下新建api文件下,api/home_api.ts

import request from "../utils/axios"
export function getBannerApi(data: any) {return request({url: "接口地址",method: "请求方式",  //(post或者get)params:data     //(如果是post请求,直接是data)})
}

4、页面引用接口,并请求

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue"
import * as homeInfoApi from '../../api/home_api';
let newsList = reactive([])
const total = ref(0 as any);
const pageSize = ref(20 as any);
const pageIndex = ref(1 as any);
onMounted(() => {getProductData()
})
const getProductData = async () => {try {// 参数let queryParams = {limit: pageSize.value,offset: pageIndex.value,sid: 415,}// 请求接口const response = await homeInfoApi.getBannerApi(queryParams);response.data.data.forEach((element: any) => {newsList.push(element)});total.value = response.data.pagination.total;console.log(response)} catch (error) {console.error(error);} finally {}
}</script>

八、配置vite.config.ts

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default ({ command, mode }: { command: string; mode: string }) => {const config = defineConfig({plugins: [vue()],server: {port: 8090, // 设置新的端口(前端接口)open: true, // 自动打开浏览器host: "192.168.1.130",//本地主机地址proxy: {'/api': {target: 'http://192.168.1.131:8081/',   //请求后端接口changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},}},});return config;
};

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

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

相关文章

.NET封装一个简单的单例模式异步的日志类

.NET兼职社区 可以直接使用&#xff0c;防止重复造轮子。 using System.IO; using System; using System.Threading.Tasks;namespace Wpf.PersonnelNotice.Servers {public sealed class LogService{private static readonly Lazy<LogService> lazy new Lazy<LogServ…

flask+ flask_socketio HTTP/1.1“ 400 公网IP 问题解决方案

很经典的一个跨域问题 在服务端改成socketio SocketIO(app, cors_allowed_origins"*")就可以了

数据可视化-ECharts Html项目实战(4)

在之前的文章中&#xff0c;我们学习了如何创建圆环图、嵌套圆环图、蓝丁格尔玫瑰图。想了解的朋友可以查看这篇文章。同时&#xff0c;希望我的文章能帮助到你&#xff0c;如果觉得我的文章写的不错&#xff0c;请留下你宝贵的点赞&#xff0c;谢谢。 数据可视化-ECharts Htm…

四、C语言中的数组:如何输入与输出二维数组(数组,完)

本章的学习内容如下 四、C语言中的数组&#xff1a;数组的创建与初始化四、C语言中的数组&#xff1a;数组的输入与元素个数C语言—第6次作业—十道代码题掌握一维数组四、C语言中的数组&#xff1a;二维数组 1.二维数组的输入与输出 当我们输入一维数组时需要一个循环来遍历…

uniApp中使用小程序XR-Frame创建3D场景(1)环境搭建

1.XR-Frame简介 XR-Frame作为微信小程序官方推出的3D框架&#xff0c;是目前所有小程序平台中3D效果最好的一个&#xff0c;由于其本身针对微信小程序做了优化&#xff0c;在性能方面比其他第三方库都要高很多。 2.与Three.js的区别 做3D小程序的同学们对Three.js一定不陌生…

huggingface_hub

文章目录 一、关于 huggingface_hub二、安装三、快速入门指南1、下载文件1.1 下载单个文件 hf_hub_download1.2 下载整个库 snapshot_download 2、登录3、创建一个存储库 create_repo4、上传文件4.1 上传单个文件 upload_file4.2 上传整个存储库 upload_folder 四、集成到 Hub …

图论06-飞地的数量(Java)

6.飞地的数量 题目描述 给你一个大小为 m x n 的二进制矩阵 grid &#xff0c;其中 0 表示一个海洋单元格、1 表示一个陆地单元格。 一次 移动 是指从一个陆地单元格走到另一个相邻&#xff08;上、下、左、右&#xff09;的陆地单元格或跨过 grid 的边界。 返回网格中 无法…

【PyCaret】使用PyCaret创建机器学习Pipeline进行多分类任务

发现一个好东西&#xff0c;PyCaret机器学习Pipeline&#xff0c;记录一下用其进行多分类任务的使用方法。 1、简介 PyCaret是一个开源的、不用写很多代码的Python机器学习库&#xff0c;可以自动化机器学习工作流程&#xff0c;是一个端到端的机器学习和模型管理工具&#xff…

登录与注册功能(简单版)(3)登录时使用Cookie增加记住我功能

目录 1、实现分析 2、步骤 1&#xff09;新建login.jsp 2&#xff09;修改LoginServlet&#xff1a; 3&#xff09;启动访问&#xff1a; 3、安全性考虑 4、最佳实践思路 1&#xff09;选择安全的认证机制 2&#xff09;强化会话管理 3&#xff09;安全地存储用户凭证…

Android App 如何 隐藏 HTTPS 请求,不让Charles 可以抓到数据,请求不可见?

使用SSL Pinning&#xff1a; 实现SSL Pinning来确保应用只与预期的服务器通信。这样&#xff0c;即使抓包工具可以拦截HTTPS请求&#xff0c;但由于证书不匹配&#xff0c;无法解密通信内容。 加密请求内容&#xff1a; 在应用中使用加密算法对请求内容进行加密处理&#xff…

Unity 粒子在UI中使用时需要注意的地方

最近项目中要在UI中挂载粒子特效,美术给过来的粒子直接放到UI中会有一些问题,查询一些资料后,总结了一下 一: 粒子的大小发生变化,与在预制件编辑中设计的大小不同 在预制件编辑模式下,大小正常 实际使用的时候特别大或者特别小 经过检查,发现预制件编辑模式下,默认画布的Rend…

上位机图像处理和嵌入式模块部署(qmacvisual点线测量)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 上面一篇文章&#xff0c;我们完成了直线的拟合操作。在实际场景中&#xff0c;拟合之后更多地是需要进行长度的测量。既然是测量&#xff0c;那么…

【JavaScript 漫游】【040】Blob 对象

文章简介 本篇文章为【JavaScript 漫游】专栏的第 040 篇文章&#xff0c;对浏览器模型中的 Blob 对象进行了总结。 概述 Blob 对象表示一个二进制文件的数据内容&#xff0c;比如一个图片文件的内容就可以通过 Blob 对象读写。它通常用来读写文件&#xff0c;它的名字是 Bi…

uniapp中预览base64图片

一、首先要安装插件image-tools&#xff0c;插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id123 npm i image-tools --save二、引入 import {pathToBase64,base64ToPath} from image-tools三、应用 openImg(){//预览图片 let that this;uni.showLoading({title:…

哪些企业适合构建企业新媒体矩阵?

⭐关注矩阵通服务号&#xff0c;探索企业新媒体矩阵搭建与营销策略 新媒体矩阵就是在某个平台或多个平台开设、联动多个账号&#xff0c;组建有关系的不同账号集群。 在数字化转型的浪潮下&#xff0c;矩阵已然成为企业实现品牌塑造、市场开拓与用户互动的重要阵地。 然而&…

2024Android-目前最稳定和高效的UI适配方案!你头秃都没想到还能这样吧!

但是这个方案有一个致命的缺陷&#xff0c;那就是需要精准命中才能适配&#xff0c;比如1920x1080的手机就一定要找到1920x1080的限定符&#xff0c;否则就只能用统一的默认的dimens文件了。而使用默认的尺寸的话&#xff0c;UI就很可能变形&#xff0c;简单说&#xff0c;就是…

HTTP跨域

1. 简介 HTTP跨域是指不同域名下的网页请求资源时&#xff0c;由于浏览器同源策略限制&#xff0c;导致请求被阻止。为解决这一问题&#xff0c;开发者常采用跨域资源共享&#xff08;CORS&#xff09;等技术来允许合法跨域请求&#xff0c;确保网站功能正常运行。 同源 协议…

【ARM 嵌入式 C 入门及渐进 12 --寄存器位清0和置位函数实现】

文章目录 寄存器位清0和置位函数实现示例使用方式注意事项 寄存器位清0和置位函数实现 在 C 语言中&#xff0c;可以使用宏定义来创建用于清除&#xff08;清零&#xff09;或设置&#xff08;置一&#xff09;32位地址中特定位的函数。以下是两个宏定义的示例&#xff1a; #…

记一次由于buff/cache导致服务器内存爆满的问题

目录 前言 复现 登录服务器查看占用内存进程排行 先了解一下什么是buff/cache&#xff1f; 尝试释放buffer/cache /proc/sys/vm/drop_caches dirty_ratio dirty_background_ratio dirty_writeback_centisecs dirty_expire_centisecs drop_caches page-cluster swap…

设计模式(行为型设计模式——观察者模式)

设计模式&#xff08;行为型设计模式——观察者模式&#xff09; 观察者模式 基本定义 指多个对象间存在一对多的依赖关系&#xff0c;这样一来&#xff0c;当一个对象的状态发生改变时&#xff0c;所有依赖于它的对象都得到通知并被自动更新。 这种模式又称作发布-订阅模式…