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

Vite初始化Vue3+Typescrpt项目

初始化项目

安装 Vite

首先,确保你的 Node.js 版本 >= 12.0.0。然后在命令行中运行以下命令来创建一个 Vite + Vue 3 + TypeScript 的项目模板:

npm init vite@latest

在这里插入图片描述

进入项目目录

创建完成后,进入项目目录:

cd vue3-demo

启动开发服务器

在项目目录中,使用以下命令启动开发服务器:

npm run dev

项目结构

以下是项目的基本目录结构:

├── publish/
└── src/├── assets/                    // 静态资源目录├── components/                // 公共组件目录├── hooks/                     // hooks函数目录├── plugins/                   // 插件目录├── router/                    // 路由配置目录├── store/                     // 状态管理目录├── styles/                    // 通用 CSS 目录├── utils/                     // 工具函数目录├── views/                     // 页面组件目录├── App.vue├── main.ts
├── tests/                         // 单元测试目录
├── index.html
├── tsconfig.json                  // TypeScript 配置文件
├── vite.config.ts                 // Vite 配置文件
└── package.json

TypeScript 配置

安装 Node 类型定义

如果你需要在项目中使用 Node.js 的类型定义,你可以安装 @types/node

npm install @types/node --save-dev

或者在 tsconfig.json 中添加:

"types": ["node"
]

tsconfig.json

以下是 tsconfig.json 的配置内容:

{"compilerOptions": {"target": "esnext","module": "esnext","moduleResolution": "node","esModuleInterop": true,"strict": true,"jsx": "preserve","experimentalDecorators": true,"allowSyntheticDefaultImports": true,"sourceMap": true,"baseUrl": ".","types": ["node"],"paths": {"@/*": ["src/*"]},"lib": ["esnext","dom","dom.iterable","scripthost"]},"include": ["src/**/*.ts","src/**/*.vue"],"exclude": ["node_modules"]
}

路由配置

安装 Vue Router

安装 Vue Router 4:

npm install vue-router@4

配置路由

创建 src/router/index.ts 并添加以下内容:

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HelloWorld from '../components/HelloWorld.vue'const routes: Array<RouteRecordRaw> = [{path: '/',name: 'HelloWorld',component: HelloWorld,}
]const router = createRouter({history: createWebHistory(),routes
})export default router

在 main.ts 中使用路由

src/main.ts 中添加以下代码来使用路由:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(router).mount('#app')

状态管理

安装 Pinia

安装 Pinia 作为状态管理库:

npm install pinia

在 main.ts 中使用 Pinia

src/main.ts 中添加以下代码来使用 Pinia:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'const app = createApp(App)
const pinia = createPinia()
app.use(router).use(pinia).mount('#app')

样式预处理器

安装 Sass

安装 Sass 作为 CSS 预处理器:

npm i sass -D

安装 Element Plus

在项目根目录下打开命令行工具,运行以下命令来安装 Element Plus:

npm install element-plus

完整引入

一次性引入 Element Plus 的所有组件和样式,在 main.ts 文件写入:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'const app = createApp(App)app.use(router)
app.use(createPinia())
app.use(ElementPlus)app.mount('#app')

一般不推荐这种写法,因为打包后的文件太大,下面介绍官方推荐的方法

按需引入

如果你想要按需引入 Element Plus 的组件和样式,你需要安装额外的插件 unplugin-vue-componentsunplugin-auto-import 来实现自动导入。

首先,安装这两个插件:

npm install unplugin-vue-components unplugin-auto-import -D

然后,在 vite.config.ts 文件中配置它们:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})

这样配置后,你就可以在组件中直接使用 Element Plus 的组件,而不需要在每个文件中单独导入。

  • 禁用 Vetur 插件,安装 Volar 插件。

在这里插入图片描述

  • 在ts文件里会出现导入 vue 文件后,提示 找不到模块‘xxx.vue’或其相应的类型声明

解决方式:

在项目根目录新建一个 xx.d.ts

declare module '*.vue' {import { ComponentOptions } from 'vue'const componentOptions: ComponentOptionsexport default componentOptions
}

相关文章:

Vite初始化Vue3+Typescrpt项目

初始化项目 安装 Vite 首先&#xff0c;确保你的 Node.js 版本 > 12.0.0。然后在命令行中运行以下命令来创建一个 Vite Vue 3 TypeScript 的项目模板&#xff1a; npm init vitelatest进入项目目录 创建完成后&#xff0c;进入项目目录&#xff1a; cd vue3-demo启动…...

深入剖析【C++继承】:单一继承与多重继承的策略与实践,解锁代码复用和多态的编程精髓,迈向高级C++编程之旅

​​​​​​​ &#x1f31f;个人主页&#xff1a;落叶 &#x1f31f;当前专栏: C专栏 目录 继承的概念及定义 继承的概念 继承定义 定义格式 继承基类成员访问⽅式的变化 继承类模板 基类和派⽣类间的转换 继承中的作⽤域 隐藏规则 成员函数的隐藏 考察继承【作⽤…...

地级市能源消耗数据(2006至2021)含原始数据、计算过程、计算结果-最新出炉

能源消耗数据分析-2006-2021年地级市能源消耗数据&#xff08;原始数据计算过程结果&#xff09; 下载链接-点它&#x1f449;&#x1f449;&#x1f449;&#xff1a;https://download.csdn.net/download/qq_67479387/89911272 全国能源消耗概况 2021年&#xff0c;我国单位…...

MySQL技巧之跨服务器数据查询:基础篇-A数据库与B数据库查询合并

MySQL技巧之跨服务器数据查询&#xff1a;基础篇-A数据库与B数据库查询合并 上一篇已经描述&#xff1a;借用微软的SQL Server ODBC 即可实现MySQL跨服务器间的数据查询。 而且还介绍了如何获得一个在MS SQL Server 可以连接指定实例的MySQL数据库的链接名: MY_ODBC_MYSQL 以…...

AutoSAR CP DoIP规范导读

主要功能和用途 诊断通信协议实现 遵循标准&#xff1a;遵循ISO 13400 - 2标准&#xff0c;实现了诊断通信在IP网络上的传输协议和网络层服务&#xff0c;包括数据封装、传输、路由等功能。 多种消息支持 车辆识别与公告&#xff1a;能够进行车辆识别请求和响应&#xff0c;…...

Window下PHP安装最新sg11(php5.3-php8.3)

链接: https://pan.baidu.com/s/10yyqTJdwH_oQJnQtWcwIeA 提取码: qz8y 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 (链接失效联系L88467872) 1.下载后解压文件&#xff0c;将对应版本的ixed.xx.win文件放进php对应的ext目录下&#xff0c;如图所示 2.修改ph…...

2024华为OD机试真题---中文分词模拟器

华为OD机试中的中文分词模拟器题目&#xff0c;通常要求考生对给定的不包含空格的字符串进行精确分词。这个字符串仅包含英文小写字母及英文标点符号&#xff08;如逗号、分号、句号等&#xff09;&#xff0c;同时会提供一个词库作为分词依据。以下是对这类题目的详细解析 一…...

Kubernetes网络揭秘:从DNS到核心概念,一站式综述

文章目录 一.overlay vs underlayL2 underlayL3 underlay 二、calico vs flannel2.1 calico架构2.2 flannel架构 三、iptables四、Vxlan五、kubernetes网络架构综述六、DNS七、Kubernetes域名解析策略 一.overlay vs underlay overlay网络是在传统网络上虚拟出一个虚拟网络&am…...

C#封装EPPlus库为Excel导出工具

1&#xff0c;添加NUGet包 2&#xff0c;封装工具类 using OfficeOpenXml; using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Reflection;namespace GMWPF.utils {public class ExcelUtil<T>{/// <summary>///…...

【LeetCode】【算法】461. 汉明距离

LeetCode 461. 汉明距离 题目描述 两个整数之间的 汉明距离 指的是这两个数字对应二进制位不同的位置的数目。 给你两个整数 x 和 y&#xff0c;计算并返回它们之间的汉明距离。 思路 思路&#xff1a;将两个数转成二进制后求异或结果&#xff0c;就是它们之间的汉明距离。…...

Docker Compose部署Rabbitmq(延迟插件已下载)

整个工具的代码都在Gitee或者Github地址内 gitee&#xff1a;solomon-parent: 这个项目主要是总结了工作上遇到的问题以及学习一些框架用于整合例如:rabbitMq、reids、Mqtt、S3协议的文件服务器、mongodb github&#xff1a;GitHub - ZeroNing/solomon-parent: 这个项目主要是…...

生信技能62 - 常用机器学习算法的R语言实现

1. 加载R包和数据 # 安装R包, 是否update统一选择不更新n BiocManager::install("caret") BiocManager::install("randomForest") BiocManager::install("gbm") BiocManager::install("kernlab") BiocManager::install("glmnet…...

【3D Slicer】的小白入门使用指南二

3D Slicer中DICOM数据加载和三维可视化 任务 数据集下载和解压缩 加载和查看DICOM数据 1)将第一个数据集文件夹,整个往3Dslicer左侧拖动即可 得到 2)选中右侧patient 1就可显示出该患者的基本信息 (第二行蓝色是研究信息;第三行蓝色是序列信息)...

部署搭建AI相关项目时,不用魔法也能轻松自动下载所需大模型

背景 最近搭建了许多AI相关的自动化服务&#xff0c;有些时候因为国内服务器墙了 huggingface.co 访问&#xff0c;导致一些依赖文件和模型下载不下来&#xff0c;手动去下载又特别麻烦&#xff0c;今天教你一个小招&#xff0c;轻松解决这个问题 开搞 1&#xff1a;首先确定…...

zookeeper之节点基本操作

ZooKeeper是一个分布式协调服务,它的节点操作包括创建、查询、更新、删除等,以下是ZooKeeper节点的基本操作介绍: 1. 创建节点 持久节点(Persistent Node) 含义:持久节点是ZooKeeper中最基本的节点类型。创建后,除非显式删除,否则它将一直存在于ZooKeeper树中,即使创…...

技术最好 ≠ 最适合:数字化转型切忌盲目追求最先进的技术

企业引入新兴技术时面临的挑战 企业在引入新兴技术时会面临一定挑战&#xff0c;根据调查结果显示&#xff0c;企业在引入新兴技术时做出决策的三个最重要考量因素分别是&#xff1a; 价格与投资回报 新兴技术成熟度 新兴技术与业务的适配性 不要盲目追求最先进的技术 企业…...

数字IC后端教程之Innovus hold violation几大典型问题

今天小编给大家分享下数字IC后端实现Physical Implementation过程中经常遇到的几个hold violation问题。每个问题都是小编自己在公司实际项目中遇到的。 数字后端实现静态时序分析STA Timing Signoff之min period violation Q1: 在Innouvs postCTS时序优化的log中我们经常会看…...

rust并发

文章目录 Rust对多线程的支持std::thread::spawn创建线程线程与 move 闭包 使用消息传递在线程间传送数据std::sync::mpsc::channel()for received in rx接收两个producer 共享状态并发std::sync::Mutex在多个线程间共享Mutex&#xff0c;使用std::sync::Arc 参考 Rust对多线程…...

力扣 最小路径和

又是一道动态规划基础例题。 题目 这道题可以类似不同路径。先把左上角格子进行填充&#xff0c;然后用一个数组去更新每走到一个格的数字总和&#xff0c;首先处理边界问题&#xff0c;把最左边的列只能由上方的行与原来的格子数值的和&#xff0c;同理&#xff0c;最上方的行…...

Scala中的可变Map操作:简单易懂指南 #Scala Map #Scala

引言 在编程中&#xff0c;Map是一种常见的数据结构&#xff0c;用于存储键值对。Scala提供了不可变Map和可变Map两种类型&#xff0c;它们在处理数据时有不同的特性和用途。本文将通过一个简单的示例&#xff0c;带你了解Scala中可变Map的基本操作&#xff0c;包括添加元素、…...

利用ngx_stream_return_module构建简易 TCP/UDP 响应网关

一、模块概述 ngx_stream_return_module 提供了一个极简的指令&#xff1a; return <value>;在收到客户端连接后&#xff0c;立即将 <value> 写回并关闭连接。<value> 支持内嵌文本和内置变量&#xff08;如 $time_iso8601、$remote_addr 等&#xff09;&a…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

Keil 中设置 STM32 Flash 和 RAM 地址详解

文章目录 Keil 中设置 STM32 Flash 和 RAM 地址详解一、Flash 和 RAM 配置界面(Target 选项卡)1. IROM1(用于配置 Flash)2. IRAM1(用于配置 RAM)二、链接器设置界面(Linker 选项卡)1. 勾选“Use Memory Layout from Target Dialog”2. 查看链接器参数(如果没有勾选上面…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

RSS 2025|从说明书学习复杂机器人操作任务:NUS邵林团队提出全新机器人装配技能学习框架Manual2Skill

视觉语言模型&#xff08;Vision-Language Models, VLMs&#xff09;&#xff0c;为真实环境中的机器人操作任务提供了极具潜力的解决方案。 尽管 VLMs 取得了显著进展&#xff0c;机器人仍难以胜任复杂的长时程任务&#xff08;如家具装配&#xff09;&#xff0c;主要受限于人…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

云原生周刊:k0s 成为 CNCF 沙箱项目

开源项目推荐 HAMi HAMi&#xff08;原名 k8s‑vGPU‑scheduler&#xff09;是一款 CNCF Sandbox 级别的开源 K8s 中间件&#xff0c;通过虚拟化 GPU/NPU 等异构设备并支持内存、计算核心时间片隔离及共享调度&#xff0c;为容器提供统一接口&#xff0c;实现细粒度资源配额…...