入门指南:Vue的安装配置和开发环境设置

背景:

​ 这里想讲一讲为什么使用框架,而不使用原生的HTML、CSS、JavaScript写。原生开发虽然灵活,但在大型项目中可能导致代码重复、维护困难等问题,不符合软件工程的"高内聚低耦合"原则。例如,如果每个页面都需要编写导航,那么每个页面都需要复制相同的导航代码,当导航需要修改时,必须在每个页面都进行修改,这既繁琐又容易出错。为了解决这些问题,前端出现了诸如Vue、React以及Python的Web框架Flask、Django等,这些框架利于后期开发和维护,符合当前主流的软件工程思想。它们提供了组件化和模块化的开发方式,可以减少重复代码,提高开发效率,同时也更易于维护和扩展。通过使用这些框架,开发人员可以更好地遵循软件工程的最佳实践,从而构建出高质量、可维护的前端应用程序。

vue简介:

​ Vue是前端优秀框架, 是一套用于构建用户界面的渐进式框架

在这里插入图片描述

官方文档:

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

Vue具有以下特点:

  1. 响应式:Vue使用双向数据绑定和虚拟DOM来实现响应式更新,当数据发生变化时,视图会自动更新。
  2. 组件化:Vue将应用程序拆分为可重用的组件,每个组件具有自己的逻辑和视图,可以通过组合组件来构建复杂的用户界面。
  3. 模板语法:Vue使用类似HTML的模板语法,可以将模板与组件的数据进行绑定,以便动态生成视图。
  4. 生命周期钩子:Vue提供了一系列的生命周期钩子函数,可以在组件的不同阶段执行特定的操作,例如在组件创建、更新或销毁时执行相应的代码。
  5. 插件系统:Vue具有丰富的插件生态系统,可以通过插件扩展Vue的功能,例如路由管理、状态管理等。
  6. 虚拟DOM:Vue使用虚拟DOM来提高性能,通过比较虚拟DOM树的差异来最小化实际DOM操作的次数,从而提高页面渲染效率。

安装配置:

查看node版本:

node -v

安装vue3:

npm install @vue/cli -g

查看当前vue版本:

vue -V
vue --version

在这里插入图片描述

安装webpack:

cnpm install webpack@4.42.0 -g
cnpm install webpack-cli -g 

创建项目

vue create hello-vue
npm init vue@latest (新创建方式 相当于上个面那个)

在这里插入图片描述

在这里插入图片描述

  cd vue_csnpm install/ cnpm install npm run dev

在这里插入图片描述

运行项目:

npm run serve

在这里插入图片描述

开发环境:

vscode+volar插件

在这里插入图片描述

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

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

相关文章

Linux常用命令----cp 命令

文章目录 1. 基本用法2. 保留文件属性3. 递归复制4. 仅复制更新的文件5. 交互式复制6. 创建符号链接而非复制7. 复制并备份目标文件8. 指定备份后缀9. 详细输出总结 Linux操作系统中,cp 命令是一个非常基础且强大的工具,用于复制文件或目录。本文将详细介…

数据库管理-第118期 记一次开启附加日志导致的性能问题(202301129)

数据库管理-第118期 记一次开启附加日志导致的性能问题(202301129) 本周二凌晨,为了配合某国产数据库从Oracle数据库能够实时同步数据,在X9M那套一体机上做了开启附加日志的操作,也正是因为这个操作带来了一些小问题。…

【爬虫实战】最新python豆瓣热榜Top250

一.最终效果 豆瓣是大多数新手练习爬虫的 二.数据定位过程 对于一个目标网站,该如何快速判定页面上的数据来源?首先你需要简单web调试能力,对大多数开发者来说都chrome浏览器应该是不二选择,当然我选中的也是。F12打开调试面板&…

【Java】泛型的简单使用

文章目录 一、包装类1.基本数据类型和对应的包装类2.自动装箱和自动拆箱3.手动装箱和手动拆箱 二、什么是泛型三、泛型的使用四、裸类型(Raw Type)五、泛型是如何编译的六、泛型的上界七、泛型方法总结 一、包装类 在了解泛型之前我们先了解什么是包装类…

【Openstack Train安装】九、Nova安装

Nova是OpenStack中最核心的组件,它负责根据需求提供虚拟机服务并管理虚拟机生命周期,包括虚拟机创建、虚拟机调度和热迁移等。 Nova的子组件包括nova-api、nova-compute、nova-scheduler、nova-conductor、nova-db、nova-console等等。 本文介绍Nova安装…

【广州华锐视点】AI卡通数字人物帮助企业拓展更广阔的市场空间

随着科技的飞速发展,人类对于虚拟世界的探索愈发深入。从最初的文字和图片,到如今的音频、视频,再到未来可能的虚拟现实,我们一直在寻求与虚拟世界更加紧密的联系。在这个过程中,AI卡通数字人物作为一种新兴的角色&…

Cytoscape学习教程

写在前面 今天分享的内容是自己遇到问题后,咨询社群里面的同学,帮忙解决的总结。 关于Cytoscape,对于做组学或生物信息学的同学基本是陌生的,可能有的同学用这个软件作图是非常溜的,做出来的网络图也是十分的好看,“可玩性”很高,就像前面分享的aPEAR包一样aPEAR包绘制…

气膜建筑助力体育场馆快速普及

传统的室内体育馆投入资金庞大,建设强度高,建设周期漫长。而气膜体育馆的出现,不仅显著降低了建设成本和缩短了建设周期,更符合节能环保的需求,成为推动场馆快速普及的创新建筑形式。 对于校园设施的建设而言&#xff…

【知识】简单理解为何GCN层数越多越能覆盖多跳邻居聚合信息范围更广

转载请注明出处:小锋学长生活大爆炸[xfxuezhang.cn] 背景说明 大多数博客在介绍GCN层数时候,都会提到如下几点(经总结): 在第一层,节点聚合来自其直接邻居的信息。在第二层,由于每个节点现在包含了其直接邻居的信息&a…

MySQL 中的锁(三)

8.7. 死锁和空间锁 一般来说,只要有并发和加锁这两种情况的共同加持下,都会有死锁的身影。 死锁的具体成因,借用我们在并发编程中的内容: 8.7.1. 死锁 8.7.1.1. 概念 是指两个或两个以上的进程在执行过程中,由于竞…

谨慎Apache-Zookeeper-3.5.5以后在CentOS7.X安装的坑

目录 前言 一、现场还原 二、问题诊断 三、问题原因 总结 前言 最近由于项目需要,在服务器上需要搭建Hbase完全分布式集群环境。开发环境,采用的是最小节点的方式进行搭建(即3个节点的模式)。资源环境列表如下: 序号…

封装一些可能会用到的JS的Dom操作方法(非JS自带的方法)

1. 父元素节点下的子元素节点逆序 HTMLElement.prototype.childRevers function () {var all_num this.childElementCount;if (all_num) {while(all_num--){this.appendChild(this.children[all_num]);}} } // 获取 ul 父节点对象 var oul document.getElementsByTagName(u…

Linux系统iptables

目录 一. 防火墙简介 1. 防火墙定义 2. 防火墙分类 ①. 网络层防火墙 ②. 应用层防火墙 二. iptables 1. iptables定义 2. iptables组成 ①. 规则表 ②. 规则链 3. iptables格式 ①. 管理选项 ②. 匹配条件 ③. 控制类型 四. 案例说明 1. 查看规则表 2. 增加新…

1990-2021年上市公司排污费和环境保护税数据

1990-2021年上市公司排污费和环境保护税数据 1、时间:1990-2021年 2、指标: 证券代码、会计期间、year、month、行业、应缴排污费/环境保护税、其中:大气污染物、其中:水污染物、其中:固体废物、其中:噪…

(二)基于高尔夫优化算法GOA求解无人机三维路径规划研究(MATLAB)

一、无人机模型简介: 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献: [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、高尔夫优化算法GOA简介 高尔夫优化算法…

联想SR660 V2服务器使用默认用户登录BMC失败

新到了一台服务器,使用默认用户登录BMC失败 登录失败提示:账号或密码错误 解决方案: 1、重置BMC 2、新增用户 开机后在出现 ThinkServer 界面按 F1,进入 BIOS 界面 进入 System Settings-BMC Configuration 菜单相关&#xf…

Windows 10和11的一个专用的设置菜单,让清理空间变得方便快捷

需要在Windows电脑上释放一些磁盘空间吗?Windows 10和Windows 11都提供了一个专用的设置菜单,使过程更容易。从该菜单中,你可以查看设备上使用了多少空间以及内容类型。 Windows中的“存储”设置还允许你快速清除空间,并启用“存储感知”自动删除临时文件和回收站项目。这…

机器学习:领域自适应学习

训练一个分类器是小问题 上难度 训练数据和测试数据不一致,比如训练数据是黑白的,测试时彩色的,结果准确率非常低。 训练数据和测试数据有点差距的时候,能不能效果也能好呢?这就用到了领域自使用domain adptation 用一…

pkpmbs 建设工程质量监督系统 文件上传漏洞复现

0x01 产品简介 pkpmbs 建设工程质量监督系统是湖南建研信息技术股份有限公司一个与工程质量检测管理系统相结合的,B/S架构的检测信息监管系统。 0x02 漏洞概述 pkpmbs 建设工程质量监督系统 FileUpOrDown.aspx、/Platform/System/FileUpload.ashx、接口处存在任意文…

Python之数据可视化

文章目录 一、1、matplotlib简单应用1.1、绘制带有中文标签和图例的图1.2、 绘制散点图1.3、绘制饼状图1.4、多个图形一起显示 一、 1、matplotlib简单应用 matplotlib模块依赖于numpy模块和tkinter模块,可以绘制多种形式的图形,包括线图、直方图、饼状…