Vue3框架搭建:vue+vite+pina+typescript

一、使用vue-create创建一个vue3项目

仓库地址:GitHub - buguniao5213/LuArch: Front-end architecture

官方地址:GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project

原始目录结构如下:

vue3-project/
├── public/            # 静态资源目录,构建过程中会被直接复制,无需经过编译处理
│   ├── favicon.ico    # 网站图标
├── src/
│   ├── assets/        # 静态资源目录,包含图片、字体等未经过编译的文件
│   ├── components/    # 组件目录(.vue文件)
│   │   └── ...        # 各类组件目录
│   ├── router/        # 路由配置目录
│   ├── stores/        # 状态管理目录,此处使用pinia
│   ├── views/         # 主要页面目录
│   ├── App.vue        # 根组件,应用入口,通常包含路由视图和其他全局共享组件
│   └── main.ts        # 入口脚本,用于初始化Vue实例、引入并配置路由、状态管理等核心模块
├── .eslintrc.cjs      # Eslint 配置文件,用于定义项目的代码风格规范和错误检查规则
├── .gitignore         # Git忽略文件
├── .prettierrc.json   # Prettier 配置
├── index.html         # 入口HTML文件
├── package-lock.json  # npm 包管理器中用于锁定项目依赖版本的文件
├── package.json       # npm 包配置文件,包括项目依赖、脚本命令、项目信息等元数据
├── README.md          # 项目文档和说明文件,介绍项目结构、启动方式及注意事项等
├── tsconfig.app.json  # TypeScript 设置,为前端应用配置的
├── tsconfig.json      # TypeScript 项目的核心配置文件
├── tsconfig.node.json # 针对 Node.js 应用程序进行更细粒度的 TypeScript 编译设置
├── tsconfig.vitest.json # TypeScript 设置,为 Vitest 测试框架配置的
├── vite.config.ts     # Vite配置文件
└── vitest.config.ts   # Vitest配置文件

二、框架开发目录:

1、axios封装

2、相关配置和说明,包括vite、eslint等

3、router封装(静态)

4、………………

5、………………

6、(先开发,后补充+链接)

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

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

相关文章

ASP.NET MVC Lock锁的测试

思路:我们让后台Thread.Sleep一段时间,来模拟一个耗时操作,而这个时间可以由前台提供。 我们开启两个或以上的页面,第一个耗时5秒(提交5000),第二个耗时1秒(提交1000)。 期望的测试结果: 不加Lock锁&…

胡克定律(Hooke‘s Law)

胡克定律(Hooke’s Law) flyfish 在一个简单的阻尼振动系统中,力可以分为多个组成部分,其中包括弹力、阻力等。胡克定律 描述了弹力与位移之间的关系,是研究弹簧系统中弹力的基础。 胡克定律(Hooke’s L…

192.168.1.1路由器管理系统使用教程

节选自:192.168.1.1路由器管理系统-厂商有哪些-如何使用-无法登录原因-苏州稳联 什么是 192.168.1.1 路由器管理系统? 192.168.1.1 是大多数家庭路由器的默认 IP 地址,用于访问路由器的管理控制台。通过这个管理系统,用户可以配…

【多媒体】Java实现MP4和MP3音视频播放器【JavaFX】【更多功能的播放器】【音视频播放】

在Java中播放视频可以使用多种方案,最常见的是通过Swing组件JFrame和JLabel来嵌入JMF(Java Media Framework)或Xuggler。不过,JMF已经不再被推荐使用,而Xuggler是基于DirectX的,不适用于跨平台。而且上述方案都需要使用第三方库。…

websockt初始化,创建一个webSocket示例

写文思路: 以下主要从几个方面着手写websocket相关,包括以下:什么是webSocket,webSocket的优点和劣势,webSocket工作原理,webSocket握手示例,如何使用webSocket(使用webSocket的一个示例)&#…

2024中国大学专业排名:生态、地理、草业、林学、资环

生态学、林学、地理科学、草业科学、农业资源与环境、大气科学、农学、地球化学、水土保持与荒漠化防治、自然地理与资源环境、地理信息科学、应用气象学共12个专业。 一、生态学 二、林学 三、地理科学 四、草业科学 五、农业资源与环境 六、大气科学 七、农学 八、地球化学 九…

Memcached 介绍与详解及在Java Spring Boot项目中的使用与集成

Memcached 介绍 Memcached 是一种高性能的分布式内存对象缓存系统,主要用于加速动态Web应用以减少数据库负载,从而提高访问速度和性能。作为一个开源项目,Memcached 被广泛应用于许多大型互联网公司,如Facebook、Twitter 和 YouT…

精准注入:掌握Conda包依赖注入的艺术

精准注入:掌握Conda包依赖注入的艺术 引言 在复杂的软件开发和数据分析项目中,依赖管理是确保项目顺利运行的关键。Conda作为功能强大的包管理器,不仅能够处理Python包的依赖,还支持高级的依赖注入技术,允许开发者更…

【《无主之地3》风格角色渲染在Unity URP下的实现_角色渲染(第四篇) 】

文章目录 概要描边问题外秒变分叉解决办法1:测试效果如下:外秒变分叉解决办法2:URP管线下PBR渲染源码关键词解释:完整shader代码如下:URP管线下二次元皮肤渲染源码URP管线下二次元头发渲染源码简要介绍文章的目的、主要内容和读者将获得的知识。 概要 提示:《无主之地3》…

希喂、鲜朗和牧野奇迹主食冻干怎么样?第一次喂冻干哪款更好

我是个宠物医生,每天很长时间都在跟猫猫狗狗打交道,送到店里来的猫猫状态几乎是一眼就能看出来,肥胖、肝损伤真是现在大部分家养猫正面临的,靠送医治疗只能减缓无法根治,根本在于铲屎官的喂养方式。 从业这几年&#…

js前端GBK(url)编码解码简单实现

baidu了一堆,发现基本都需要下载并调用第三方组件,嫌麻烦,最后找到这篇文章:https://www.cnblogs.com/index-html/p/js-str-to-gbk-ultra-lite.html 在他的基础上完善了该方法,调用方式: decStr2 GBKenco…

SuperMap GIS基础产品FAQ集锦(20240709)

一、SuperMap iDesktopX 问题1:请问针对iDesktopX地质体建模功能的数据组织格式相关问题请教哪位同事? 11.1.1 【解决办法】“地质体构建”功能可依据多个地质点数据集实现对地质体的构建,构建地质体中点图层的顺序对应实际地层由高到低。可参考官方博…

全能型CAE/CFD建模工具SimLab 详解Part1: Geomtry,轻松集成力学、电磁学、疲劳优化等功能

SimLab的建模功能 SimLab集成了结构力学,流体力学,电磁学,疲劳和优化等功能,是全能型的CAE / CFD建模工具。 具有强大的几何、网格编辑功能,能够快速的清理复杂模型,减少手动修复的工作量,提高…

考研数学什么时候开始强化?如何保证进度不掉队?

晚了。我是实在人,不给你胡乱吹,虽然晚了,但相信我,还有的救。 实话实说,从七月中旬考研数一复习完真的有点悬,需要超级高效快速... 数二的时间也有点紧张... 中间基本没有试错的时间,让你换…

【linux】内核文件创建以及写文件

在测试创建文件时&#xff0c;测试发现需要提升内存访问权限到 KERNEL_DS。内核使用系统调用参数肯定是内核空间&#xff0c;为了不让这些系统调用检查参数所以必须设置set_fs(KERNEL_DS)才能使用该系统调用。记录一下 #include <linux/kernel.h> #include <linux/mo…

使用zip命令压缩大文件并分割,再合并成单个文件的操作指南

在处理大型文件&#xff08;如超过100GB的文件&#xff09;时&#xff0c;直接进行压缩和传输可能会遇到存储或网络带宽的限制。为了更有效地管理这些文件&#xff0c;我们可以先将它们使用zip命令进行压缩&#xff0c;然后使用split命令将压缩后的文件分割成多个较小的部分&am…

linux宝塔负载状态100%解决办法

宝塔面板负载状态显示100% 接着使用top命令查看了一下&#xff0c;发现cpu利用率很低&#xff0c;load却很高 通过使用 ps -axjf命令查看是否存在D状态进程 D 状态是指不可中断的睡眠状态&#xff0c;该状态的进程无法被 kill&#xff0c;也无法自行退出&#xff0c;只能通过恢…

使用各向异性滤波器和图像处理方法进行脑肿瘤检测(MATLAB)

医学图像分割一直以来都是计算机辅助诊断领域的研究热点。在医学图像的处理和分析中&#xff0c;对图像中感兴趣区域的准确分割尤其关键。要对感兴趣区域进行分类识别&#xff0c;首先要从图像中把感兴趣区域精确分割出来&#xff0c;然后有针对性地对感兴趣区域提取特征并分类…

【FFmpeg】avcodec_send_packet函数

目录 1.avcodec_send_packet1.1 解码入口函数&#xff08;decode_receive_frame_internal&#xff09;1.1.1 软解入口&#xff08;decode_simple_receive_frame&#xff09; FFmpeg相关记录&#xff1a; 示例工程&#xff1a; 【FFmpeg】调用ffmpeg库实现264软编 【FFmpeg】调…