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.hqwc.cn/news/341222.html

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

相关文章

Open CV 图像处理基础:(六)在Java中使用 Open CV进行图片翻转和图片旋转

在Java中使用 Open CV进行图片翻转和图片旋转 目录 在Java中使用 Open CV进行图片翻转和图片旋转前言图片翻转函数代码示例其它翻转方向垂直翻转两轴翻转 图片旋转函数代码示例 Open CV 专栏导航 前言 在Java中使用OpenCV进行图片翻转和旋转是一种基本的图像处理技术&#xff0…

单片机中的PWM(脉宽调制)的工作原理以及它在电机控制中的应用。

目录 工作原理 在电机控制中的应用 脉宽调制(PWM)是一种在单片机中常用的控制技术,它通过调整信号的脉冲宽度来控制输出信号的平均电平。PWM常用于模拟输出一个可调电平的数字信号,用于控制电机速度、亮度、电压等。 工作原理 …

Java21 如何使用switch case

1. Java8 和 Java21 Java8 引入字符串和枚举 Java21 可以返回值, yield关键字, switch 表达式, 模式匹配, null值处理 2. 代码案例 1. Java8 public static void java8() {String day "tuesday";switch (day) {case "monday":System.out.println("w…

使用Notepad++将多行数据合并成一行

步骤 1、按CtrlF,弹出“替换”的窗口; 2、选择“替换”菜单; 3、“查找目标”内容输入为:\r\n; 4、“替换为”内容为空; 5、“查找模式”选择为正则表达式; 6、设置好之后,点击“全…

ChatGPT:人工智能与人类交流的桥梁

在人工智能的浪潮中,ChatGPT以其独特的交流能力成为了一个亮点。作为一个基于强大的GPT-4模型的聊天机器人,ChatGPT不仅仅是技术的展示,它更是人工智能与人类交流的桥梁。 人工智能的语言理解革命 ChatGPT的出现标志着人工智能在语言理解和…

K8S集群重新初始化--详细过程

K8S集群重新初始化 1、master节点1.1、在master节点执行下面reset命令:1.2、手动清除配置信息,这一步很关键:1.3、重新引导集群1.4、创建配置目录,并复制权限配置文件到用户目录下:1.5 查看集群状态1.6 安装Calico网络…

微信小程序开发WebSocket通讯

官方文档说明:入口 WebSocket连接的链接只支持wss加密方式,且只能用域名的方式 该域名还要在微信公众平台的小程序中登记才能使用,开发->开发管理->服务器域名->修改 该域名要和https使用的一致 以域名地址:dtu.aab…

OpenAI推出GPT商店和ChatGPT Team服务

🦉 AI新闻 🚀 OpenAI推出GPT商店和ChatGPT Team服务 摘要:OpenAI正式推出了其GPT商店和ChatGPT Team服务。用户已经创建了超过300万个ChatGPT自定义版本,并分享给其他人使用。GPT商店集结了用户为各种任务创建的定制化ChatGPT&a…

杨中科 .NETCORE NuGet

一 简介 Zack.EFCore.Batch 使用这个开发包Entity Framework Core用户可以使用LINQ语句删除或者更新多条数据库记录,操作只执行一条SQL语句并且不需要首先把实体对象加载到内存中。这个开发包支持Entity Framework Core 5.0以及更高版。 操作说明: 第一步 Install-…

恒创科技:解决Windows服务器磁盘空间不足的问题

​  服务器硬盘的大小是决定空间是否充足的主要因素。但在日常使用中,服务器和网站备份会消耗大量存储空间,如果维护不当,最终将耗尽您的容量。同样,日志文件、临时文件和数据库可以在硬盘驱动器上或回收站中无休止地建立。当您…

从吸引外资连续三年高增长看中国IT云计算科技行业的发展

​引言:开放合作共发展,砥砺前行迎未来 【科技明说 | 科技热点关注】 我今天刚注意到商务部公布的最新数据,2019年至2021年,中国吸引外资实现连续三年高增长。 2022年前11个月实际使用外资金额11560.9亿元,为历史同期…

Word不同部分(分节)设置页眉和页码的使用指南——附案例操作

Word页眉和页码分节设置的使用指南 目录 Word页眉和页码分节设置的使用指南摘要1. 插入分节符2. 设置不同的页眉3. 设置不同的页码4. 调整页码的起始值5. 删除或更改分节6. 预览和调整 摘要 在撰写word文档时,我们经常需要在不同的部分应用不同的页眉和页码格式。在…