【vue3学习笔记(一)】vue3简介;使用vue-cli创建工程;使用vite创建工程;分析工程结构;安装开发者工具

news2024/12/23 0:05:17

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

对应课程136-140节

课程 P136节 《vue3简介》笔记

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

课程 P137节 《使用vue-cli创建工程》笔记

官方文档:
https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create官方文档地址

在这里插入图片描述

查看vue-cli版本:

在这里插入图片描述

使用 vue create 创建项目,选择vue3以及其它需要的配置,之后等待;如果过程中出现长时间卡顿,可以尝试敲下回车继续:

在这里插入图片描述

创建完毕后进入项目目录并运行:

在这里插入图片描述

课程 P138节 《使用vite创建工程》笔记

目前,主流的前端构建工具是webpack,vite是新一代的前端构建工具,它是尤雨溪团队打造的,优势如下图列举:

传统构建与vite构建对比:现在webpack的构建模式为:从入口文件进入,分析路由,分析模块,进行打包,最后服务器就位;而vite构建模式为:首先就将服务器准备好,然后去根据入口找到相关的路由与模块,进行打包,通过动态引入与代码分割,理论上要比webpack更快。

在这里插入图片描述

使用vite创建vue3工程的步骤:

在这里插入图片描述

课程 P139节 《分析工程结构》笔记

如果初始化工程时遇到问题不能顺利初始化,多半和npm有关,说几个常见的解决办法:

  • 清理npm缓存;
  • 重装nodeJS;
  • 排查网络问题,可以试试配置淘宝镜像等

入口文件 main.js :

在这里插入图片描述

与vue2初始化工程的区别:

在这里插入图片描述

在vue2中(注释的代码),new Vue() 得到一个Vue构造函数的实例对象 vm,然后将其绑定到 #app 元素上;而在vue3中, 通过createApp函数创建应用实例对象,并绑定到 #app 元素上。

在这里插入图片描述

打印出通过createApp函数得到的应用实例对象,发现它更“轻量”:

在这里插入图片描述

在这里插入图片描述

关闭语法检查:

在这里插入图片描述

测试应用实例对象的挂载与卸载方法:

在这里插入图片描述

查看工程中的App.vue文件,发型vue3组件中的模板中可以没有根标签:

在这里插入图片描述

课程 P140节 《安装开发者工具》笔记

第一种方式:通过chrome网上商店安装:
在这里插入图片描述

安装好并启用后,就可以使用了。但beta版还在试用中,如果想试用它查看vuex的数据,是不行的

在这里插入图片描述

第二种方式:打开拓展程序,打开开发者模式,将课件中的离线安装包拖进来,会弹出这个提示,点击添加进行添加

在这里插入图片描述

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

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

相关文章

zotero+word优化管理参考文献

写论文,整理参考文献,管理参考文献很麻烦,参考文献格式罗列很麻烦,论文需要修改时,重新调整参考文献顺序很麻烦。 zoteroword可以很好的帮助解决这个问题。 Step1 zotero软件安装 默认word你已经安装好了 step2 安…

HWOD:九键输入法的转换

一、知识点 A的ASCII码是65,Z的ASCII码是90 a的ASCII码是97,z的ASCII码是122 从z到a的反循环,用26求余数 二、题目 1、描述 九键手机键盘上的数字与字母的对应: 1--1, abc--2, def--3, ghi--4, jkl--5, mno--6, …

ubuntu 中安装docker

1 资源地址 进入ubuntu官网下载Ubuntu23.04的版本的镜像 2 安装ubuntu 这里选择再Vmware上安装Ubuntu23.04.6 创建一个虚拟机,下一步下一步 注意虚拟机配置网络桥接,CD/DVD选择本地的镜像地址 开启此虚拟机,下一步下一步等待镜像安装。 3…

自动化面试常见算法题!

1、实现一个数字的反转,比如输入12345,输出54321 num 12345 num_str str(num) reversed_num_str num_str[::-1] reversed_num int(reversed_num_str) print(reversed_num) # 输出 54321代码解析:首先将输入的数字转换为字符串&#xff…

Tensorflow2.0笔记 - 使用compile,fit,evaluate,predict简化流程

本笔记主要用compile, fit, evalutate和predict来简化整体代码,使用这些高层API可以减少很多重复代码。具体内容请自行百度,本笔记基于FashionMnist的训练笔记,原始笔记如下: Tensorflow2.0笔记 - FashionMnist数据集训练-CSDN博…

六、保持长期高效的七个法则(二)Rules for Staying Productive Long-Term(2)

Rule #5 - If your work changes, your system should too. 准则五:如果你的工作变了,你的系统也应该改变。 For some, work will be consistent enough to not need major changes.You simply stick to the same system and you’ll get the results y…

PL/SQL概述

oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/135209645 PL/SQL概述 PL/SQL(Procedural Language extension to SQL)是 Oracle 对标准 SQL语言的扩充,是专门用于各种环境下对 Oracle 数据库进行访问和开发的语言。 由…

HWOD:对n个字符串按照字典序排序

一、知识点 1、pow函数 引用头文件math.h 求x的y次方 2、链接数学库 math.h头文件对应的库名称是libm sudo find / -name libm.so -print ls /usr/lib/x86_64-linux-gnu/ 链接命令:gcc xxx.c -L. -lm 3、52进制 A的ASCII码是65,Z的ASCII…

Ubuntu 配置 kubernetes 学习环境,让外部访问 dashboard

Ubuntu 配置 kubernetes 学习环境 一、安装 1. minikube 首先下载一下 minikube,这是一个单机版的 k8s,只需要有容器环境就可以轻松启动和学习 k8s。 首先你需要有Docker、QEMU、Hyperkit等其中之一的容器环境,以下使用 docker 进行。 对…

OpenCV模块熟悉:点云处理相关

1. 显示--VIZ 曾经基于PCL 做过不少点云相关的开发,采样VTK进行有点云显示。后来基于OpenCV做了不少三维重建工作,总是将点云保存下来,然后借助CloudCompare等查看结果。如果能够将VIZ编译进来,预计会提升开发速度。 …

aws 入门篇 02.区域和可用区

aws入门篇 02.Region和AZ 02.区域和可用区 区域(Region):us-east-1:美东1区可用区(Availability Zones) AWS的区域遍布世界各地 一个区域(Region)是由多个可用区(AZ&am…

从根本上优雅地解决 VSCode 中的 Python 模块导入问题

整体概述: 在我尝试运行 test_deal_file.py 时,我遇到了一个 ModuleNotFoundError 错误,Python告诉我找不到名为 controllers 的模块。这意味着我无法从 deal_file.py 中导入 read_excel 函数。 为了解决这个问题,我尝试了几种方法…

Sublime for Mac 使用插件Terminus

1. 快捷键打开命令面板 commandshiftp2. 选择 Package Control: Install Package,然后会出现安装包的列表 3. 在安装终端插件前,我们先装个汉化包,ChineseLocallization,安装完重启 4. 输入 terminus,选择第一个&am…

Pillow教程06:将图片中出现的黄色和红色,改成绿色

---------------Pillow教程集合--------------- Python项目18:使用Pillow模块,随机生成4位数的图片验证码 Python教程93:初识Pillow模块(创建Image对象查看属性图片的保存与缩放) Pillow教程02:图片的裁…

nvm安装以后,node -v npm 等命令提示不是内部或外部命令

因为有vue2和vue3项目多种,所以为了适应各类版本node,使用nvm管理多种node版本,但是当我按教程安装nvm以后,nvm安装以后,node -v npm 等命令提示不是内部或外部命令 首先nvm官网网址:https://github.com/coreybutler/…

iOS - Runtime-消息机制-objc_msgSend()

iOS - Runtime-消息机制-objc_msgSend() 前言 本章主要介绍消息机制-objc_msgSend的执行流程,分为消息发送、动态方法解析、消息转发三个阶段,每个阶段可以做什么。还介绍了super的本质是什么,如何调用的 1. objc_msgSend执行流程 OC中的…

接口自动化之 + Jenkins + Allure报告生成 + 企微消息通知推送

接口自动化之 Jenkins Allure报告生成 企微消息通知推送 在jenkins上部署好项目,构建成功后,希望可以把生成的报告,以及结果统计发送至企微。 效果图: 实现如下。 1、生成allure报告 a. 首先在Jenkins插件管理中&#x…

sqlite跨数据库复制表

1.方法1 要将 SQLite 数据库中的一个表复制到另一个数据库,您可以按照以下步骤操作: 备份原始表的SQL定义和数据: 使用 sqlite3 命令行工具或任何SQLite图形界面工具,您可以执行以下SQL命令来导出表的SQL定义和数据&#xff1a…

libVLC 视频抓图

Windows操作系统提供了多种便捷的截图方式,常见的有以下几种: 全屏截图:通过按下PrtSc键(Print Screen),可以截取整个屏幕的内容。截取的图像会保存在剪贴板中,可以通过CtrlV粘贴到图片编辑工具…

Machine Learning机器学习之K近邻算法(K-Nearest Neighbors,KNN)

目录 前言 背景介绍: 思想: 原理: KNN算法关键问题 一、构建KNN算法 总结: 博主介绍:✌专注于前后端、机器学习、人工智能应用领域开发的优质创作者、秉着互联网精神开源贡献精神,答疑解惑、坚持优质作品共…