前端vue3+ts架构

1、vue creat 项目名称

选择自定义

 选择需要的依赖

 选择vue3

 一路enter,选择eslist+prettier

 继续enter,等待安装

按步骤操作,项目启动成功

 2、vscode安装5款插件

 2、代码保存自动格式化,保证每个开发人员代码一致,根目录新建三个文件.editorconfig和.prettierrc和.prettierignore

.editorconfig文件如下,无论什么编辑器都按这个格式执行

# http://editorconfig.orgroot = true[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格(tab | space)
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

 .prettierrc文件如下,保存代码格式化

{"printWidth": 80,//每行多少代码"semi": false, // 末尾使用分号"singleQuote": true, // 全局使用单引号"tabWidth": 2, //tab宽度为两个空格"arrowParens": "avoid", //箭头函数参数只有一个时是否要小括号,avoid省略括号"trailingComma": "none", // 末尾不加逗号"proseWrap": "preserve" // 是否将 Markdown 文件中的文本换行 preserve保留
}

.prettierignore文件如下,忽略某些效验

#忽略效验的文件
/dist/*
.local
.output.js
/node_modules/****/*.svg
**/*.sh/public/*

vscode右键格式化文档

 使用prettier格式化设置

package.json中配置一键执行全部文件代码格式化

3、安装husky插件,保证git提交之前代码规范

npx husky-init && npm install

修改husky中pre-commit文件,npm test为npm run lint

4、配置vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,publicPath: './', //打包后的应用中,所有 URL 都会带上的前缀host: '0.0.0.0',port: 8080, // 端口号open: true, // 自动启动浏览器//配置代理devServer: {//所有的配置项proxy: {//配置'/api': {//代理名称,这里最好有一个target: process.env.VUE_APP_BASE_API, // 后台接口域名changeOrigin: true, //是否跨域pathRewrite: {'^/api': '/api' //路径重写}}}}
})

5、引入js必须在tsconfig.json文件配置 "allowJs": true

6、新建两个文件,配置如下

第一:axios.ts文件配置如下

/* eslint-disable no-undef */
// 引入axios
import axios from 'axios'
import type { AxiosRequestConfig } from 'axios'console.log(process.env.VUE_APP_BASE_API)// 请求超时时间
const server = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 1000// headers: {//   'Content-Type': 'application/json'// }
})// 请求拦截器
server.interceptors.request.use(config => {// 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断// const token = sessionStorage('Token')// token && (config.headers.Authorization = token)// if (config.method.toUpperCase() === 'POST') {//   config.headers['Content-Type'] = 'application/json;charset=utf-8'// }return config},error => {return error}
)
// 响应拦截器
server.interceptors.response.use(config => {return config},// 服务器状态码不是200的情况error => {return error}
)// 通过导出自定的request实例,来实现对axios的类型封装
export default async <T>(config: AxiosRequestConfig) => {const res = await server(config)return (res.data.data || res.data) as T
}

第二:api.ts文件配置如下,统一管理接口

import request from '@/axios'export function testGetApi(params: any) {return request({url: '/api/test?id=1',method: 'get',params: params})
}
export function testPostApi(data: any) {return request({url: '/api/login',method: 'post',data: data})
}

第三:组件中接口调用如下


<script setup lang="ts">
import { testGetApi, testPostApi } from '@/api'const testgetFun = async () => {const res = await testGetApi({})console.log(res)
}
const testPostFun = async () => {const res = await testPostApi({ user: 111 })console.log(res)
}onMounted(() => {testgetFun()testPostFun()
})
</script>

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

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

相关文章

数据结构体--5.0图

目录 一、定义 二、图的顶点与边之间的关系 三、图的顶点与边之间的关系 四、连通图 五、连通图的生成树定义 一、定义 图&#xff08;Graph&#xff09;是由顶点的又穷非空集合合顶点之间边的集合组成&#xff0c;通常表示为&#xff1a;G&#xff08;V&#xff0c;E&…

CSC7203S 应用注意事项

CSC7203S 为高性能电流模式 PWM 开关电源功率转换器&#xff0c;满足绿色环保标准&#xff1b;广泛适用于经济型开关电源&#xff0c;如 DVD、机顶盒、传真机、打印机、LCD 显示器等。CSC7203S采用SOP-8封装。  内置 700V 高压功率开关管  输入电压&#xff08;85V~265V&a…

微服务--Ribbon(负载均衡:客户端的负载均衡):服务端:nginx

默认&#xff08;根据&#xff1a;符合判断server所在区域的性能和server的可用性划分选择服务器&#xff09;轮询 官方提供负载均衡&#xff1a;RestTemplate整合loadBalancer

TDengine函数大全-数学函数

以下内容来自 TDengine 官方文档 及 GitHub 内容 。 以下所有示例基于 TDengine 3.1.0.3 TDengine函数大全 1.数学函数 2.字符串函数 3.转换函数 4.时间和日期函数 5.聚合函数 6.选择函数 7.时序数据库特有函数 8.系统函数 数学函数 TDengine函数大全ABSACOSASINATANCEILCOSFL…

Gitlab创建一个空项目

1. 创建项目 Project slug是访问地址的后缀&#xff0c;跟前边的ProjectUrl拼在一起&#xff0c;就是此项目的首页地址&#xff1b; Visibility Level选择默认私有即可&#xff0c;选择内部或者公开&#xff0c;就会暴露代码。 勾选Readme选项&#xff0c;这样项目内默认会带…

flink维度表关联

分析&回答 根据我们业务对维表数据关联的时效性要求&#xff0c;有以下几种解决方案&#xff1a; 1、实时查询维表 实时查询维表是指用户在Flink 的Map算子中直接访问外部数据库&#xff0c;比如用 MySQL 来进行关联&#xff0c;这种方式是同步方式&#xff0c;数据保证是…

大数据课程K15——Spark的TF-IDF计算Term权重

文章作者邮箱:yugongshiye@sina.cn 地址:广东惠州 ▲ 本章节目的 ⚪ 了解Spark的TF-IDF算法概念; ⚪ 了解Spark的TF-IDF算法定义; ⚪ 了解Spark的TF-IDF算法案例; 一、TF-IDF算法概述 TF-IDF(term frequency–inverse document frequency)是一种用于信…

MVC、MVP、MVVM的成本角度结合业务,如何考虑选型?一文了解方方面面

大家都知道&#xff0c;使用架构的目的是使程序模块化&#xff0c;做到模块内部的高聚合和模块之间的低耦合&#xff0c;使得程序在开发的过程中&#xff0c;开发人员只需要专注于一点&#xff0c;提高程序开发的效率。那么MVC、MVP、MVVM&#xff0c;该怎么选&#xff1f;在什…

Redis——》如何评估锁过期时间

推荐链接&#xff1a; 总结——》【Java】 总结——》【Mysql】 总结——》【Redis】 总结——》【Kafka】 总结——》【Spring】 总结——》【SpringBoot】 总结——》【MyBatis、MyBatis-Plus】 总结——》【Linux】 总结——》【MongoD…

mall :rabbit项目源码解析

文章目录 一、mall开源项目1.1 来源1.2 项目转移1.3 项目克隆 二、RabbitMQ 消息中间件2.1 rabbit简介2.2 分布式后端项目的使用流程2.3 分布式后端项目的使用场景 三、安装RabbitMQ(Win10)3.1安装erLang语言&#xff0c;配置环境变量3.2 安装RabbitMQ服务端3.3 测试安装效果 四…

开源微服务如何选型?Spring Cloud、Dubbo、gRPC、Istio 详细对比

作者&#xff1a;刘军 不论您是一名开发者、架构师、CTO&#xff0c; 如果您曾深度参与在微服务开发中&#xff0c;那么相信您一定有过开源微服务框架或体系选型的疑问&#xff1a;Apache Dubbo、Spring Cloud、gRPC 以及 Service Mesh 体系产品如 Istio&#xff0c;到底应该选…

Linux 虚拟机同步时间crontab以及crond详解

目录 一 Linux 虚拟机同步时间设置 1. 检查是否安装cron服务&#xff08;即时间同步器&#xff09; 2. 下载时间同步器 3. 编辑crontab 内容 4. 同步更新电脑网络时间 5.设置 reload 6. 查看 crond 状态 二 crond 详解 1. 启动/关闭cron服务 2. crontab命令格式 3. …

Ceph入门到精通-OSD waring 设置建议

OSD 以下检查表明 OSD 节点存在问题。 警告 1 在 /var/lib/ceph/osd 中找到的多个ceph_fsid值。 这可能意味着您正在托管许多集群的 OSD 此节点或某些 OSD 配置错误以加入 您期望的集群。 2 设置可能会导致数据丢失&#xff0c;因为如果 未达到最小值&#xff0c;Ceph 将不会确…

ShardingSphere——柔性事务SEATA原理

摘要 Apache ShardingSphere集成了 SEATA 作为柔性事务的使用方案&#xff0c;本文主要介绍其实现ShardingSphere中柔性事务SEATA原理原理。帮助你更好的理解ShardingSphere原理。同时帮助大家更好的使用柔性事务SEATA原理。 一、Seata柔性事务 Apache ShardingSphere 集成了…

GDB 调试必会指南

GDB 调试必会指南 1 gdb调试 1.1 gdb介绍 GDB&#xff08;GNU Debugger&#xff09;是GCC的调试工具。其功能强大&#xff0c;描述如下&#xff1a;GDB主要帮助你完成下面四个方面的功能&#xff1a; 启动程序&#xff0c;可以按照你的自定义的要求随心所欲的运行程序可让调…

说说广播流与普通流

分析&回答 user actions 可以看作是事件流&#xff08;普通流&#xff09;patterns 为广播流,把全量数据加载到不同的计算节点。 广播流 Broadcast是一份存储在TaskManager内存中的只读的缓存数据在执行job的过程中需要反复使用的数据&#xff0c;为了达到数据共享&am…

Windows系统中Apache Http服务器简单使用

1 简介 Apache HTTP服务器是一个开源的、跨平台的Web服务器软件。它由Apache软件基金会开发和维护。Apache HTTP服务器可以在多种操作系统上运行&#xff0c;如Windows、Linux、Unix等&#xff0c;并且支持多种编程语言和技术&#xff0c;如PHP、Perl、Python、Java等。…

Unity ShaderGraph教程——基础shader

1.基本贴图shader&#xff1a; 基础贴图实现&#xff1a;主贴图、自发光贴图、光滑度贴图、自发光贴图&#xff08;自发光还加入了颜色影响和按 钮开关&#xff09;. 步骤&#xff1a;最左侧操作组——新建texture2D——新建sample texture 2D承…

React 生命周期新旧对比

前言 React16.4版本之后使用了新的生命周期&#xff0c;它使用了一些新的生命周期钩子&#xff08;getDerivedStateFromProps、getSnapshotBeforeUpdate&#xff09;&#xff0c;并且即将废弃老版的3个生命周期钩子&#xff08;componentWillMount、componentWillReceiveProps…

WebGPU加载Wavefront .OBJ模型文件

在开发布料模拟之前&#xff0c;我想使用 WebGPU 开发强大的代码基础。 这就是为什么我想从 Wavefront .OBJ 文件加载器开始渲染 3D 模型。 这样&#xff0c;我们可以快速渲染 3D 模型&#xff0c;并构建一个简单而强大的渲染引擎来完成此任务。 一旦我们有了扎实的基础&#x…