【VUE基础】VUE3第一节—vite创建vue3工程

什么是VUE

Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。

截止到2024年7月3号为止,vue的最新版本是3.4.31
在这里插入图片描述

创建VUE3工程

可以通过两种方式创建,第一种利用vue-cli脚手架,第二种通过vite创建

备注:目前vue-cli已处于维护模式,官方推荐基于 Vite 创建项目。

基于 vue-cli 创建

点击链接可查看构建vue环境需要的前提依赖怎么安装,以及怎么通过vue-cli创建vue3工程
Vue3环境安装

基于vue-cli脚手架构建

## 查看@vue/cli版本,确保@vue/cli版本在4.5.0以上
vue --version## 安装或者升级你的@vue/cli 
npm install -g @vue/cli## 执行创建命令
vue create vue_test##  随后选择3.x
##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
##  > 3.x
##    2.x## 启动
cd vue_test
npm run serve
基于 vite 创建 (推荐)

vite 是新一代前端构建工具,官网地址:https://vitejs.cn

Vite 需要 Node.js 版本 18+ 或 20+。然而,有些模板需要依赖更高的 Node
版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。

确保你安装了最新版本的 Node.js,并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令 (不要带上 $ 符号):

## 1.创建命令
npm create vue@latest## 2.具体配置
## 配置项目名称
√ Project name: vue3_test
## 是否添加TypeScript支持
√ Add TypeScript?  Yes
## 是否添加JSX支持
√ Add JSX Support?  No
## 是否添加路由环境
√ Add Vue Router for Single Page Application development?  No
## 是否添加pinia环境
√ Add Pinia for state management?  No
## 是否添加单元测试
√ Add Vitest for Unit Testing?  No
## 是否添加端到端测试方案
√ Add an End-to-End Testing Solution? » No
## 是否添加ESLint语法检查
√ Add ESLint for code quality?  Yes
## 是否添加Prettiert代码格式化
√ Add Prettier for code formatting?  No

在这里插入图片描述

项目构建完成
在这里插入图片描述

执行命令启动vue工程

npm run dev

在这里插入图片描述

在这里插入图片描述

创建完任务出现一个问题,提示找不到模块“./App.vue”或其相应的类型声明。ts(2307)

在这里插入图片描述
导致出现以上问题是因为未定义.vue文件的类型,导致ts无法解析其类型
在文件根目录下面的,vite-env.d.ts文件中添加如下代码,即可成功解决该问题。

declare module "*.vue" {import type { DefineComponent } from "vue";const vueComponent: DefineComponent<{}, {}, any>;export default vueComponent;}

创建一个 Vue 应用

每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例:

import { createApp } from 'vue'const app = createApp({/* 根组件选项 */
})

我们传入 createApp 的对象实际上是一个组件,每个应用都需要一个“根组件”,其他组件将作为其子组件。

如果你使用的是单文件组件,我们可以直接从另一个文件中导入根组件。

import { createApp } from 'vue'
// 从一个单文件组件中导入根组件
import App from './App.vue'const app = createApp(App)

应用实例必须在调用了 .mount() 方法后才会渲染出来。该方法接收一个“容器”参数,可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串:

<div id="app"></div>
app.mount('#app')

应用根组件的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。

.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。

DOM 中的根组件模板

根组件的模板通常是组件本身的一部分,但也可以直接通过在挂载容器内编写模板来单独提供:

<div id="app"><button @click="count++">{{ count }}</button>
</div>
import { createApp } from 'vue'const app = createApp({data() {return {count: 0}}
})app.mount('#app')

当根组件没有设置 template 选项时,Vue 将自动使用容器的 innerHTML 作为模板。

DOM 内模板通常用于无构建步骤的 Vue 应用程序。它们也可以与服务器端框架一起使用,其中根模板可能是由服务器动态生成的。

总结

  • Vite 项目中,index.html 是项目的入口文件,在项目最外层。
  • 加载index.html后,Vite 解析 <script type="module" src="xxx"> 指向的JavaScript
  • Vue3**中是通过 **createApp 函数创建一个应用实例。

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

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

相关文章

Java+MySQL8.0.36+ElementUI数字化产科信息管理系统之”五色管理”

JavaMySQL8.0.36ElementUI数字化产科信息管理系统之”五色管理” 一、数字化产科信息管理系统概述 数字化产科信息管理五色管理是一种基于孕产妇妊娠风险的分类管理方法&#xff0c;通过数字化手段实现孕产妇全周期的健康风险评估与管理。该方法将孕产妇按照风险等级分为绿色、…

DC-DC充放电原理

文章目录 前言1. 电子器件1.1 电容1.2 电感 2. 升压电路3. 降压电路4. 电压均衡电路4.1 被动均衡4.2 主动均衡 5. 我的疑问5.1 对于升压电路&#xff0c;怎么设计升压到多少V后&#xff0c;停止升压&#xff1f;5.2 什么是等效电阻&#xff1f;5.3 快充是如何实现的&#xff1f…

LightGlue: Local Feature Matching at Light Speed【文献阅读】

论文&#xff1a;LightGlue: Local Feature Matching at Light Speed 代码&#xff1a;https://github.com/cvg/LightGlue 作者&#xff1a;1 ETH Zurich__2 Microsoft Mixed Reality & AI Lab Abstract 提出的LightGlue是一个深度神经网络用于学习图像间的局部特征匹配。…

WAIC | 上海人形机器人创新中心 | 最新演讲 | 详细整理

前言 笔者看了7月4号的人形机器人与具身智能发展论坛的直播&#xff0c;并在7月5日到了上海WAIC展会现场参观。这次大会的举办很有意义&#xff0c;听并看了各家的最新成果&#xff0c;拍了很多照片视频&#xff0c;部分演讲也录屏了在重复观看学习 稍后会相继整理创立穹彻智…

算法系列--分治排序|归并排序|逆序对的求解

一.基本概念与实现 归并排序(mergeSort)也是基于分治思想的一种排序方式,思路如下: 分解:根据中间下标mid将数组分解为两部分解决:不断执行上述分解过程,当分解到只有一个元素时,停止分解,此时就是有序的合并:合并两个有序的子区间,所有子区间合并的结果就是原问题的解 归并…

第一节 网络安全概述

一.网络空间安全 网络空间&#xff1a;一个由信息基础设施组成相互依赖的网络。 ---- 海陆空天&#xff08;大海、陆 地、天空、航天&#xff09; 通信保密阶段 ---- 计算机安全 ----- 信息系统安全 ----- 网络空间安全 计算机安全&#xff1a;开始秉持着“严于律己&#x…

C语言 指针和数组—指针数组及其在字符串处理中的应用

目录 问题的提出 问题的解决 回头看——指针、数组及其他类型的混合 指针数组与指向数组的指针 字符串的排序 问题的提出 问题的解决 回头看——指针、数组及其他类型的混合  基本数据类型  int 、 long 、 char 、 short 、 float 、 double……  数组是一种从…

设计模式之模版方法

模版方法介绍 模版方法&#xff08;Template Method&#xff09;模式是一种行为型设计模式&#xff0c;它定义了一个操作&#xff08;模板方法&#xff09;的基本组合与控制流程&#xff0c;将一些步骤&#xff08;抽象方法&#xff09;推迟到子类中&#xff0c;使得子类可以在…

【UE5.1】Chaos物理系统基础——03 炸开几何体集

目录 步骤 一、通过径向向量将几何体集炸开 二、优化炸开效果——让破裂的碎块自然下落 三、优化炸开效果——让碎块旋转起来 四、优化炸开效果——让碎块旋转的越来越慢 步骤 一、通过径向向量将几何体集炸开 1. 打开上一篇中&#xff08;【UE5.1】Chaos物理系统基础—…

Spring IOC基于XML和注解管理Bean

IoC 是 Inversion of Control 的简写&#xff0c;译为“ 控制反转 ”&#xff0c;它不是一门技术&#xff0c;而是一种设计思想&#xff0c;是一个重要的面向对象编程法则&#xff0c;能够指导我们如何设计出 松耦合、更优良的程序。 Spring 通过 IoC 容器来管理所有 Java 对象…

如何从 Windows 11/10/8.1/8/7 恢复已删除的视频

意外删除了视频或格式化了 SD 卡/硬盘&#xff1f;没有备份已删除的视频&#xff1f;别担心&#xff0c;我们有解决方案来恢复 Windows 11、10 中已删除的视频并处理这种糟糕的情况。 但在了解如何恢复已删除的视频和视频恢复应用程序之前&#xff0c;请知道 Windows 会为您提…

ARMv8寄存器详解

文章目录 一、ARMv8寄存器介绍二、通用寄存器三、 PSTAE寄存器四、特殊寄存器五、系统寄存器 一、ARMv8寄存器介绍 本文我来给大家介绍一下ARMv8的寄存器部分&#xff0c;ARMv8中有34个寄存器&#xff0c;包括31个通用寄存器、一个栈指针寄存器SP(X31),一个程序计数器寄存器PC…

Transformer前置知识:Seq2Seq模型

Seq2Seq model Seq2Seq&#xff08;Sequence to Sequence&#xff09;模型是一类用于将一个序列转换为另一个序列的深度学习模型&#xff0c;广泛应用于自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;如机器翻译、文本摘要、对话生成等。Seq2Seq模型由编码器&#…

JavaEE初阶-网络原理1

文章目录 前言一、UDP报头二、UDP校验和2.1 CRC2.2 md5 前言 学习一个网络协议&#xff0c;最主要就是学习的报文格式&#xff0c;对于UDP来说&#xff0c;应用层数据到达UDP之后&#xff0c;会给应用层数据报前面加上UDP报头。 UDP数据报UDP包头载荷 一、UDP报头 如上图UDP的…

Emacs之解决:java-mode占用C-c C-c问题(一百四十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

C++语言相关的常见面试题目(二)

1.vector底层实现原理 以下是 std::vector 的一般底层实现原理&#xff1a; 内存分配&#xff1a;当创建一个 std::vector 对象时&#xff0c;会分配一块初始大小的连续内存空间来存储元素。这个大小通常会随着 push_back() 操作而动态增加。 容量和大小&#xff1a;std::vec…

element-plus 的form表单组件之el-radio(单选按钮组件)

单选按钮组件适用于同一组类型的选项只能互斥选择的场景&#xff0c;就是支持单选。单选组件包含以下3个组件 组件名作用el-radio-group单选组组件&#xff0c;子元素可以是el-radio或el-radio-button&#xff0c;v-mode绑定单选组的响应式属性el-radio单选组件&#xff0c;la…

阶段三:项目开发---搭建项目前后端系统基础架构:任务9:导入空管基础数据

任务描述 本阶段任务是导入项目的基础数据&#xff0c;包括空管基础数据和离线的实时飞行数据&#xff08;已经脱敏&#xff09;。 任务指导 本阶段任务需要导入两种数据&#xff1a; 1、在MySQL中导入空管基础数据 kongguan.sql空管基础数据表说明&#xff1a; 1告警信息…

OpenCV直方图计算函数calcHist的使用

操作系统&#xff1a;ubuntu22.04OpenCV版本&#xff1a;OpenCV4.9IDE:Visual Studio Code编程语言&#xff1a;C11 功能描述 图像的直方图是一种统计表示方法&#xff0c;用于展示图像中不同像素强度&#xff08;通常是灰度值或色彩强度&#xff09;出现的频率分布。具体来说…

cs231n作业1——SVM

参考文章&#xff1a;cs231n assignment1——SVM SVM 训练阶段&#xff0c;我们的目的是为了得到合适的 &#x1d44a; 和 &#x1d44f; &#xff0c;为实现这一目的&#xff0c;我们需要引进损失函数&#xff0c;然后再通过梯度下降来训练模型。 def svm_loss_naive(W, …