当前位置: 首页 > news >正文

第三部分使用脚手架:vue学习(61-65)

文章目录

  • 61 创建vue脚手架![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f71d4324be0542209e690ab9e886d199.png)
  • 62 分析脚手架结构
  • 63 render函数
  • 64 修改默认配置
  • 65 ref 属性

61 创建vue脚手架在这里插入图片描述

写完vue文件,没有脚手架做翻译,浏览器不认识。
脚手架的版本,一般可以选择最新的。vue的低版本可以被高版本脚手架兼容。

cli的解释:命令行接口工具
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意:安装cli的时候,会卡住,记得敲一下回车,就继续安装了。
注意:项目名字尽可能回避主流库的名字

在这里插入图片描述
会提示你用vue的哪个版本,现在一般还是用2:
在这里插入图片描述
创建成功的提示:
在这里插入图片描述
在这里插入图片描述
运行成功如下界面:
在这里插入图片描述

web界面如下:
在这里插入图片描述

62 分析脚手架结构

生成的主要目录结构如下:
在这里插入图片描述
.gitignore : git的忽略文件
babel.config.js : 很重要,但是不需要我们往里写什么东西。babel的配置文件。
在这里插入图片描述
package.json:只要你的工程符合npm规范,都会有这个文件。项目的名字,版本,用的哪些依赖等等。
在这里插入图片描述
package-lock.json:包管理器概念中的包版本控制文件。以后再装会很快。锁定住依赖的版本。这个文件要留着。
readme.md: 项目的启动注意事项
src目录下:2个文件夹,2个文件
在这里插入图片描述
main.js:当执行完了npm run serve 命令之后,直接就去运行main.js. 所以才叫入口文件。
在这里插入图片描述
这个mount,可以用el标签代替。
在这里插入图片描述

app.vue:管理所有的组件。
在这里插入图片描述
所有程序员写的组件,都放在components文件夹下面。
在这里插入图片描述
在main.js里面有个总的容器,叫做app的div,这个div在public目录下的index文件中。我们开发的都是这种单页面应用。
在这里插入图片描述
在这里插入图片描述

63 render函数

因为下图中的引用,用的是残缺版本的vue(可以看下module里面的vue文件夹,package.json文件里面用的是一个runtime类型的vue.js,),没有模板解析器。
在这里插入图片描述
想要使用残缺版本的vue,还想写模板里的标签代码,可以这么写。

在这里插入图片描述
这种写法,就可以简写成下图,这种经典写法。
在这里插入图片描述
render就实现了,帮你渲染app.vue的功能。
vue有2部分组成:核心(语法相关的东西,生命周期这些)+模板解析器。模板解析器,占用所有代码的三分之一体积。当最后打包的时候,vue代码被webpack翻译成js了,模板解析器,也就没有用了,但是你还是打包进去了。所以这就是阉割版存在的意义。可以看下图,文件的体积的区别。
在这里插入图片描述
在这里插入图片描述
用铺瓷砖的案例,解释为啥使用精简版本的vue。
在这里插入图片描述
这个render只有在main.js中会用到,其他时候在vue文件中,都不用写了,有专门的组件去解析。

64 修改默认配置

比如为啥上来就必须执行main.js,想换一下行不行?

想查看vue的所有默认配置:可以用下面这句话。

在这里插入图片描述
在这个文件中,包括了所有的默认配置。想查看入口文件的配置位置,拉到最后就是。
在这里插入图片描述
默认的配置有哪些不能修改呢?比如下图中红框中的部分,不能修改。

在这里插入图片描述

想修改的话,需要在跟package.json文件同级的目录下,新建一个vue.config.js.在这里面修改。

在这里插入图片描述
需要注意的是,这个文件,不要出现空的字典对象,会出现覆盖。比如entry这一行不能注释掉。

在这里插入图片描述
总结:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

65 ref 属性

如果想要获得某个界面的dom对象,可以这么写:
在这里插入图片描述
但这不是vue的写法,不提倡,vue是用ref。
在这里插入图片描述
可以简单理解为id的替代者。但是这个很灵活,不止可以拿到dom对象,还可以拿到组件的实例对象。

在这里插入图片描述
如果用id获得这个school标签的内容,如下图:获得的会是生成的dom在这里插入图片描述
在这里插入图片描述

总结:
在这里插入图片描述

相关文章:

第三部分使用脚手架:vue学习(61-65)

文章目录 61 创建vue脚手架![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f71d4324be0542209e690ab9e886d199.png)62 分析脚手架结构63 render函数64 修改默认配置65 ref 属性 61 创建vue脚手架 写完vue文件,没有脚手架做翻译,浏览器不认识…...

【Linux学习笔记】解析Linux系统内核:架构、功能、工作原理和发展趋势

操作系统是一个用来和硬件打交道并为用户程序提供一个有限服务集的低级支撑软件。一个计算机系统是一个硬件和软件的共生体,它们互相依赖,不可分割。计算机的硬件,含有外围设备、处理器、内存、硬盘和其他的电子设备组成计算机的发动机。但是…...

springboot连接oracle报错ORA-12505解决方案

springboot连接oracle报错ORA-12505解决方案 springboot项目,在测试环境连接正常,生产环境连接数据库报错ORA-12505。 测试环境连接数据库语句为jdbc:oracle:thin:xxxx.xxxx.xxxx.xxxx:1521:orcl 生产环境修改对应ip后报错ORA-12505, TNS:listener does…...

服务器为什么大多用 Linux?

服务器为什么大多用 Linux? 在开始前我有一些资料,是我根据自己从业十年经验,熬夜搞了几个通宵,精心整理了一份「Linux的资料从专业入门到高级教程工具包」,点个关注,全部无偿共享给大家!&#…...

C++上位软件通过Snap7开源库访问西门子S7-200/合信M226ES数据块的方法

前言 上一篇文章中介绍了Snap7访问西门子S7-1200/S7-1500 DB块的方法,对于S7-200PLC是没有数据块访问的。S7-200PLC中Snap7只能通过访问MB块,VB块的方法进行和PLC之间的Snap7通信和数据交换。手头没有S7-200PLC故通过合信CTMC M226ES运动控制器进行测试&…...

通信及信号处理领域期刊影响因子、分区及期刊推荐-2024版

期刊名IF(202401)中科院分区(20231227)备注IEEE Journal on Selected Areas in Communications16.4计算机科学1区Top通信顶刊IEEE Transactions on Signal Processing5.4工程技术2区Top信号处理顶刊IEEE Transactions on Information Theory2.5计算机科学3区信息论顶刊IEEE Tra…...

cfa一级考生复习经验分享系列(十五)

备考背景: 本科211石油理科背景;无金融方面专业知识及工作经验;在职期间备考;有效备考时间2个月;12月一级考试10A。 复习进度及教材选择 首先说明,关于教材的经验分享针对非金融背景考生。 第一阶段&#x…...

如潮好评!优秀选手视角下的第二届粤港澳大湾区(黄埔)国际算法算例大赛

为发挥国家实验室作用、推动地区大数据与人工智能算法的生态体系建设,琶洲实验室(黄埔)受广州市黄埔区政府委托,于 2022 年创办粤港澳大湾区(黄埔)国际算法算例大赛,推动原始创新、赋能社会经济…...

软件测试之冒烟测试

一、什么是冒烟测试 这一术语源自硬件行业。对一个硬件或硬件组件进行更改或修复后,直接给设备加电。如果没有冒烟,则该组件就通过了测试。在软件中,“冒烟测试”这一术语描述的是在将代码更改嵌入到产品的源树中之前对这些更改进行验证的过…...

NE555学习笔记-2024

实物图片 NE555引脚图 内部时序图 示列1,红外接收电路 红外接收电路的工作原理:在上述电路中,TSOP1738构成了该电路的主要组成部分,旨在检测来自任何来源的红外信号。这用于检测38 KHz范围的信号,因此命名为“TSOP173…...

记一次docker中安装redis的过程

1. Docker搜索redis镜像 docker search redis2. Docker搜索redis镜像 docker pull redis3.Docker挂载配置文件 挂载 redis 的配置文件挂载 redis 的持久化文件(为了数据的持久化)。 conf文件位置: /home/redis/myredis/redis.conf data文件…...

Matlab进阶绘图第37期—多色悬浮柱状图

多色悬浮柱状图是一种特殊的柱状图。 与常规柱状图相比,多色悬浮柱状图可以通过悬浮的矩形展示最小值到最大值的范围(或其他范围表达),并通过颜色进行美化/区分/附加信息。 本文使用自己制作的Floatingbar小工具进行多色悬浮柱状…...

【嵌入式】About USB Powering

https://www.embedded.com/usb-type-c-and-power-delivery-101-power-delivery-protocol/https://www.embedded.com/usb-type-c-and-power-delivery-101-power-delivery-protocol/ Type-C接口有多强?PD协议又是什么?-电子发烧友网由于Type-C接口自身的强…...

MySQL——事物

目录 一.发现问题 二.什么时事物 三.事务提交方式 四.事物的常规操作方式 五. 事务隔离级别 1.如何理解隔离性 2.隔离级别 3.查看与设置隔离性 4.读未提交【Read Uncommitted】 5.读提交【Read Committed】 6.可重复读【Repeatable Read】 7.串行化【serializabl…...

Windows搭建RTSP视频流服务(EasyDarWin服务器版)

文章目录 引言1、安装FFmpeg2、安装EasyDarWin3、实现本地\虚拟摄像头推流服务4、使用VLC或PotPlayer可视化播放器播放视频5、RTSP / RTMP系列文章 引言 RTSP和RTMP视频流的区别 RTSP (Real-Time Streaming Protocol)实时流媒体协议。 RTSP定义流格式&am…...

私域营销,让你的生意从线下到线上都火爆!

一、提高流量 获取流量的五个关键要素:目标受众、传播渠道、内容策略、短期利益和长期价值 在当今竞争激烈的市场环境中,获取流量是每个企业和个人都必须面对的挑战。为了有效地吸引潜在客户,我们需要关注五个关键要素:目标受众…...

MATLAB基本绘图操作(二维和三维绘图)

MATLAB基本绘图操作 文章目录 MATLAB基本绘图操作1、二维平面绘图1.1、线条(折线图)1.2、条形图1.3、极坐标图1.4、散点图 2、三维立体绘图2.1、三维曲面图2.2、三维曲线图(点图) 3、图片分区(子图) 1、二维…...

中国社科院与新加坡新跃社科联合培养博士—攻读在职博士的理由是什么?

当今社会,很多人已经深刻的意识到知识是改变自己命运的重要途径,在职教育的完善让很多在职人员选择此方式进修,那么为什么要选择攻读在职博士?中国社科院与新加坡新跃社科联合培养博士与您一起走进,在职博士。 那么其…...

T40N 君正智能处理器T40 BGA 芯片

T40N是一款智能视频应用处理器,适用于移动摄像机、安防等视频设备调查、视频聊天、视频分析等。该SoC引入了一种创新的体系结构满足高性能计算和高质量图像和视频编码的要求通过视频设备解决。T40N提供高速CPU计算能力,出色的图像信号过程中,…...

Profinet转Modbus使设备互联更简单

在工业自动化领域,为了使设备互联更加简单,可以将Modbus和Profinet相互转换。这样一来,设备之间的互联就变得更加方便和高效。通过Modbus转Profinet网关(XD-MDPN100/200),设备之间的通信变得更加灵活和可靠…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接:3403. 从盒子中找出字典序最大的字符串 I 代码如下: class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

JAVA后端开发——多租户

数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join

纯 Java 项目(非 SpringBoot)集成 Mybatis-Plus 和 Mybatis-Plus-Join 1、依赖1.1、依赖版本1.2、pom.xml 2、代码2.1、SqlSession 构造器2.2、MybatisPlus代码生成器2.3、获取 config.yml 配置2.3.1、config.yml2.3.2、项目配置类 2.4、ftl 模板2.4.1、…...

uniapp手机号一键登录保姆级教程(包含前端和后端)

目录 前置条件创建uniapp项目并关联uniClound云空间开启一键登录模块并开通一键登录服务编写云函数并上传部署获取手机号流程(第一种) 前端直接调用云函数获取手机号(第三种)后台调用云函数获取手机号 错误码常见问题 前置条件 手机安装有sim卡手机开启…...

比较数据迁移后MySQL数据库和OceanBase数据仓库中的表

设计一个MySQL数据库和OceanBase数据仓库的表数据比较的详细程序流程,两张表是相同的结构,都有整型主键id字段,需要每次从数据库分批取得2000条数据,用于比较,比较操作的同时可以再取2000条数据,等上一次比较完成之后,开始比较,直到比较完所有的数据。比较操作需要比较…...

LabVIEW双光子成像系统技术

双光子成像技术的核心特性 双光子成像通过双低能量光子协同激发机制,展现出显著的技术优势: 深层组织穿透能力:适用于活体组织深度成像 高分辨率观测性能:满足微观结构的精细研究需求 低光毒性特点:减少对样本的损伤…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 🍺 最新版brew安装慢到怀疑人生?别怕,教你轻松起飞! 最近Homebrew更新至最新版,每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

LangFlow技术架构分析

🔧 LangFlow 的可视化技术栈 前端节点编辑器 底层框架:基于 (一个现代化的 React 节点绘图库) 功能: 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...