vue3学习笔记-快速上手

embedded/2024/10/19 5:26:21/

创建第一个vue3的应用

之前看书学习vue,书籍对应的版本是vue2,今天群里看小伙伴聊天,觉得他们说得对 ,反正是从零开始学,而且vue2都不维护了,那为什么不直接学习vue3呢,于是乎,又开启了从0学vue3之路。

参考教程:https://cn.vuejs.org/guide/quick-start.html

安装nodejs环境之后,执行 npm create vue@latest 命令就可以初始化一个vue3的项目:

600442a7575f1057ff16d8faefbb78e8.jpeg

因为很多功能后面都需要学,所以一开始初始化项目的时候,可以选择否。

了解组合式API和选项式API的区别

4c21405df28f4739d889e97eb4af06f2.jpeg

通过 CDN 使用 Vue 时,无法使用单文件组件 (SFC) 语法,这句话怎么理解?

09cd2f4f282013a18ad2ae83d49b0b21.jpeg

通过 CDN 使用 Vue:这意味着你可以直接在 HTML 页面中通过 <script> 标签引入 Vue.js 的 CDN 链接,而不需要通过 npm 或 yarn 等包管理工具安装 Vue.js。这种方式简单快捷,适合于快速原型开发或小型项目。

Vue.js 的单文件组件是一种特殊的文件格式,它允许你将模板、JavaScript 逻辑和样式都写在一个 .vue 文件中。这种格式需要构建工具来处理,因为它们需要被编译成浏览器可以理解的格式。由于通过 CDN 使用 Vue.js 不涉及构建步骤,因此你不能直接使用 .vue 文件。相反,你需要将 Vue 组件的逻辑、模板和样式分开编写,并直接在浏览器中通过 <script>、<style> 和 HTML 直接编写模板

使用 ES 模块构建版本

<script type="module">的含义

4862ecf943fcedfd6571aadcf5c91d88.jpeg

发现将圈中的位置改成其他命名,页面也可以正常访问:

661ff0730d32eab257b5696e22200e68.jpeg

如果你也对vue的学习感兴趣,那就快来加入一起学习交流吧

e954fed0aa727e522b987d6c392c9c20.png


http://www.ppmy.cn/embedded/20785.html

相关文章

elasticsearch Docker启动Device or resource busy异常

问题 在基于Docker进行elasticsearch部署启动时&#xff0c;指定了elasticsearch.yml配置文件&#xff0c;但在启动时报如下异常&#xff1a; Exception in thread "main" java.nio.file.FileSystemException: /usr/share/elasticsearch/config/elasticsearch.yml.…

IDEA启动项目弹框提示:Lombok requires enabled annotation processing

问题现象 IDEA启动项目弹框提示如下图&#xff1a; 原因分析 由弹窗内容分析&#xff0c;首先确认我的IDEA中已经安装了Lombok插件&#xff0c;其次去settings中查找annotation processing配置&#xff0c;发现确实有这个配置并且未勾选启动 如何解决 修改配置

求三个字符数组最大者(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h> # include <string.h>int main() {//初始化变量值&#xff1b;int i 0;char str[3][20];char string[20];//循环输入3个字符…

【ZZULIOJ】1084: 计算两点间的距离(多实例测试)(Java)

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 输入两点坐标&#xff08;X1,Y1&#xff09;,&#xff08;X2,Y2&#xff09;,计算并输出两点间的距离。 输入 输入数据有多组&#xff0c;每组占一行&#xff0c;由4个实数组成&#xff0c;分别表…

android脱壳:一种使用native进行抽取壳脱壳的方法,native版本的frida-fart

前言 写rxposed的时候&#xff0c;搞了很多模块&#xff0c;其中有一个远程调用脱壳的&#xff0c;但是当时使用的是rmi远程调用&#xff0c;因为一些问题无法使用&#xff0c;可能是对抗问题&#xff0c;也有可能是技术问题&#xff0c;所以我又换了一种远程调用方式。 概述…

【方案解决思路】RPC服务器不可用

当在SCCM服务器上使用wmic /node:<客户端IP> process list命令时&#xff0c;如果遇到“RPC服务器不可用”的错误&#xff0c;这通常意味着SCCM服务器无法通过RPC协议与远程客户端通信。以下是一些可能的解决步骤&#xff1a; 检查远程客户端的RPC服务&#xff1a; 确保远…

【Vue】如何使用Webpack实现打包操作

一、Webpack介绍 Webpack最主要的作用就是打包操作&#xff0c;由两个核心部分构成分别是“出口”与“入口”。wbepack是现在比较热门的打包工具了&#xff0c;它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。说的直白一点&#xff0c;通过webpac…

深度学习-线性代数

目录 标量向量矩阵特殊矩阵特征向量和特征值 标量由只有一个元素的张量表示将向量视为标量值组成的列表通过张量的索引来访问任一元素访问张量的长度只有一个轴的张量&#xff0c;形状只有一个元素通过指定两个分量m和n来创建一个形状为mn的矩阵矩阵的转置对称矩阵的转置逻辑运…