当前位置：首页 > news >正文

Vue3 + TypeScript 项目搭建

news 来源：原创 2025/7/29 21:01:28

Vue3 + TypeScript 项目搭建

环境准备

首先确保你的开发环境满足以下要求：

# 检查 Node.js 版本 (需要 14.0 或更高版本)
node -v# 检查 npm 版本
npm -v# 安装或更新 Vue CLI
npm install -g @vue/cli

创建项目

使用 Vue CLI 创建项目：

# 创建项目
npm create vue@latest# 按提示选择需要的功能：
# ✔ Project name: … vue3-ts-project
# ✔ Add TypeScript? … Yes
# ✔ Add JSX Support? … Yes
# ✔ Add Vue Router? … Yes
# ✔ Add Pinia? … Yes
# ✔ Add ESLint? … Yes
# ✔ Add Prettier? … Yes# 进入项目目录
cd vue3-ts-project# 安装依赖
npm install

项目配置

vite.config.ts 配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'export default defineConfig({plugins: [vue()],resolve: {alias: {'@': path.resolve(__dirname, 'src'),},},server: {port: 3000,proxy: {'/api': {target: 'http://your-api-server.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},
})

目录结构规范

src/
├── assets/          # 静态资源
├── components/      # 公共组件
├── composables/     # 组合式函数
├── config/          # 配置文件
├── layouts/         # 布局组件
├── router/          # 路由配置
├── stores/          # Pinia 状态管理
├── styles/          # 全局样式
├── types/           # TypeScript 类型定义
├── utils/           # 工具函数
└── views/           # 页面组件

引入必要依赖

# UI 框架
npm install element-plus# HTTP 请求
npm install axios# 工具库
npm install lodash-es# 类型定义
npm install @types/lodash-es -D

TypeScript 配置

tsconfig.json

{"compilerOptions": {"target": "esnext","module": "esnext","strict": true,"jsx": "preserve","moduleResolution": "node","skipLibCheck": true,"esModuleInterop": true,"allowSyntheticDefaultImports": true,"forceConsistentCasingInFileNames": true,"useDefineForClassFields": true,"sourceMap": true,"baseUrl": ".","types": ["webpack-env","jest","element-plus/global"],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.tsx","src/**/*.vue","tests/**/*.ts","tests/**/*.tsx"],"exclude": ["node_modules"]
}

代码规范配置

.eslintrc.js

module.exports = {root: true,env: {node: true},extends: ['plugin:vue/vue3-essential','@vue/typescript/recommended','@vue/prettier'],parserOptions: {ecmaVersion: 2020},rules: {'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off','no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off','@typescript-eslint/explicit-module-boundary-types': 'off'}
}

路由配置

src/router/index.ts

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'Home',component: () => import('@/views/Home.vue'),meta: {title: '首页',requiresAuth: true}},{path: '/login',name: 'Login',component: () => import('@/views/Login.vue')}
]const router = createRouter({history: createWebHistory(),routes
})// 路由守卫
router.beforeEach((to, from, next) => {const isAuthenticated = localStorage.getItem('token')if (to.meta.requiresAuth && !isAuthenticated) {next('/login')} else {next()}
})export default router

状态管理

src/stores/user.ts

import { defineStore } from 'pinia'interface UserState {token: stringuserInfo: {id: numberusername: string} | null
}export const useUserStore = defineStore('user', {state: (): UserState => ({token: localStorage.getItem('token') || '',userInfo: null}),getters: {isLoggedIn: (state) => !!state.token},actions: {async login(username: string, password: string) {try {// 模拟API请求const response = await fetch('/api/login', {method: 'POST',body: JSON.stringify({ username, password })})const data = await response.json()this.token = data.tokenthis.userInfo = data.userlocalStorage.setItem('token', data.token)} catch (error) {console.error('Login failed:', error)throw error}},logout() {this.token = ''this.userInfo = nulllocalStorage.removeItem('token')}}
})

示例代码

组件示例 (src/components/UserProfile.vue)

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'interface User {id: numbername: stringemail: string
}const userStore = useUserStore()
const user = ref<User | null>(null)onMounted(async () => {try {// 获取用户信息const response = await fetch('/api/user')user.value = await response.json()} catch (error) {console.error('Failed to fetch user:', error)}
})
</script><template><div class="user-profile"><h2>用户信息</h2><div v-if="user" class="user-info"><p>ID: {{ user.id }}</p><p>姓名: {{ user.name }}</p><p>邮箱: {{ user.email }}</p></div><div v-else>加载中...</div></div>
</template><style scoped>
.user-profile {padding: 20px;
}.user-info {margin-top: 20px;
}
</style>

最佳实践

1. API 请求封装

// src/utils/request.ts
import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'const instance: AxiosInstance = axios.create({baseURL: import.meta.env.VITE_API_BASE_URL,timeout: 5000,headers: {'Content-Type': 'application/json'}
})// 请求拦截器
instance.interceptors.request.use((config) => {const token = localStorage.getItem('token')if (token) {config.headers.Authorization = `Bearer ${token}`}return config},(error) => {return Promise.reject(error)}
)// 响应拦截器
instance.interceptors.response.use((response) => {return response.data},(error) => {if (error.response?.status === 401) {// 处理未授权localStorage.removeItem('token')window.location.href = '/login'}return Promise.reject(error)}
)export default instance

2. 环境变量配置

// .env
VITE_API_BASE_URL=http://localhost:3000// .env.production
VITE_API_BASE_URL=https://api.yourdomain.com

3. 类型定义示例

// src/types/user.d.ts
export interface User {id: numberusername: stringemail: stringavatar?: stringroles: string[]
}export interface LoginParams {username: stringpassword: stringremember?: boolean
}export interface LoginResponse {token: stringuser: User
}

4. 组合式函数示例

// src/composables/useAuth.ts
import { ref } from 'vue'
import type { User, LoginParams } from '@/types/user'
import request from '@/utils/request'export function useAuth() {const user = ref<User | null>(null)const loading = ref(false)const error = ref<string | null>(null)async function login(params: LoginParams) {try {loading.value = trueerror.value = nullconst response = await request.post('/auth/login', params)user.value = response.userlocalStorage.setItem('token', response.token)return response} catch (err) {error.value = err.messagethrow err} finally {loading.value = false}}function logout() {user.value = nulllocalStorage.removeItem('token')}return {user,loading,error,login,logout}
}

Vue3 + TypeScript 项目搭建

Vue3 TypeScript 项目搭建环境准备首先确保你的开发环境满足以下要求： # 检查 Node.js 版本 (需要 14.0 或更高版本) node -v# 检查 npm 版本 npm -v# 安装或更新 Vue CLI npm install -g vue/cli创建项目使用 Vue CLI 创建项目： # 创建项目 np…...

编程日记 2025/7/29 21:01:28

Python操作neo4j库py2neo使用（一）

Python操作neo4j库py2neo使用（一） 安装（只用于测试） docker-compose .yml 文件 version: 3.8 services:neo4j:image: neo4j:5.6.0-enterprise #商业版镜像hostname: neo4jcontainer_name: neo4jports:- "7474:7474"-…...

编程日记 2025/7/28 10:36:38

（原创）Android Studio新老界面UI切换及老版本下载地址

前言这两天下载了一个新版的Android Studio，发现整个界面都发生了很大改动： 新的界面的一些设置可参考一些博客： Android Studio新版UI常用设置但是对于一些急着开发的小伙伴来说，没有时间去适应，那么怎么办呢&am…...

编程日记 2025/7/27 10:28:33

Linux——用户级缓存区及模拟实现fopen、fweite、fclose

linux基础io重定向-CSDN博客文章目录目录文章目录什么是缓冲区为什么要有缓冲区二、编写自己的fopen、fwrite、fclose 1.引入函数 2、引入FILE 3.模拟封装 1、fopen 2、fwrite 3、fclose 4、fflush 总结前言用快递站讲述缓冲区收件区（类比输…...

编程日记 2025/7/29 20:16:11

CKA认证 | Day2 K8s内部监控与日志

第三章 Kubernetes监控与日志 1、查看集群资源状态在 Kubernetes 集群中，查看集群资源状态和组件状态是非常重要的操作。以下是一些常用的命令和解释，帮助你更好地管理和监控 Kubernetes 集群。 1.1 查看master组件状态 Kubernetes 的 Master 组件包…...

编程日记 2025/7/29 9:21:18

大模型部署，运维，测试所需掌握的知识点

python环境部署: python3 -m site --user-base 返回用户级别的Python安装基础目录 sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.8 1 将python3的默认路径/usr/bin/python3替…...

编程日记 2025/7/25 16:19:37

JDBC编程---Java

目录一、数据库编程的前置二、Java的数据库编程----JDBC 1.概念 2.JDBC编程的优点三.导入MySQL驱动包四、JDBC编程的实战 1.创造数据源，并设置数据库所在的位置，三条固定写法 2.建立和数据库服务器之间的连接，连接好了后&#xff…...

编程日记 2025/7/29 1:01:11

什么是沙箱(Sandbox)技术

沙箱技术是一种重要的计算机安全机制，主要用于隔离程序运行环境，以防止恶意代码或应用程序对系统和数据造成破坏。通过限制代码的访问权限和行为，沙箱为程序提供了一个受控且隔离的执行环境。核心特点隔离性沙箱运行的程序被限制在一个受控…...

编程日记 2025/7/27 10:33:05

TCP socket api详解

文章目录 netstat -nltpaccept简单客户端工具 telnet 指定服务连接connect异常处理version 1 单进程版version 2 多进程版version 3 -- 多线程版本version 4 ---- 线程池版本创建套接字socket sockaddr_in结构体 bind 之后就和UDP不一样了。因为TCP是一个面向连接的服务器&…...

编程日记 2025/7/29 2:37:43

Linux——环境变量

环境变量一般指的是在操作系统重用来指定操作系统运行环境的一些参数，这些参数会被bash使用，而bash是被我们用户使用的，也就是说，这些环境变量间接的也是被我们用户使用的。环境变量通常都有某些特殊的用途，它在系统重…...

编程日记 2025/7/29 13:02:11

Windows Pycharm 远程 Spark 开发 PySpark

一、环境版本环境版本PyCharm2024.1.2 (Professional Edition)Ubuntu Kylin16.04Hadoop3.3.5Hive3.1.3Spark2.4.0 二、Pycharm远程开发文件-远程-开发选择 SSH连接，连接虚拟机，选择项目目录即可远程开发...

编程日记 2025/7/25 11:00:46

【es6进阶】vue3中的数据劫持的最新实现方案的proxy的详解

vuejs中实现数据的劫持,v2中使用的是Object.defineProperty()来实现的，在大版本v3中彻底重写了这部分，使用了proxy这个数据代理的方式，来修复了v2中对数组和对象的劫持的遗留问题。 proxy是什么 Proxy 用于修改某些操作的默认行为&#xff0…...

编程日记 2025/7/27 15:29:55

【Isaac Sim】加载自带模型或示例时报 Isaac Sim is not responding

Isaac Sim对电脑配置要求很高，开机第一次打开 Isaac Sim 时，直接就报 Isaac Sim is not responding 卡死了，这是由于第一次需要加载一些资源，耗时会导致 Isaac Sim 无响应，这里等一会会自动给回复。加载自带模型或示…...

编程日记 2025/7/24 15:25:25

React (三)

文章目录项目地址十二、性能优化12.1 使用useMemo避免不必要的计算12.2 使用memo缓存组件，防止过度渲染12.3 useCallBack缓存函数12.4 useCallBack里访问之前的状态（没懂）十三、Styled-Components13.1 安装13.2给普通html元素添加样式13.3 继承和覆盖样式13.4 给react组件添…...

编程日记 2025/7/26 22:50:58

C0031.在Clion中使用mingw编译器来编译opencv的配置方法

mingw编译器编译opencv库的配置方法...

编程日记 2025/7/1 15:07:03

多目标跟踪算法

文章目录一、传统方法1. 基于卡尔曼滤波器的方法1.1 Kalman Filter(卡尔曼滤波器) 2. 基于数据关联的方法2.1 匈牙利算法二、深度学习方法1. 基于检测的多目标跟踪1.1 SORT算法1.2 DeepSort1.3 BoT-SORT 2. 基于特征关联和增强的方法2.1 ByteTrack 3. 基于Transformer的方法3…...

编程日记 2025/7/26 13:46:16

【CSS in Depth 2 精译_059】9.2 把 CSS 模块组合成更大的结构

当前内容所在位置（可进入专栏查看其他译好的章节内容） 【第九章 CSS 的模块化与作用域】 ✔️ 9.1 模块的定义 9.1.1 模块和全局样式9.1.2 一个简单的 CSS 模块9.1.3 模块的变体9.1.4 多元素模块 9.2 将模块组合为更大的结构 ✔️ 9.2.1 模块中多个职责的…...

编程日记 2025/7/27 8:11:41

uniapp+vue3+ts H5端使用Quill富文本插件以及解决上传图片反显的问题

uniappvue3ts H5端使用Quill富文本插件以及解决上传图片反显的问题 1.在项目中安装Quill npm i quill1.3.72.需要显示富文本的页面完整代码 <template><view><div ref"quillEditor" style"height: 65vh"></div></view> &…...

编程日记 2025/7/29 5:12:05

shell（二）

声明！ 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下，如涉及侵权马上删除文章，笔记只是方便各位师傅的学习和探讨，文章所提到的网站以及内容，只做学习交流，其他均与本人以及泷羽sec团队无关&a…...

编程日记 2025/7/28 9:04:52

在使用PCA算法进行数据压缩降维时，如何确定最佳维度是一个关键问题？

一、PCA算法的基本原理 PCA算法的核心思想是通过正交变换，将一组可能相关的变量转换成一组线性不相关的变量，称为主成分。这组主成分能够以最小的信息损失来尽可能多地保留原始数据集的变异性。具体来说，PCA算法包括以下几个步骤&#xff1a…...

编程日记 2025/7/28 19:50:48

学习嵩山版《Java 开发手册》：编程规约 - 命名风格（P1 ~ P2）

概述《Java 开发手册》是阿里巴巴集团技术团队的集体智慧结晶和经验总结，他旨在提升开发效率和代码质量《Java 开发手册》是一本极具价值的 Java 开发规范指南，对于提升开发者的综合素质和代码质量具有重要意义学习《Java 开发手册》是一个提升 Jav…...

编程日记 2025/7/25 1:46:13

#渗透测试#红蓝攻防#HW#SRC漏洞挖掘01之静态页面渗透

免责声明本教程仅为合法的教学目的而准备，严禁用于任何形式的违法犯罪活动及其他商业行为，在使用本教程前，您应确保该行为符合当地的法律法规，继续阅读即表示您需自行承担所有操作的后果，如有异议，请立即停…...

编程日记 2025/7/25 5:52:58

开源POC库推荐

声明学习视频来自 B 站UP主泷羽sec，如涉及侵权马上删除文章。笔记的只是方便各位师傅学习知识，以下网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。 ✍🏻作者简介：致…...

编程日记 2025/7/24 10:35:34

深度学习每周学习总结J6（ResNeXt-50 算法实战与解析 - 猴痘识别）

🍨 本文为🔗365天深度学习训练营中的学习记录博客🍖 原作者：K同学啊 | 接辅导、项目定制目录 0. 总结ResNeXt基本介绍 1. 设置GPU2. 导入数据及处理部分3. 划分数据集4. 模型构建部分5. 设置超参数：定义损失函数&…...

编程日记 2025/7/27 17:07:51

用vite下载的react + TS的项目,组件会调用两次

解决方案: 去掉main.tsx文件中的StrictMode...

编程日记 2025/7/5 15:05:28

STM32F4----DCA数字量转换成模拟量

STM32F4----DCA数字量转换成模拟量基本原理上一节讲诉了ADC的具体原理与程序搭建https://blog.csdn.net/qq_35970934/article/details/143999874?spm1001.2014.3001.5501。这节讲DAC的原理和程序，在实际应用中，我们经常需要调节电压的输出大小&…...

编程日记 2025/7/25 1:14:01

springboot3如何集成knife4j 4.x版本及如何进行API注解

1. 什么是Knife4j knife4j是为Java MVC框架集成Swagger生成Api文档的增强解决方案, 取名knife4j是希望她能像一把匕首一样小巧,轻量,并且功能强悍!knife4j的前身是swagger-bootstrap-ui，swagger-bootstrap-ui自1.9.6版本后,正式更名为knife4j为了契合微服务的架构发展,由于原来…...

编程日记 2025/7/29 12:07:09

【Linux网络 (二)】套接字编程

Linux: 网络一、前言二、端口号 (port)1）port、套接字概念2）端口号 vs 进程id3）端口号和进程关系三、认识TCP/Udp协议1）连接性解释2）可靠性解释3）面向数据报/字节流解释四、网络字节序五、struct sockad…...

编程日记 2025/7/27 1:15:41

SQL 语句执行计划中的连接方式

SQL 语句执行计划中的连接方式 join操作 join操作基本分为3大类：外连接（细分为：左连接（Left outer join/ left join）、右连接（right outer join/ right join）、全连接（full outer …...

编程日记 2025/7/29 7:33:07

3、集线器、交换机、路由器、ip的关系。

集线器、交换机、路由器三者的关系 1、集线器2、交换机（每个交换机是不同的广播域，ip地址起到划分广播域的作用）3、路由器4、ip地址 1、集线器一开始两台电脑通信就需要网线就可以，但是三台或者更多主机通信时，就需…...

编程日记 2025/7/28 17:46:04

OpenCV相机标定与3D重建(3)校正鱼眼镜头畸变的函数calibrate()的使用

操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::fisheye::calibrate 函数是 OpenCV 中用于校正鱼眼镜头畸变的一个重要函数。该函数通过一系列棋盘格标定板的图像来计算相机的内参矩阵和畸变…...

编程日记 2025/7/28 16:52:38

【论文笔记】LLaVA-KD: A Framework of Distilling Multimodal Large Language Models

Abstract 大语言模型(Large Language Models, LLM)的成功，使得研究者为了统一视觉和语言的理解去探索多模态大预言模型(Multimodal Large Language Models, MLLM)。但是MLLM庞大的模型和复杂的计算使其很难应用在资源受限的环境，小型MLLM(s-MLLM)的表现…...

编程日记 2025/7/24 12:06:03

文章目录 1. C内存管理1.1 new1.1.1 内置类型1.1.2 自定义类型1.1.3 定位new表达式1.1.4 new的优势与不足1.1.5 new的原理 1.2 delete1.2.1 内置类型1.2.2 自定义类1.2.3 delete和free1.2.4 delete原理 1.3 new和delete的对应1.3.1 内置类型1.3.2 自定义类型 2. 模板2.1 函数模…...

编程日记 2025/7/25 4:32:28

Docker 容器化开发应用

Docker 常用命令存储 - 目录挂载存储卷映射自定义网络 Docker Compose语法 Dockerfile - 制作镜像镜像分层机制完结...

编程日记 2025/7/26 0:01:30

element-plus教程：Input Number 数字输入框

一、基础用法要使用Input Number数字输入框，只需要在<el-input-number>元素中使用v-model绑定变量即可。例如： <template><el-input-number v-model"value" /> </template><script lang"ts" setup>…...

编程日记 2025/7/24 7:03:30

【Go语言成长之路】编写web应用

文章目录编写Web应用一、介绍二、创建项目2.1 创建wiki数据结构2.2 介绍net/http包（小插曲）2.3 使用 net/http 提供 wiki 页面2.4 编辑Pages2.5 html/template包2.6 处理不存在的页面2.7 保存页面2.8 错误处理2.9 模板缓存2.10 验证2.11 函数文字和闭包…...

编程日记 2025/7/20 23:31:49

Java 对象头、Mark Word、monitor与synchronized关联关系以及synchronized锁优化

1. 对象在内存中的布局分为三块区域： （1）对象头（Mark Word、元数据指针和数组长度） 对象头：在32位虚拟机中，1个机器码等于4字节，也就是32bit，在64位虚拟机中&#xff0…...

编程日记 2025/7/27 17:38:34

安宝特分享 | 如何利用AR技术革新医疗实践：从远程急救到多学科协作

AR技术在国内外医院的应用在现代医疗环境中，患者面临的挑战依然严峻：看病难、看病远、看病急。这些问题不仅影响了患者的治疗效果，也让医务工作者倍感压力。幸运的是，随着增强现实（AR）技术的发展&#xf…...

编程日记 2025/7/27 5:50:30

小米note pro一代(leo)线刷、twrp、magisk、TODO: android源码编译

本文主要说android5 整体思路 android 5.1 twrp magisk Zygisk(Riru) Dreamland(xposed) Riru不支持android5.1, 因此只能选择Zygisk : 如果你正在使用 Android 5，你必须使用 Zygisk 因为 Riru 并不支持 Android 5. 基于magisk之上的xposed 其中提到的作者…...

编程日记 2025/7/25 4:41:13

vue2-基础核心

vue简介动态构建用户界面的渐进式 JavaScript 框架 vue的特点: 遵循MVVM模式采用组件化模式，提高代码复用率，让代码更好维护声明式编码，无需直接操作DOM，提高开发效率，编码简洁、体积小，运行效率高本…...

编程日记 2025/7/28 7:35:26

使用前端技术创建 QR 码生成器 API1

前言 QR码（Quick Response Code）是一种二维码，于1994年开发。它能快速存储和识别数据，包含黑白方块图案，常用于扫描获取信息。QR码具有高容错性和快速读取的优点，广泛应用于广告、支付、物流等领域。通过扫…...

编程日记 2025/7/28 20:24:46

天云数据参编行业标准｜《Maas模型服务协议要求》标准正式发布

随着各行业对大模型的应用需求日益增多，模型即服务（MaaS）发展迅速，MaaS将AI模型以服务的方式提供给用户，降低模型使用门槛。当前产业界已推出诸多MaaS产品，并集成和提供了大量模型服务，然而对于…...

编程日记 2025/7/27 23:07:52

观察者模式和订阅模式

观察者模式和订阅模式在概念上是相似的，它们都涉及到一个对象（通常称为“主题”或“发布者”）和多个依赖对象（称为“观察者”或“订阅者”）之间的关系。然而，尽管它们有相似之处，但在某些方面也…...

编程日记 2025/7/7 22:56:53

Mac设置java环境变量

Mac电脑中存在多个jdk版本，如何配置java环境变量为指定版本jdk？一、查看所有已安装的 JDK 版本 /usr/libexec/java_home -V二、临时设置 export JAVA_HOME=$(/usr/libexec/java_home -v 1.8)三、永久设置如果需要永久使用指定版...

编程日记 2025/7/28 8:07:12