Vue3 学习笔记(一)Vue3 介绍及环境部署


一、Vue.js 简介


1、Vue.js 是什么?


  • Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
  • Vue 只关注视图层, 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
  • Vue 学习起来非常简单,本教程基于 Vue3 以上版本测试。

2、Vue.js 的特点和优势


  • 轻量级:Vue.js 的核心库非常小巧(大约 20KB),加载速度快。
  • 渐进式框架:Vue 可以自下而上逐层应用。你可以在一个已有项目中使用 Vue 作为一个简单的视图层库,也可以使用 Vue 来管理整个前端应用。
  • 易于学习:Vue 的设计非常直观,适合前端初学者,文档也非常详尽。
  • 高性能:Vue 的虚拟 DOM 和高效的差异化算法,使其具有良好的性能表现。
  • 组件化:Vue 允许使用组件构建应用程序,组件可以复用并且易于维护。
  • 双向数据绑定:Vue 提供了简洁易用的双向数据绑定机制,使得数据和视图之间的同步变得非常简单。

二、Vue3 安装


1、 使用 CDN 方法

  • Staticfile CDN : https://cdn.staticfile.net/vue/3.0.5/vue.global.js
  • 字节跳动 CDN : https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.31/vue.global.min.js
  • unpkg:https://unpkg.com/vue@3/dist/vue.global.js
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<body>
<div id="app">{{ message }}</div><script type="module">import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'createApp({data() {return {message: 'Hello RUNOOB!'}}}).mount('#app')
</script>
</body>
</html>

2、NPM 方法

(1)、npm 版本需要大于 3.0,如果低于此版本需要升级

# 查看版本
$ npm -v
2.3.0

(2)、由于国内直接使用 npm 的官方镜像是非常慢的,这里推荐使用淘宝 NPM 镜像。

$ npm install -g cnpm --registry=https://registry.npmmirror.com

推荐使用 cnpm 安装,cnpm 能很好地和 Webpack 或 Browserify 模块打包器配合使用。

# 升级或安装 cnpm
npm install cnpm -g

在这里插入图片描述

使用 cnpm 命令来安装模块

#升级 npm
cnpm install npm -g

然后在命令行中运行以下命令:

# 最新稳定版
$ cnpm init vue@latest

这将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具:

C:\Users\pc>cnpm init vue@latest
Need to install the following packages:
create-vue@3.11.1
Ok to proceed? (y) yVue.js - The Progressive JavaScript Framework√ 请输入项目名称: ... testvue
√ 是否使用 TypeScript 语法? ... 否 / 是
√ 是否启用 JSX 支持? ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发? ... 否 / 是
√ 是否引入 Pinia 用于状态管理? ... 否 / 是
√ 是否引入 Vitest 用于单元测试? ... 否 / 是
√ 是否要引入一款端到端(End to End)测试工具? » 不需要
√ 是否引入 ESLint 用于代码质量检测? ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是正在初始化项目 C:\Users\pc\testvue...项目初始化完成,可执行以下命令:cd testvuenpm installnpm run dev

在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

cd testvue
npm install

执行后如下:

C:\Users\pc\testvue>npm installadded 183 packages in 2m41 packages are looking for fundingrun `npm fund` for details
npm run dev

执行后如下:

  VITE v5.4.9  ready in 483 ms➜  Local:   http://localhost:5173/➜  Network: use --host to expose➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools➜  press h + enter to show help

在这里插入图片描述


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

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

相关文章

【ARM】ARM架构参考手册_Part B 内存和系统架构(2)

目录 2.1 关于系统控制协处理器 2.2 寄存器 2.1 关于系统控制协处理器 所有标准内存和系统设施都由协处理器15&#xff08;CP15&#xff09;控制&#xff0c;因此它被称为系统控制协处理器。有些设施也使用其他控制方法&#xff0c;这些方法在描述这些设施的章节中有描述。例…

【Mysql】-锁,行级锁

Mysql mysql中的行锁 在 MySQL 的 InnoDB 存储引擎中&#xff0c;行级锁通常是加在索引上的&#xff0c;而不是直接加在数据行上。这种机制是基于索引的锁定策略&#xff0c;具体来说&#xff1a; 主键索引&#xff1a;如果查询更新使用了主键进行查找&#xff0c;InnoDB 会直…

性能工具之JMeter 通过Java API生成 BeanShell PreProcessor 脚本

文章目录 一、前言二、实现代码三、代码示例四、最后 一、前言 对于上一篇文章&#xff08;性能工具之 HAR 格式化转换JMeter JMX 脚本文件&#xff09;还是有点问题。大家在使用的情况需要注意。 如果多个接口相同 path 路径且不同参数进行查询如&#xff1a; 上面接口如果…

【力扣 | SQL题 | 每日3题】力扣2988,569,1132,1158

1 hard 3mid&#xff0c;难度不是特别大。 1. 力扣2988&#xff1a;最大部门的经理 1.1 题目&#xff1a; 表&#xff1a; Employees ---------------------- | Column Name | Type | ---------------------- | emp_id | int | | emp_name | varchar | | de…

【前端】如何制作一个自己的网页(15)

有关后代选择器的具体解释&#xff1a; 后代选择器 后代选择器使用时&#xff0c;需要以空格将多个选择器间隔开。 比如&#xff0c;这里p span&#xff0c;表示只设置p元素内&#xff0c;span元素的样式。 <style> /* 使用后代选择器设置样式 */ p span { …

java--多态(详解)

目录 一、概念二、多态实现的条件三、向上转型和向下转型3.1 向上转型3.2 向下转型 四、重写和重载五、理解多态5.1练习&#xff1a;5.2避免在构造方法中调用重写的方法&#xff1a; 欢迎来到权权的博客~欢迎大家对我的博客提出指导这是我的博客主页&#xff1a;点击 一、概念…

Java毕业设计 基于SpringBoot发卡平台

Java毕业设计 基于SpringBoot发卡平台 这篇博文将介绍一个基于SpringBoot发卡平台&#xff0c;适合用于Java毕业设计。 功能介绍 首页 图片轮播 商品介绍 商品详情 提交订单 文章教程 文章详情 查询订单  查看订单卡密 客服   后台管理 登录 个人信息 修改密码 管…

API接口的未来展望:构建更加智能、安全、高效的数字世界

一、引言 随着信息技术的飞速发展&#xff0c;应用程序编程接口&#xff08;API&#xff09;已成为现代软件开发的核心组成部分。API作为不同系统之间的桥梁&#xff0c;使得数据、功能和服务能够在各种平台和设备之间无缝流动。在这个数字化时代&#xff0c;API接口的未来展望…

javascript对象介绍

1. 什么是对象&#xff1f; 在 JavaScript 中&#xff0c;对象是一个无序的键值对集合&#xff0c;可以用来存储数据和功能。对象可以包含原始值、函数&#xff08;方法&#xff09;以及其他对象&#xff0c;是构建复杂数据结构和实现面向对象编程的基础。 2. 创建对象 2.1 …

Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容

介绍 在当今数据驱动的世界中&#xff0c;抓取动态网页内容变得越来越重要&#xff0c;尤其是像抖音这样的社交平台&#xff0c;动态加载的评论等内容需要通过特定的方式来获取。传统的静态爬虫方法难以处理这些由JavaScript生成的动态内容&#xff0c;Selenium爬虫技术则是一…

字典如何与选择器一起使用

背景&#xff1a;开发过程中会遇到某些字段需要做成下拉框。如下图&#xff1a; 组件 | Element里有select选择器这个组件可以实现下拉框的效果 我们可能会想到创一个辅助表来存储这些下拉数据像这样 这样虽然能实现&#xff0c;但是在实际开发中是不合理的&#xff0c;如果有…

个税自然人扣缴客户端数据的备份与恢复(在那个文件夹)

一&#xff0c;软件能够正常打开&#xff0c;软件中的备份与恢复功能 1&#xff0c;备份 您按照下面的方法备份一下哦~ 进入要备份的自然人软件&#xff0c;点击左侧系统设置→→系统管理→→备份恢复&#xff1b; 在备份设置里&#xff0c;点击“备份到选择路径”&#xff0c;…

WebGL编程指南 - 颜色与纹理续

设置纹理坐标&#xff08;initVertexBuffers()&#xff09; 从缓冲区到 attribute 变量的流程&#xff1a; // 顶点坐标 function initVertexBuffers(gl) {// 数据准备let verticesTexCoords new Float32Array([// 顶点坐标&#xff0c;纹理坐标-0.5, 0.5, 0.0, 1.0, -0.5, …

图像异常检测评估指标-分类性能

图像异常检测评估指标-分类性能 1. 混淆矩阵 混淆矩阵包括4个用于衡量分类算法性能的基本数值 四个字母代表的含义是&#xff1a;P&#xff08;Positive&#xff09;代表算法将样本预测为正类&#xff0c;N&#xff08;Negative&#xff09;代表算法将样本预测为负类&#xf…

<a-table>行数据增加点击事件并获取点击行的数据+自定义button按事件

先看代码&#xff1a; 在 Ant - Design - Vue 的<a - table>组件中&#xff0c;通过customRow属性可以为表格的每一行添加自定义的行为和样式。当设置customRow为一个返回包含onClick函数的对象的函数时&#xff0c;实际上是在为每一行添加一个点击事件监听器。 在a-tabl…

Java学习Day50:唤醒八戒(Excel相关)

1.批量导入Excel数据 1.实现模板下载 <el-card class"box-card"> <div class"boxMain"> <el-button style"margin-bottom: 20px;margin-right: 20px" type"primary" click"downloadTemplate()">模板下载…

ST7789读取ID错误新思路(以STC32G为例)

1.前言 前两天刚把ST7789写入搞定&#xff0c;这两天想折腾一下读取。最开始是读ID&#xff0c;先是用厂家送的程序&#xff0c;程序里面用的是模拟I8080协议&#xff0c;一切正常。后来我用STC32G的内置LCM模块&#xff0c;发现读取不出来。更神奇的是ID读不出来&#xff0c;…

达梦数据库DEXP/DIMP逻辑备份还原

1、概念 逻辑备份还原是对数据库逻辑组件&#xff08;如表、视图和存储过程等数据库对象&#xff09;的备份还原。逻辑导出&#xff08;dexp&#xff09;和逻辑导入&#xff08;dimp&#xff09;是 DM 数据库的两个命令行工具&#xff0c;分别用来实现对 DM 数据库的逻辑备份和…

[项目详解][boost搜索引擎#2] 建立index | 安装分词工具cppjieba | 实现倒排索引

目录 编写建立索引的模块 Index 1. 设计节点 2.基本结构 3.(难点) 构建索引 1. 构建正排索引&#xff08;BuildForwardIndex&#xff09; 2.❗构建倒排索引 3.1 cppjieba分词工具的安装和使用 3.2 引入cppjieba到项目中 倒排索引代码 本篇文章&#xff0c;我们将继续项…

【C++指南】类和对象(四):类的默认成员函数——全面剖析 : 拷贝构造函数

引言 拷贝构造函数是C中一个重要的特性&#xff0c;它允许一个对象通过另一个已创建好的同类型对象来初始化。 了解拷贝构造函数的概念、作用、特点、规则、默认行为以及如何自定义实现&#xff0c;对于编写健壮和高效的C程序至关重要。 C类和对象系列文章&#xff0c;可点击下…