学习Vue3的第一天

目录

简介

什么是 Vue？

创建Vue3工程

前提条件

基于 vue-cli 创建（不推荐）

基于 vite 创建（推荐）

通过 CDN 使用 Vue

代码示例

简介

什么是 Vue？

Vue.js 是一个流行的前端 JavaScript 框架，用于构建用户界面和单页面应用程序（SPA）。Vue.js 的第三个主要版本是 Vue 3。Vue 3 在性能、开发体验和扩展性等方面进行了许多改进和优化。

以下是 Vue 3 的一些主要特点：

  • Composition API: Vue 3 引入了 Composition API，这是一种新的组织组件逻辑的方式，使得代码更易于阅读、维护和重用。Composition API 允许将相关逻辑组织在一起，而不是按照选项（data、methods、computed 等）的方式分散在组件中。
  • 更快的渲染性能: Vue 3 通过对响应系统的重写和优化，以及对虚拟 DOM 的改进，提供了更快的渲染性能。这包括了更快的初始化、更新和销毁过程。
  • 更小的包大小: Vue 3 通过精简和优化代码，以及利用 Tree-shaking 等技术，使得最终构建的包更小，这有助于减少加载时间和网络传输量。
  • Typescript 支持: Vue 3 具有更好的 TypeScript 支持，包括更完整的类型定义和更好的类型推断，这使得在 TypeScript 项目中使用 Vue 更加方便。
  • 更好的 TypeScript 集成: Vue 3 提供了更好的 TypeScript 集成和支持，使得在使用 TypeScript 进行开发时更加顺畅。
  • 更好的错误处理: Vue 3 改进了错误处理机制，提供了更清晰的错误信息和堆栈跟踪，有助于更快地定位和解决问题。

总的来说，Vue 3 保留了 Vue.js 的简洁性和易用性，并通过引入新特性和优化现有功能来提高开发效率和应用性能。

创建Vue3工程

前提条件

  • 熟悉命令行
  • 已安装 18.0 或更高版本的 Node.js

不会安装node.js的小伙伴，可以参考这个视频

Node.js安装及环境变量配置_哔哩哔哩_bilibili

基于 vue-cli 创建（不推荐）

点击查看官方文档

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

## 查看@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的优势如下：

  1. 轻量快速的热重载（HMR）: Vite 提供了快速的热模块重载，使开发者能够即时看到代码更改后的效果，提高了开发效率。

  2. 对 TypeScript、JSX、CSS 等支持开箱即用: Vite 对于一些常用的前端开发技术栈（如 TypeScript、JSX、CSS）提供了开箱即用的支持，无需额外配置即可开始开发。

  3. 真正的按需编译: Vite 采用了一种按需编译的方式，只有在需要的时候才会编译相应的模块，而不是等待整个应用编译完成。这种方式提高了开发过程中的响应速度和效率。

  4. 快速启动服务: Vite 的服务启动速度极快，使得开发者能够快速开始编写代码并查看效果，提高了开发的流畅度。

  5. 优化的构建性能: 与传统的构建工具相比，Vite 在构建过程中的性能表现更好，使得开发者能够更快地构建和部署应用程序。

综上所述，Vite 的优势在于其快速的热重载、开箱即用的支持、按需编译、快速启动服务和优化的构建性能，这些特点使得前端开发过程更加高效和愉快。

具体操作如下（点击查看官方文档）

## 1.创建命令（任选一种）
npm create vue@latest

pnpm create vue@latest

yarn create vue@latest

bun 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

如果不确定是否要开启某个功能，你可以直接按下回车键选择 NO。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

----npm----
cd <your-project-name>
npm install
npm run dev----pnpm----
cd <your-project-name>
pnpm install
pnpm run dev----yarn----
cd <your-project-name>
yarn
yarn dev----bun----
cd <your-project-name>
bun install
bun run dev

 安装官方推荐的vscode插件：

当你准备将应用发布到生产环境时，请运行（任选一种）：

npm run build
pnpm run build
yarn build
bun run build

通过 CDN 使用 Vue

可以借助 script 标签直接通过 CDN 来使用 Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

通过 CDN 使用 Vue 时，不涉及“构建步骤”。这使得设置更加简单，并且可以用于增强静态的 HTML 或与后端框架集成。但是，你将无法使用单文件组件 (SFC) 语法。 

代码示例

<template><div class="person"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><button @click="changeName">修改名字</button><button @click="changeAge">年龄+1</button><button @click="showTel">点我查看联系方式</button></div>
</template>
<script lang="ts">
export default {name: "Preson",
};
</script>
<script setup lang="ts">
import { ref } from 'vue';
const name = ref('张三');
const age = ref(18);
const tel = '1234567890';
function changeName() {name.value = '李四';
}
function changeAge() {age.value +=1;
}
function showTel() {alert(tel)
}
</script>
<style scoped>.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}
</style>

这段代码是一个 Vue 3 组件的代码片段，包含了模板、脚本和样式。让我来解释一下这个组件的功能和结构：

1、模板部分：

  • <template> 标签中包含了组件的 HTML 结构，其中包括姓名、年龄和三个按钮。
  • {{name}} 和 {{age}} 是 Vue 的插值语法，用于显示 name 和 age 的值。
  • @click 是 Vue 的事件监听器，用于在按钮被点击时调用相应的方法。

2、脚本部分：

  • <script lang="ts"> 标签中的代码定义了 Vue 组件的基本信息，这里主要是组件的名称。
  • <script setup lang="ts"> 标签中的代码使用了 Vue 3 新引入的 <script setup> 语法，用于编写组件的逻辑部分。
  • import { ref } from 'vue'; 导入了 Vue 3 中的 ref 方法，用于创建响应式的数据。
  • const name = ref('张三'); 和 const age = ref(18); 创建了名为 name 和 age 的响应式数据。
  • const tel = '1234567890'; 定义了一个不需要响应式的常量。
  • function changeName() { ... }、function changeAge() { ... } 和 function showTel() { ... } 分别定义了修改姓名、增加年龄和显示电话的方法。

3、样式部分：

  • <style scoped> 标签中的 CSS 样式只作用于当前组件，不会影响到其他组件。
  • .person 类设置了背景颜色、阴影、圆角和内边距等样式。
  • button 样式设置了按钮之间的间距。

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

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

相关文章

c# DataTable 帮助类

c# DataTable 帮助类

public class DataTableHelper { #region DataTable转IList /// <summary> /// DataTable转IList集合 /// </summary> /// <typeparam name"T"></typeparam> /// <param name"dataTabl…
阅读更多...
linux查看公网地址

linux查看公网地址

curl ifconfig.mewget -qO- ifconfig.me
阅读更多...
用keytool 生成JWT的RSA非对称密钥

用keytool 生成JWT的RSA非对称密钥

写在前面 JWT 令牌 可以由 X.509 证书或 256 位非对称密钥签名来充当&#xff0c;为了获得合法的JWT 令牌&#xff0c;我们可以使用JDK中的keytool.exe工具来生成。 本例的操作环境是Windows系统&#xff0c;操作的前置条件需要先安装好JDK&#xff0c;并配置好环境变量&…
阅读更多...
C#的Char 结构的像IsLetterOrDigit(Char)等常见的方法

C#的Char 结构的像IsLetterOrDigit(Char)等常见的方法

目录 一、Char 结构的方法 二、Char.IsLetterOrDigit 方法 1.Char.IsLetterOrDigit(Char)用法 2.IsLetterOrDigit(String, Int32)方法 三、Char.IsLetter 方法 1.IsLetter(Char) 2.IsLetter(String, Int32) 四、Char.IsDigit 方法 1. IsDigit(String, Int32) 2.IsDig…
阅读更多...
Vue 学习随笔系列九 -- 表格中插入图片、背景、自定义表头

Vue 学习随笔系列九 -- 表格中插入图片、背景、自定义表头

表格中插入图片和icon 文章目录 表格中插入图片和icon一、如何插入图片1、代码2、效果 二、文字添加背景1、代码2、效果 三、表头悬浮提示语四、表头添加图标 一、如何插入图片 1、代码 <template><div><el-tablesize"small"borderv-loading"l…
阅读更多...
K8S部署Harbor镜像仓库（含离线安装包harbor-offline-installer国内下载链接）

K8S部署Harbor镜像仓库（含离线安装包harbor-offline-installer国内下载链接）

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…
阅读更多...
互联网摸鱼日报(2024-02-05)

互联网摸鱼日报(2024-02-05)

互联网摸鱼日报(2024-02-05) 博客园新闻 巨人网络大模型GiantGPT完成备案 有传闻称京东紧急制定主播招聘计划 不考核GMV和毛利等 实测百度文心一言APP生成“专属数字分身”免费功能 小米要退出印度笔记本市场&#xff1f;产品均售罄、官网导航条移除相关栏目 高德、百度地…
阅读更多...
面向智算服务，构建可观测体系最佳实践

面向智算服务，构建可观测体系最佳实践

作者&#xff1a;蓟北 构建面向 AI、大数据、容器的可观测体系 &#xff08;一&#xff09;智算服务可观测概况 对于越来越火爆的人工智能领域来说&#xff0c;MLOps 是解决这一领域的系统工程&#xff0c;它结合了所有与机器学习相关的任务和流程&#xff0c;从数据管理、建…
阅读更多...
Qt程序设计-读写CSV文件

Qt程序设计-读写CSV文件

本文实例演示Qt读写CSV文件实现 创建项目 添加两个按钮和一个显示路径的label 界面如下 UI界面 <?xml version="1.0" encoding="UTF-8"?> <ui version="4.0"><class>MainWindow</class><widget class="QM…
阅读更多...
[BUUCTF]-PWN:[极客大挑战 2019]Not Bad解析

[BUUCTF]-PWN:[极客大挑战 2019]Not Bad解析

保护 ida 这里使用mmap函数创造了一个内存映射区域 从地址0x123000开始&#xff0c;大小位0x1000 权限为可写可执行&#xff08;可读0x1&#xff0c;可写0x2&#xff0c;可执行0x3&#xff09; 设置为私有映射&#xff08;MAP_PRIVATE&#xff09;和匿名映射&#xff08;MAP…
阅读更多...
【buuctf--被偷走的文件】

【buuctf--被偷走的文件】

将 ftp 流量过滤下来&#xff0c;追踪 ftp 流量&#xff0c;得到下图 先解释一下这四行什么意思&#xff1a; PASV&#xff1a; 这是FTP的命令&#xff0c;用于告知服务器在数据连接中使用被动模式&#xff08;Passive Mode&#xff09;。在被动模式下&#xff0c;数据连接的…
阅读更多...
Java Stram 流对于返回对象的处理 （结束流）

Java Stram 流对于返回对象的处理 （结束流）

Java Stram 流对于返回对象的处理 &#xff08;结束流&#xff09; package com.zhong.streamdemo.showdownstreamdemo;import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor;import java.util.*; import java.util.stream.Collectors; im…
阅读更多...
【golang】24、go get 和 go mod：indrect 与 go mod tidy

【golang】24、go get 和 go mod：indrect 与 go mod tidy

文章目录 go get 会执行如下操作&#xff1a; 操作 go.mod 文件&#xff08;add、update、remove&#xff09;下载依赖到 $GOPATH/pkg/mod 中若已安装&#xff0c;则更新该包&#xff0c;到最新版本 试验前置准备&#xff1a;首先删除已下载的依赖&#xff0c;rm -rf $GOPATH…
阅读更多...
MySQL篇----第十四篇

MySQL篇----第十四篇

系列文章目录 文章目录 系列文章目录前言一、MySQL 数据库作发布系统的存储，一天五万条以上的增量，预计运维三年,怎么优化？二、锁的优化策略三、索引的底层实现原理和优化四、什么情况下设置了索引但无法使用前言 前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽…
阅读更多...
OpenId、UnionId

OpenId、UnionId

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1. OpenId1.1 概念1.2 公众号OpenId&#xff08;简称 wxopenid&#xff09;同一个微信用户在小程序和公众号上的openid是不同的 1.3 openid的获取方式方式1. 调用wx…
阅读更多...
图片视频上传压缩的考察

图片视频上传压缩的考察

本文仅做上传 / 纯客户端压缩功能的调研 上传 能否在上传时就限制图片的张数&#xff1f;移动端不能使图库变成禁止状态&#xff0c;用户点击完成之后才能进行校验。 能否限制上传的文件格式&#xff1f;可以限制&#xff0c;PC端能够完美限制&#xff0c;移动端只能部分限制…
阅读更多...
《Docker极简教程》--Docker环境的搭建--在Linux上搭建Docker环境

《Docker极简教程》--Docker环境的搭建--在Linux上搭建Docker环境

更新系统&#xff1a;首先确保所有的包管理器都是最新的。对于基于Debian的系统&#xff08;如Ubuntu&#xff09;&#xff0c;可以使用以下命令&#xff1a;sudo apt-get update sudo apt-get upgrade安装必要的依赖项&#xff1a;安装一些必要的工具&#xff0c;比如ca-certi…
阅读更多...
Visual Studio 2022中创建的C++项目无法使用万能头＜bits/stdc++.h＞解决方案

Visual Studio 2022中创建的C++项目无法使用万能头＜bits/stdc++.h＞解决方案

目录 发现问题 解决办法 第一步 第二步 第三步 第四步 最后一步 问题解决 发现问题 如果大家也遇到下面这种问题&#xff0c;可能是没有include文件夹中没有bits/stdc.h 解决办法 第一步 打开一个C项目&#xff0c;鼠标移动至头文件上右击&#xff0c;选择转到文档或…
阅读更多...
怎么能批量验证收件箱有效性

怎么能批量验证收件箱有效性

批量验证收件箱有效性是确保邮件营销活动成功送达目标受众的关键步骤。以下将介绍几种方法来实现这一目标。 首先&#xff0c;可以使用专业的邮件验证服务。这些服务通常提供API接口或批量上传功能&#xff0c;能够快速检查大量邮件地址的有效性。它们通过验证邮件地址的语法、…
阅读更多...
能源管理师——为能源可持续发展护航

能源管理师——为能源可持续发展护航

能源管理师是在能源管理领域具有专业知识和技能的专业人士&#xff0c;他们的工作对于实现能源的有效利用和可持续发展至关重要。 能源管理师的主要职责是协助企业或组织进行能源管理&#xff0c;包括能源规划、能源审计、节能措施的实施和能源绩效的评估等。他们通过对能源使…
阅读更多...
最新文章

Copyright @ 2022~2023