Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】

兼容性注意: Vite 需要 Node.js 版本 18+ 或 20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。【摘抄自vite官网】

在这里插入图片描述
这里我用的node版本是 v18.20.2

创建项目:

创建项目我们可以使用npmyarnpnpmbun

npm create vite@latest
yarn create vite
pnpm create vite
bun create vite

这里我要用pnpm
在这里插入图片描述
使用 npm install -g pnpm 就可以全局安装pnpm哈小伙伴们
ok!
在这里插入图片描述

输入项目名字:

这里我输入的是 platform
在这里插入图片描述

选择框架:

我需要写的项目为vue3项目,所以我这里选择vue。【上下左右箭头的上下控制选择,然后回车】
在这里插入图片描述

选择语法:

该项目是基于vue3的,当然选择我们的官配–>TS闪亮登场!
在这里插入图片描述
这样一个项目就初步搭建好了,是不是很简单呢?
接着我们使用他的提示来运行项目:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在浏览器的效果如下:
在这里插入图片描述

查看项目:

在这里插入图片描述
package.json文件中我们可以看到运行、打包命令;安装的依赖等相关内容。
在这里插入图片描述
vite 将静态页面放置在了根目录下面,而 vue cli 将静态页面放置在了 public 当中。
在这里插入图片描述
一般配置代理跨域在vite.config.js文件中

删除不必要文件:

  1. 入口文件:main.ts删除style.css
    在这里插入图片描述
    在这里插入图片描述

  2. 删除App.vue内部不必要内容
    在这里插入图片描述

  3. 删除component目录下的组件HelloWorld组件;在这里插入图片描述

  4. 删除里面的assets/vue.svg文件;
    在这里插入图片描述
    tsconfig.app.json飘红的,关掉vscode重新打开就ok了。遇到飘红别心急,拍个照发个圈。保持好~ 心 ~ 态 ~(摆pose)
    于是你得到了一个非常干净的vue项目:【干净的像你和你女神的聊天框一样(邪恶的笑)】
    在这里插入图片描述

.vscode文件作用:

难!道!真的!没有人!好奇过!.vscode 是揍嘛的吗?
没有好奇过的去站到墙边反思,学习不爱思考!!!

‌.vscode文件夹‌是Visual Studio Code(VSCode)编辑器的一种配置文件,主要用于自定义编辑器的行为、工作区设置以及特定语言的工作空间扩展。它通常出现在项目根目录下,包含多个配置文件,如settings.jsonextensions.jsonlaunch.jsontasks.json等,这些文件共同定义了项目的开发环境、调试配置、任务管理等‌。

好官方!好可怕!你36℃的文字怎么还是如!此!冷冰冰。ok~fine!看不懂没关系,反正偶尔用的也就是你最熟悉的settings.json。‌而settings.json‌是用来里存储项目级别的VSCode设置,覆盖用户级别的设置,如代码格式化工具、文件关联等‌。

博主有感而发:学习在于思考,没事多看官网

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

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

相关文章

计算机网络中的域名系统(DNS)及其优化技术

💓 博客主页:瑕疵的CSDN主页 📝 Gitee主页:瑕疵的gitee主页 ⏩ 文章专栏:《热点资讯》 计算机网络中的域名系统(DNS)及其优化技术 计算机网络中的域名系统(DNS)及其优化…

STM32单片机CAN总线汽车线路通断检测

目录 目录 前言 一、本设计主要实现哪些很“开门”功能? 二、电路设计原理图 1.电路图采用Altium Designer进行设计: 2.实物展示图片 三、程序源代码设计 四、获取资料内容 前言 随着汽车电子技术的不断发展,车辆通信接口在汽车电子控…

(实战)WebApi第13讲:怎么把不同表里的东西,包括同一个表里面不同的列设置成不同的实体,所有的给整合到一起?【前端+后端】、前端中点击标签后在界面中显示

一、实现全局跨域:新建一个Controller,其它的controller都继承它 1、新建BaseController 2、在后端配置,此处省略【详情见第12讲四、3、】 3、其它的控制器继承BaseController,这个时候就能够完成全局的跨域 【向后台传cookie和…

前缀和技巧解析

前缀和技巧解析 前缀和(Prefix Sum)是一种常用的算法技巧,用于高效地处理一系列连续子数组和的问题。通过构建一个额外的数组来存储从数组起始位置到当前位置的累计和,可以在常数时间内快速计算任意区间的和。 前缀和应用的典型…

Mysql每日一题(行程与用户,困难※)

今天给大家分享一个截止到目前位置,我遇到最难的一道mysql题目,非常建议大家亲手做一遍 完整代码如下,这道题的主要难点是它有两个外键,以前没遇到过,我也没当回事,分享一下错误经验哈 当时我写的where判断…

已解决:spark代码中sqlContext.createDataframe空指针异常

这段代码是使用local模式运行spark代码。但是在获取了spark.sqlContext之后,用sqlContext将rdd算子转换为Dataframe的时候报错空指针异常 Exception in thread "main" org.apache.spark.sql.AnalysisException: java.lang.RuntimeException: java.lang.Nu…

cooladmin 后端 查询记录

查询记录:pageQueryOp中列表查询的group by node ts controller代码如下 import { CoolController, BaseController } from cool-midway/core; import { Inject, Post, Get, Param } from midwayjs/decorator; import { ComparePricesPlanInfoEntity } from ../../…

cesium 3DTiles之pnts格式详解

Point Cloud 1 概述 点云(Point Cloud)瓦片格式用于高效流式传输大规模点云数据,常用于 3D 可视化中。每个点由位置(Position)和可选的属性定义,这些属性用来描述点的外观(如颜色、法线等&…

【SpringBoot】20 同步调用、异步调用、异步回调

Git仓库 https://gitee.com/Lin_DH/system 介绍 同步调用:指程序在执行时,调用方需要等待函数调用返回结果后,才能继续执行下一步操作,是一种阻塞式调用。 异步调用:指程序在执行时,调用方在调用函数后立…

ESLint 使用教程(五):ESLint 和 Prettier 的结合使用与冲突解决

系列文章 ESLint 使用教程(一):从零配置 ESLint ESLint 使用教程(二):一步步教你编写 Eslint 自定义规则 ESLint 使用教程(三):12个ESLint 配置项功能与使用方式详解 ES…

Qt_day5_常用类

常用类 目录 1. QString 字符串类(掌握) 2. 容器类(掌握) 2.1 顺序容器QList 2.2 关联容器QMap 3. 几种Qt数据类型(熟悉) 3.1 跨平台数据类型 3.2 QVariant 统一数据类型 3.3 QStringList 字符串列表 4. QD…

VBA学习笔记:基础知识

1.打开编辑器 工具-选项,可设置编辑器字体大小等 2. 运行 快捷键F5,或 运行-运行宏 若提示宏被禁止,解决办法之一:工具-宏-安全性-安全级-中,关闭excel重新打开,启用宏 保存文件格式为xla或xlam 3. 基本…

【CANOE】【学习】【DecodeString】字节转为中文字符输出

系列文章目录 文章目录 系列文章目录前言一、DecodeString 转为中文字节输出二、代码举例1.代码Demo2.DecodeString 函数说明函数语法:参数说明:返回值:使用示例:示例代码: 说明: 前言 有时候使用的时候&a…

超好用shell脚本NuShell mac安装

利用管道控制任意系统 Nu 可以在 Linux、macOS 和 Windows 上运行。一次学习,处处可用。 一切皆数据 Nu 管道使用结构化数据,你可以用同样的方式安全地选择,过滤和排序。停止解析字符串,开始解决问题。 强大的插件系统 具备强…

【Window主机访问Ubuntu从机——Xrdp配置与使用】

使用Xrdp在Window环境下远程桌面访问Ubuntu主机 文章目录 Ubuntu安装图形化界面Ubuntu安装Xrdp通过网线连接两台主机Window主机有线连接配置Ubuntu从机设置测试有线连接 Window主机打开远程桌面功能参考文章总结 Ubuntu安装图形化界面 sudo apt update sudo apt upgrade sudo …

ECharts图表图例8

用eclipse软件制作动态单仪表图 用java知识点 代码截图:

实验6记录网络与故障排除

实验6记录网络与故障排除 实验目的及要求: 通过实验,掌握如何利用文档记录网络设备相关信息并完成网络拓扑结构的绘制。能够使用各种技术和工具来找出连通性问题,使用文档来指导故障排除工作,确定具体的网络问题,实施…

读取文件内容、修改文件内容、识别文件夹目录(Web操作系统文件/文件夹详解)

前言 因 Unicode IDE 编辑器导入文件、文件夹需要,研究了下导入文件/文件夹的功能实现,发现目前相关文章有点少,故而记录下过程,如果有误,还望指正。(API的兼容性及相关属性、接口定义,请自行查看文件系统 …

【卡尔曼滤波】数据融合Fusion的应用 C语言、Python实现(Kalman Filter)

【卡尔曼滤波】数据融合Fusion的应用 C语言、Python实现(Kalman Filter) 更新以gitee为准: gitee地址 文章目录 卡尔曼滤波数据融合Python实现C语言实现多个数据如何融合附录:压缩字符串、大小端格式转换压缩字符串浮点数压缩Pac…

docker-hub 无法访问,使用windows魔法拉取docker images再上传到linux docker环境中

云机的服务器是可以docker拉取镜像的,但是本地的虚拟机、物理服务器等网络环境不好的情况,是无法访问docker-hub的,即使更换了docker镜像源国内源也无法使用。 本文章使用 在魔法网络环境下的windows,下载docker images后&#xf…