vue3+vite+ts+pinia新建项目(略详细版)

1、新建项目

npm create vite@latest

2、安装依赖

yarn add vue-router yarn add -D @types/node vite-plugin-pages sass sass-loader

3、配置别名
//vite.config.ts 
import { defineConfig } from 'vite'
import path from 'node:path' 
export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, 'src') } } 
})

关于别名的问题

处理方式:

tsconfig.json

{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } }

处理方式

npm install @types/node --save-dev

4、安装配置unocss

npm i -D unocss 或者 yarn add unocss --dev

import Unocss from '@unocss/vite'
import { presetUno, presetAttributify, presetIcons } from 'unocss' 
export default defineConfig({ plugins: [Unocss({ presets: [// 预设一些处理属性 个人的预设presetUno(),presetAttributify(), presetIcons({ // options extraProperties: { display: 'inline-block' } }) ]})],
})
5、配置tsconfig.json 和 tsconfig.node.json
//tsconfig.node.json 
{ "compilerOptions": { "composite": true, "module": "esnext", "moduleResolution": "node", "typeRoots": ["./node_modules/@types/", "./types"] }, "include": ["vite.config.ts", "src/**/*.vue", "types/*.d.ts"] }//tsconfig.json 
{ "compilerOptions"

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

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

相关文章

如何有效提高矢量网络分析仪的动态范围

动态范围是网络分析仪(VNA)接收机的最大输入功率与最小可测量功率(本底噪声)之间的差值,如图所示,要使测量有效,输入信号必须在这些边界内。 如果需要测量信号幅度非常大的变化,例如…

openai自定义API操作 API (openai.custom):OpenAI API 实现电商平台的智能库存管理

在电商行业中,库存管理是至关重要的环节之一。一个高效的库存管理系统可以确保商品的正常供应,避免缺货或积压现象,从而提高销售效率和客户满意度。然而,传统的库存管理方式往往存在一些问题,如数据不准确、响应不及时…

版本控制系统教程

1.Git的基本介绍 1.1 Git的概念 Git是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git是Linus Torvalds为了帮助管理Linux内核开发而开发的一个开放源码的版本控制软件.Git与常用的版本控制工具CVS,Subversion等不同&#xff…

JavaWEB学习笔记 2024-1-10 --JavaScript

上一篇 文章目录 3.JavaScript3.1第一个JS程序3.2JS的引入方式3.3JS中函数定义3.4函数的触发3.5查看浏览器控制台输出3.6数据类型3.7变量3.8运算符3.9流程控制语句3.10JS中的异常处理 3.JavaScript 是由网景公司发布,最开始的名字为LiveScript,之后和sun公司合作,改名为JavaSc…

[linux] git clone一个repo,包括它的子模块submodule

How do I "git clone" a repo, including its submodules? - Stack Overflow git clone git://github.com/foo/bar.git cd bar git submodule update --init --recursive

大模型关于Lora论文集合

《Chain of LoRA:Efficient Fine-tuning of Language Models via Residual Learning》 Chain of LoRA (COLA),这是一种受 Frank-Wolfe 算法启发的迭代优化框架,旨在弥合 LoRA 和全参数微调之间的差距,而不会产生额外的计算成本或内存开销。CO…

状态机和相关算法应用分析

简介 状态机(State Machine)在软件编程中是一个数学模型,可以用状态转移图表示,指的是:现态在满足某个条件时,进行动作(状态转移),从而转为另一个状态(次态&…

【c++】类和对象1

1.面向过程和面向对象初步认识 C语言是面向过程的,关注的是过程,分析出求解问题的步骤,通过函数调用逐步解决问题。 C是基于面向对象的,关注的是对象,将一件事情拆分成不同的对象,靠对象之间的交互完 成 …

编程江湖:Python探秘之旅-----Python 实用工具和库(七)

在一个普通的工作日,团队聚集在一起讨论如何提升开发效率。这时,林克斯加入了讨论,他是团队的技术专家,对 Python 的生态系统了如指掌。 林克斯:(满怀热情地)你们知道吗,Python 有一…

JavaScript高级程序设计读书记录(十二):函数

函数是ECMAScript中最有意思的部分之一,这主要是因为函数实际上是对象。每个函数都是Function 类型的实例,而 Function 也有属性和方法,跟其他引用类型一样。因为函数是对象,所以函数名就是 指向函数对象的指针,而且不…

[linux]编译一个ko文件并运行

一、需求 有一段代码需要在运行时加载注入内核中&#xff0c;当用户层需要访问时可以提供内核态环境去运行。 二、c代码构建 // #include <errno.h> // #include <string.h> // #include <stdio.h> // #include <fcntl.h> // #include <stdlib.h…

Windows安装Rust环境(详细教程)

一、 安装mingw64(C语言环境) Rust默认使用的C语言依赖Visual Studio&#xff0c;但该工具占用空间大安装也较为麻烦&#xff0c;可以选用轻便的mingw64包。 1.1 安装地址 (1) 下载地址1-GitHub&#xff1a;Releases niXman/mingw-builds-binaries GitHub (2) 下载地址2-W…

Formnext2024法兰克福3D打印增材制造展览会现正接受报名

Formnext2024法兰克福3D打印增材制造展览会现正接受报名 Formnext法兰克福国际精密成型及 3D 打印制造展览会将于2024年11月19日至22日在法兰克福举办。 Formnext法兰克福国际精密成型及 3D 打印制造展览会在2023年迎来了32,851名专业人士和管理人员(50%来自国际)&#xff0c…

Excel地址

解题思路&#xff1a; 根据题中歪歪和笨笨的话可以有两种解法。 1.输入的数为多大&#xff0c;则循环1多少次&#xff0c;当值为27时就要进行进位操作。这时要分情况讨论。 当集合中元素为一个时&#xff0c;如26&#xff0c;则需要变为1 1&#xff0c;集合元素个数加一。 当…

2023年全球软件质量效能大会(QECon上海站):核心内容与学习收获(附大会核心PPT下载)

会议聚焦于软件质量和效能的提升。在智能时代&#xff0c;随着数字化的深入人心&#xff0c;软件正在随着云计算、移动互联网、物联网等的发展而不断进化&#xff0c;软件对企业的发展愈加重要&#xff0c;大家对软件的质量要求也在从传统功能、性能、安全这些基础层面向着用户…

easyui datagrid无数据时显示无数据

这里写自定义目录标题 需求解决办法 需求 使用datagrid显示记录时&#xff0c;结果查询记录数为0&#xff0c;此时需要显示无数据。 示例代码 <table id"dg"></table>$(#dg).datagrid({url:datagrid_data.json,columns:[[{field:code,title:Code,widt…

【OCR】实战使用 - 如何提高识别文字的精准度?

实战使用 - 如何提高文字识别的精准度 我们在平常使用OCR的时候&#xff0c;经常会出现文字识别不精准的情况&#xff0c;我们改如何提高文字识别的精度呢&#xff1f; 以下是一些提高OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;文字识…

(超详细)5-YOLOV5改进-添加A2Attention注意力机制

1、在yolov5/models下面新建一个A2Attention.py文件&#xff0c;在里面放入下面的代码 代码如下&#xff1a; import numpy as np import torch from torch import nn from torch.nn import init from torch.nn import functional as Fclass DoubleAttention(nn.Module):def …

coco数据集格式转yolo数据格式

一、coco数据集是什么&#xff1f; COCO&#xff08;Common Objects in Context&#xff09;是一个广泛使用的目标检测和分割数据集&#xff0c;而YOLO&#xff08;You Only Look Once&#xff09;是一种流行的实时目标检测算法。 首先&#xff0c;导入了必要的库&#xff0c…

87.乐理基础-记号篇-反复记号(一)反复、跳房子

内容参考于&#xff1a;三分钟音乐社 上一个内容&#xff1a;86.乐理基础-记号篇-速度记号-CSDN博客 首先是反复记号表总结图&#xff1a; 当前是写前两个记号&#xff0c;其余记号后面写&#xff1a;这些反复记号最主要的目的很简单&#xff0c;还是为了节约纸张&#xff0c…