Vue3:脚手架
工程环境配置
1.安装nodejs
这里我已经安装过了,只需要打开链接Node.js — Run JavaScript Everywhere直接下载nodejs,安装直接一直下一步下一步
安装完成之后我们来使用电脑的命令行窗口检查一下版本
查看npm源
这里npm源的地址是淘宝的源,不是官方源,因为我之前已经改了,当我们获取源数据时会从外国的源里面获取,这里我们更换一下获取源的位置
这里我们将获取源数据的位置更改了
这里我们也可以安装其它的包管理器
比如yarn和pnpm
npm install yarn -g
npm install pnpm -g
检测是否安装成功
pnpm -v
yarn -v
创建脚手架
创建脚手架其实就是创建一个项目文件,但是这个项目文件已经为我们添加了很多代码,所以我们就不需要去写,直接拿来用就可以了
选择一个存放脚手架文件的位置
这里我直接选择桌面,然后已终端的形式打开这个文件
执行命令
npm create vue@latest
会安装并执行create-vue
然后命令行会问我们这个项目要取什么名字,需不需要什么功能,这里的功能我们全都选择否
我们会得到一个文件,我们来用终端来打开这个文件
npm i
用来安装vue的模块依赖,后续指令需要它来实现
npm run dev
启动项目,启动完了项目终端会给我们一个链接,这个链接对应的地址就是本地服务器的网页
让我们打开终端给我们的链接
这是vue给我们的初始页面
这样很多东西就不需要我们自己去配置,直接下载到本地直接用就可以了,这种东西我们称为脚手架
认识脚手架目录
node_modules里面有很多我们环境需要使用到的包,不如vue包,这样我们就不需要到官网去获取vue的数据,直接安装在本地直接拿来用就可以了
package.json用来管理项目的文件
src/main.js是整个项目打包的入口
App.vue是vue代码的入口
index.html是项目入口网页
src下的所有代码都会被vite打包成css/js/html交给index.html然后呈现在观众眼前
分析脚手架中三个入口级代码
三个入口文件分别是:main.js,App.vue,index.html
main.js负责将App.vue的代码整合起来创建应用,App.vue负责根层的组件,index.html负责将main.js打包形成的应用在网页中展示出来
Vue单文件
Vue的文件由三个部分组成分别是HTML,CSS,JS,我们来看Vue文件的简化版
<script setup>
//数据...
</script><template>
<!-- 数据.. -->
</template><style scoped>
/* 数据 */
</style>
script:JS,template:HTML,style:CSS
这里的scoped能让<style>保证修饰<template>
清理目录
为了便于后于的开发,我们将脚手架默认给我们的数据删除,分别是assets和component还有Vue里面的初三大框架之外的代码
现在这个项目里的代码文件才是项目主体
代码相应练习
<script setup>
import { ref,reactive } from "vue"
let str=ref("hello,world")
let obj=reactive({num:69,str1:"ganchuhao",grade:60
})
function func() {return 100
}
</script>
<template><p>{{ str }}</p><p>我是{{obj.str1}}学号是{{ obj.num}}</p><p>我是{{obj.str1}}学号是{{ obj.num+200}}</p><p>成绩{{ obj.grade>60?"及格":"不及格" }}</p><p>func的返回值是{{ func() }}</p><p>STR的单词有{{ str.split(' ').length }}个单词</p></template>
<style scoped>
</style>
演示结果
快速生成基础代码
vbase
相关文章:
Vue3:脚手架
工程环境配置 1.安装nodejs 这里我已经安装过了,只需要打开链接Node.js — Run JavaScript Everywhere直接下载nodejs,安装直接一直下一步下一步 安装完成之后我们来使用电脑的命令行窗口检查一下版本 查看npm源 这里npm源的地址是淘宝的源࿰…...
Android native崩溃问题分析
最近在做NDK项目的时候,出现了启动应用就崩溃了,崩溃日志如下: 10:41:04.743 A Build fingerprint: samsung/g0qzcx/g0q:13/TP1A.220624.014/S9060ZCU4CWH1:user/release-keys 10:41:04.743 A Revision: 12 10:41:04.743 A ABI: arm64…...
Playwright vs Selenium:2025 年 Web 自动化终极对比指南
1. 引言 Web 自动化领域正在迅速发展,在 2025 年,Playwright 与 Selenium 之间的选择已成为开发团队面临的重要决策。Selenium 作为行业标准已有十多年,而 Playwright 作为现代替代方案,以卓越的性能和现代化特性迅速崛起。 本指…...
数据结构(3)线性表-链表-单链表
我们学习过顺序表时,一旦对头部或中间的数据进行处理,由于物理结构的连续性,为了不覆盖,都得移,就导致时间复杂度为O(n),还有一个潜在的问题就是扩容,假如我们扩容前是10…...
Python 中的 typing.ClassVar 详解
一、ClassVar 的定义和基本用途 ClassVar 是 typing 模块中提供的一种特殊类型,用于在类型注解中标记类变量(静态变量)。根据官方文档,使用 ClassVar[…] 注释的属性表示该属性只在类层面使用,不应在实例上赋值 例如&…...
主流数据库运维故障排查卡片式速查表与视觉图谱
主流数据库运维故障排查卡片式速查表与视觉图谱 本文件将主文档内容转化为模块化卡片结构,并补充数据库结构图、排查路径图、锁机制对比等视觉图谱,以便在演示、教学或现场排障中快速引用。 📌 故障卡片速查:连接失败 数据库检查…...
Unity:延迟执行函数:Invoke()
目录 Unity 中的 Invoke() 方法详解 什么是 Invoke()? 基本使用方法 使用要点 延伸功能 ❗️Invoke 的局限与注意事项 在Unity中,延迟执行函数是游戏逻辑中常见的需求,比如: 延迟切换场景 延迟播放音效或动画 给玩家时间…...
医学影像系统性能优化与调试技术:深度剖析与实践指南
🧑 博主简介:CSDN博客专家、CSDN平台优质创作者,高级开发工程师,数学专业,10年以上C/C, C#, Java等多种编程语言开发经验,拥有高级工程师证书;擅长C/C、C#等开发语言,熟悉Java常用开…...
【HTML5学习笔记1】html标签(上)
web标准(重点) w3c 构成:结构、表现、行为,结构样式行为相分离 结构:网页元素整理分类 html 表现:外观css 行为:交互 javascript html标签 1.html语法规范 1) 所有标签都在…...
SearchIndexablesProvider
实现的 provider 根据索引添加文档可知,该 provider 需要继承自 frameworks/base/core/java/android/provider/SearchIndexablesProvider.java 类,并且添加权限 android.permission.READ_SEARCH_INDEXABLES。过滤 Settings 代码,可以轻易找到…...
《k-means 散点图可视化》实验报告
一,实验目的 本次实验旨在通过Python编程实现k - means算法的散点图可视化。学习者将编写代码,深入理解聚类分析基本原理与k - means算法实现流程,掌握数据聚类及可视化方法,以直观展示聚类结果。 二,实验原理 k-mea…...
数学复习笔记 12
前言 现在做一下例题和练习题。矩阵的秩和线性相关。另外还要复盘前面高数的部分的内容。奥,之前矩阵的例题和练习题,也没有做完,行列式的例题和练习题也没有做完。累加起来了。以后还是得学一个知识点就做一个部分的内容,日拱一…...
Web-CSS入门
WEB前端,三部分:HTML部分、CSS部分、Javascript部分。 1.HTML部分:主要负责网页的结构层 2.CSS部分:主要负责网页的样式层 3.JS部分:主要负责网页的行为层 **基本概念** 层叠样式表,Cascading Style Sh…...
Qt/C++编写音视频实时通话程序/画中画/设备热插拔/支持本地摄像头和桌面
一、前言 近期有客户提需求,需要在嵌入式板子上和电脑之间音视频通话,要求用Qt开发,可以用第三方的编解码组件,能少用就尽量少用,以便后期移植起来方便。如果换成5年前的知识储备,估计会采用纯网络通信收发…...
Ubuntu快速安装Python3.11及多版本管理
之前文章和大家分享过,将会出一篇专栏(从电脑装ubuntu系统,到安装ubuntu的常用基础软件:jdk、python、node、nginx、maven、supervisor、minio、docker、git、mysql、redis、postgresql、mq、ollama等),目前…...
Qt功能区:Ribbon使用
Ribbon使用 1. Ribbon功能区介绍1.1 样式 2. 基本功能区设置2.1 安装动态库(推荐)2.2 在MainWindow中使用Ribbon2.3 在QWidget中使用SARibbonBar2.4 创建Category和Pannel2.5 ContextCategory 上下文标签创建 2.6 ApplicationButton2.7 QuickAccessBar和…...
【学习心得】Jupyter 如何在conda的base环境中其他虚拟环境内核
如果你在conda的base环境运行了jupyter lab打开了一个ipynb文本,此时选择的内核是base虚拟环境的Python内核,如果我想切换成其他conda虚拟环境来运行这个文件该怎么办?下面我们试着还原一下问题,并且解决问题。 【注】 这个问题出…...
在微创手术中使用Kinova轻型机械臂进行多视图图像采集和3D重建
在微创手术中,Kinova轻型机械臂通过其灵活的运动控制和高精度的操作能力,支持多视图图像采集和3D重建。这种技术通过机械臂搭载的光学系统实现精准的多角度扫描,为医疗团队提供清晰且详细的解剖结构模型。其核心在于结合先进的传感器配置与重…...
[Java][Leetcode middle] 238. 除自身以外数组的乘积
第一个想法是: 想求出所有元素乘积,然后除以i对应的元素本书;这个想法是完全错误的: nums[I] 可能有0题目要求了不能用除法 第二个想法是: 其实写之前就知道会超时,但是我什么都做不到啊! 双…...
【leetcode】144. 二叉树的前序遍历
给你二叉树的根节点 root ,返回它节点值的 前序 遍历。 示例 1: 输入:root [1,null,2,3] 输出:[1,2,3] 解释: 示例 2: 输入:root [1,2,3,4,5,null,8,null,null,6,7,9] 输出:…...
SpringBoot常用注解详解
文章目录 1. 前言2. 核心注解2.1 SpringBootApplication2.2 Configuration2.3 EnableAutoConfiguration2.4 ComponentScan2.5 Bean2.6 Autowired2.7 Qualifier2.8 Primary2.9 Value2.10 PropertySource2.11 ConfigurationProperties2.12 Profile 3. Web开发相关注解3.1 Control…...
中文分词与数据可视化02
jieba 库简介 jieba(结巴分词)是一个高效的中文分词工具,广泛用于中文自然语言处理(NLP)任务。它支持以下功能: 分词:将句子切分为独立的词语。 自定义词典:添加专业词汇或新词&am…...
SSH主机密钥验证失败:全面解决方案与技术手册
一、问题本质与安全机制解析 SSH(Secure Shell)的主机密钥验证是安全通信的核心机制,当出现"Host key verification failed"错误时,表明客户端检测到服务器身份异常。这种设计可有效防范中间人攻击(Man-in-the-Middle),其工作原理…...
buuctf Crypto-鸡藕椒盐味1
1.题目: 公司食堂最新出了一种小吃,叫鸡藕椒盐味汉堡,售价八块钱,为了促销,上面有一个验证码,输入后可以再换取一个汉堡。但是问题是每个验证码几乎都有错误,而且打印的时候倒了一下。小明买到了一个汉堡&a…...
真题卷001——算法备赛
蓝桥杯2024年C/CB组国赛卷 1.合法密码 问题描述 小蓝正在开发自己的OJ网站。他要求用户的密码必须符合一下条件: 长度大于等于8小于等于16必须包含至少一个数字字符和至少一个符号字符 请计算一下字符串,有多少个子串可以当作合法密码。字符串为&am…...
基于MCP的桥梁设计规范智能解析与校审系统构建实践
引言 在腾讯云开发者社区中,有多种MCP工具可以用于本系统的开发和优化中,以下是一些潜在的应用场景: PDF解析工具:如pdfplumber等,可以用于规范文件的预处理,提取文本和图像信息。自然语言处理工具…...
matlab与python问题解析
Python requests乱码的五种解决办法 Python requests乱码的五种解决办法_requests.get乱码-CSDN博客 requests库post请求参数data、json和files的使用 requests库post请求参数data、json和files的使用_requests post data-CSDN博客 如何在浏览器中查看POST请求提交的数据内…...
【分布式锁通关指南 10】源码剖析redisson之MultiLock的实现
引言 本期我们将把目光聚焦在 Redisson 中另一个颇具代表性的分布式锁实现——MultiLock。它的核心思想是:一次性对多个独立的 RLock 进行加锁或解锁操作,只有当多个锁都成功加锁时才算真正完成锁的获取,一旦有任何一个失败,整体操…...
MySQL 8.0 OCP 1Z0-908 131-140题
Q131.You have upgraded the MySQL binaries from 5.7.28 to 8.0.18 by using an in-place upgrade. Examine the message sequence generated during the first start of MySQL 8.0.18: 。。。[System]。。。/usx/sbin/mysqld (mysqld 8.0.18-commercial) starting as process…...
实战解析MCP-使用本地的Qwen-2.5模型-AI协议的未来?
文章目录 目录 文章目录 前言 一、MCP是什么? 1.1MCP定义 1.2工作原理 二、为什么要MCP? 2.1 打破碎片化的困局 2.2 实时双向通信,提升交互效率 2.3 提高安全性与数据隐私保护 三、MCP 与 LangChain 的区别 3.1 目标定位不同 3.…...
从零开始学习three.js(20):three.js实现天气与时间动态效果(白天,黑夜,下雨,下雪)
基于Three.js的天气与时间动态效果实现 本文将通过代码解析,介绍如何使用Three.js实现动态天气(下雨、下雪)和时间(白天、黑夜)切换效果。完整代码基于一个交互式天气模拟项目,支持粒子密度、速度和环境亮…...
sqli-labs靶场23-28a关(过滤)
目录 less23(--过滤) less24(二次注入) less25(or过滤) less25a(or过滤) less26(--和空格过滤报错) less26a(--空格过滤盲注) …...
Sigmoid与Softmax:从二分类到多分类的深度解析
Sigmoid与Softmax:从二分类到多分类的深度解析 联系 函数性质:二者都是非线性函数 ,也都是指数归一化函数,可将输入值映射为0到1之间的实数 ,都能把输出转化成概率分布的形式,在神经网络中常作为激活函数使用。Softmax是Sigmoid的推广:从功能角度看,Softmax函数可视为…...
uni-app x正式支持鸿蒙原生应用开发
DCloud发布的HBuilderX 4.64正式版,支持编译uni-app x项目到鸿蒙平台,实现跨平台开发鸿蒙原生应用。至此,uni-app x 已经完成Android、iOS、鸿蒙、Web、微信小程序等主流平台全覆盖。 uni-app x,是下一代 uni-app,是一…...
【软件推荐——pdf2docx】
pdf2docx Open source Python library for converting PDF to DOCX. https://github.com/ArtifexSoftware/pdf2docx Install pip install pdf2docx使用 from pdf2docx import Converterpdf_file D:\my\c4611_sample_explain.pdf docx_file D:\my\c4611_sample_explain.d…...
HarmonyOS开发组件基础
个人简介 👨💻个人主页: 魔术师 📖学习方向: 主攻前端方向,正逐渐往全栈发展 🚴个人状态: 研发工程师,现效力于政务服务网事业 🇨🇳人生格言&…...
JMeter 测试工具--组件--简单介绍
目录 编辑 一、测试计划(Test Plan) 二、线程组(Thread Group) 三、取样器(Sampler) 四、监听器(Listener) 五、逻辑控制器(Logic Controller) 六、断…...
ECPF 简介
ECPF(Embedded CPU Function,嵌入式CPU功能)是NVIDIA BlueField DPU特有的一种功能类型,和PF(Physical Function,物理功能)、VF(Virtual Function,虚拟功能)密…...
【Opencv】canny边缘检测提取中心坐标
采用opencv 对图像中的小球通过canny边缘检测的方式进行提取坐标 本文介绍了如何使用OpenCV对图像中的小球进行Canny边缘检测,并通过Zernike矩进行亚像素边缘检测,最终拟合椭圆以获取小球的精确坐标。首先,图像被转换为灰度图并进行高斯平滑…...
C#实现访问远程硬盘(附源码)
在现实场景中,我们经常用到远程桌面功能,而在某些场景下,我们需要使用类似的远程硬盘功能,这样能非常方便地操作对方电脑磁盘的目录、以及传送文件。那么,这样的远程硬盘功能要怎么实现了? 这次我们将给出…...
AI日报 · 2025年05月16日|Google DeepMind推出AlphaEvolve,能自主设计高级算法的编码代理
全球AI新闻日报 日期:2025年5月16日 目录 OpenAI与CoreWeave签署40亿美元新协议,GPT-4.1模型全面推出Google DeepMind推出AlphaEvolve,能自主设计高级算法的编码代理Anthropic律师因Claude模型虚构法律引用被迫道歉Meta推迟旗舰AI模型&quo…...
TCP/IP 知识体系
TCP/IP 知识体系 一、TCP/IP 定义 全称:Transmission Control Protocol/Internet Protocol(传输控制协议/网际协议)核心概念: 跨网络实现信息传输的协议簇(包含 TCP、IP、FTP、SMTP、UDP 等协议)因 TCP 和…...
记一次缓存填坑省市区级联获取的操作
先说缓存是什么? 缓存主要是解决高并发,大数据场景下,热点数据快速访问。缓存的原则首先保证数据的准确和最终数据一致,其次是距离用户越近越好,同步越及时越好。 再说我们遇到的场景: 接手项目后&#…...
【时空图神经网络 交通】相关模型2:STSGCN | 时空同步图卷积网络 | 空间相关性,时间相关性,空间-时间异质性
注:仅学习使用~ 前情提要: 【时空图神经网络 & 交通】相关模型1:STGCN | 完全卷积结构,高效的图卷积近似,瓶颈策略 | 时间门控卷积层:GLU(Gated Linear Unit),一种特殊的非线性门控单元目录 STSGCN-2020年1.1 背景1.2 模型1.2.1 问题背景:现有模型存在的问题1.2…...
uniapp实现在线pdf预览以及下载
uniapp实现在线pdf预览以及下载 在线预览 遇到的问题 后端返回一个url地址,我需要将在在页面中渲染出来。因为在浏览器栏上我输入url地址就可以直接预览pdf文件,因此直接的想法是通过web-view组件直接渲染。有什么问题呢?在h5端能够正常渲…...
【Rust闭包】rust语言闭包函数原理用法汇总与应用实战
✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…...
裸金属服务器和云服务器之间的差别
裸金属服务器能够直接在硬件上运行,不需要额外的虚化层,让每个应用程序或者是服务都能够在实际的硬件上运行,不需要和其他虚拟服务器来共享资源;而云服务器作为一种虚拟服务器,是通过虚拟化技术为企业提供一个独立的计…...
CentOS系统中升级Python 3.12.2版本
在CentOS系统中升级Python版本是一项常见的操作,尤其是在需要使用较新功能或满足某些软件依赖的情况下。以下是详细的步骤和注意事项,帮助您顺利完成Python版本的升级。 1. 升级Python版本前的准备 在开始升级之前,请确保以下几点࿱…...
win10-django项目与mysql的基本增删改查
以下都是在win10系统下,django项目的orm框架对本地mysql的表的操作 models.py----->即表对应的类所在的位置 在表里新增数据 1.引入表对应的在models.py中的类class 2.在views.py中使用函数:类名.objects.create(字段名值,字段名"值"。。。…...
图像处理:预览并绘制图像细节
前言 因为最近在搞毕业论文的事情,要做出一下图像细节对比图,所以我这里写了两个脚本,一个用于框选并同时预览图像放大细节,可显示并返回框选图像的坐标,另外一个是输入框选图像的坐标并将放大的细节放置在图像中&…...