当前位置: 首页 > 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;包括添加元素、…...

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

安卓基础(aar)

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

人工智能(大型语言模型 LLMs)对不同学科的影响以及由此产生的新学习方式

今天是关于AI如何在教学中增强学生的学习体验&#xff0c;我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育&#xff0c;这并非炒作&#xff0c;而是已经发生的巨大变革。教育机构和教育者不能忽视它&#xff0c;试图简单地禁止学生使…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

Java多线程实现之Runnable接口深度解析

Java多线程实现之Runnable接口深度解析 一、Runnable接口概述1.1 接口定义1.2 与Thread类的关系1.3 使用Runnable接口的优势 二、Runnable接口的基本实现方式2.1 传统方式实现Runnable接口2.2 使用匿名内部类实现Runnable接口2.3 使用Lambda表达式实现Runnable接口 三、Runnabl…...

手动给中文分词和 直接用神经网络RNN做有什么区别

手动分词和基于神经网络&#xff08;如 RNN&#xff09;的自动分词在原理、实现方式和效果上有显著差异&#xff0c;以下是核心对比&#xff1a; 1. 实现原理对比 对比维度手动分词&#xff08;规则 / 词典驱动&#xff09;神经网络 RNN 分词&#xff08;数据驱动&#xff09…...

uniapp获取当前位置和经纬度信息

1.1. 获取当前位置和经纬度信息&#xff08;需要配置高的SDK&#xff09; 调用uni-app官方API中的uni.chooseLocation()&#xff0c;即打开地图选择位置。 <button click"getAddress">获取定位</button> const getAddress () > {uni.chooseLocatio…...

构建Docker镜像的Dockerfile文件详解

文章目录 前言Dockerfile 案例docker build1. 基本构建2. 指定 Dockerfile 路径3. 设置构建时变量4. 不使用缓存5. 删除中间容器6. 拉取最新基础镜像7. 静默输出完整示例 docker runDockerFile 入门syntax指定构造器FROM基础镜像RUN命令注释COPY复制ENV设置环境变量EXPOSE暴露端…...