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,一经查实,立即删除!

相关文章

低代码集成多方API的简单实现

在现代软件开发中,集成多个API服务提供商已成为常见需求。然而,不同的API认证机制和数据格式使得集成过程变得复杂且耗时。为了应对这些挑战,本文将介绍一种低代码解决方案,通过配置化管理和简化的代码逻辑,帮助开发者…

C++ 编程基础(5)类与对象 | 5.8、面向对象五大原则

文章目录 一、面向对象五大原则1、单一功能(Single Responsibility Principle, SRP)2、开放封闭原则(Open/Closed Principle, OCP)3、里氏替换原则(Liskov Substitution Principle, LSP)4、接口隔离原则&am…

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

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

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

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

第二十一课 Vue组件实用示例

Vue组件实用示例 本课主要介绍组件的一些小练习&#xff0c;通过这些小练习巩固下之前课程中的学习 1&#xff09;组件中值的双向绑定 <div id"app"><test></test> </div> <script>Vue.component(test, {template: <div><…

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

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

前缀和技巧解析

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

云安全之云计算基础

0x00 前言 本文主要是针对云计算相关的基础梳理和整理。 云计算 NIST 800-145ISO/IEC 17788ISO/IEC 17789云安全 NIST 500-299 云安全ISO / IEC FDIS 27017 云安全0x01 云计算基础 什么是云计算: 一种新的运作模式和一组用于管理计算资源共享池的技术。云计算是一种颠覆性的…

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

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

离线 快速搭建 docker docker-compose k8s 环境

所需资源 sealos_5.0.1_linux_arm64.tar.gzkubernetes.tar等docker-compose-linux-aarch64 离线安装sealos&#xff0c;用于安装k8sdocker 首先安装sealos工具 tar zxvf sealos_5.0.1_linux_arm64.tar.gz sealos && chmod x sealos && mv sealos /usr/bin*…

Python的Web请求:requests库入门与应用

Python的Web请求&#xff1a;requests库入门与应用 在Python中&#xff0c;进行网络请求和获取数据是许多应用程序的基础功能。requests库是Python中最流行的HTTP库之一&#xff0c;它以简洁、易用、功能强大的特点著称&#xff0c;可以帮助开发者高效地进行各种类型的Web请求…

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

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

【Electron】Electron Forge如何支持Element plus?

在 Electron Forge 项目中集成 Element Plus 是一个相对直接的过程。Element Plus 是一个基于 Vue 3 的 UI 组件库&#xff0c;因此你需要确保你的 Electron 项目已经集成了 Vue 3。以下是集成 Element Plus 到 Electron Forge 项目的步骤&#xff1a; 1. 初始化 Electron For…

WebGIS四大地图框架:Leaflet、OpenLayers、Mapbox、Cesium

地理信息系统&#xff08;GIS&#xff09;已经成为现代应用开发中不可或缺的一部分&#xff0c;尤其在前端开发中。随着Web技术的快速发展&#xff0c;许多强大而灵活的GIS框架涌现出来&#xff0c;为开发人员提供了丰富的工具和功能&#xff0c;使他们能够创建交互式、高性能的…

cooladmin 后端 查询记录

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

UE5运行时创建slate窗口

加入"Slate","SlateCore"模块 Actor.cpp // Fill out your copyright notice in the Description page of Project Settings.#include "MyWindowClass.h"// Sets default values AMyWindowClass::AMyWindowClass() {// Set this actor to call…

react 受控组件和非受控组件

在 React 中&#xff0c;受控组件和非受控组件是两种处理表单元素&#xff08;如输入框、选择框等&#xff09;值的方式。 1. 受控组件 受控组件是指 React 组件的表单元素的值是由 React 组件的 state 来管理的。换句话说&#xff0c;React 会全程控制表单元素的值&#xff…

cesium 3DTiles之pnts格式详解

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

基于STM32的智能家居安防系统设计

引言 本项目基于STM32微控制器设计了一个智能家居安防系统&#xff0c;通过集成多个传感器模块和远程报警系统&#xff0c;实现对家庭的安全监控和自动化报警功能。该系统能够实时监测家中的门窗状态、烟雾浓度、以及是否有非法入侵等状况&#xff0c;并在检测到异常时通过蜂鸣…

用枚举算法解决LeetCode第3348题最小可整除数位乘积II

3348.最小可整除数位乘积II 难度&#xff1a;困难 问题描述&#xff1a; 给你一个字符串num&#xff0c;表示一个正整数&#xff0c;同时给你一个整数t。 如果一个整数没有任何数位是0&#xff0c;那么我们称这个整数是无零数字。 请你返回一个字符串&#xff0c;这个字符…