入门指南: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_cs
  npm install/ cnpm install 
  npm run dev

在这里插入图片描述

运行项目:

npm run serve

在这里插入图片描述

开发环境:

vscode+volar插件

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

盘点68个Android系统源码安卓爱好者不容错过

盘点68个Android系统源码安卓爱好者不容错过 学习知识费力气,收集整理更不易。 知识付费甚欢喜,为咱码农谋福利。 源码下载链接:https://pan.baidu.com/s/1FcBxCe7KpJsh0zFxNZ_7wg?pwd8888 提取码:8888 项目名称 Android …

python基础练习题库实验7

文章目录 题目1代码实验结果题目2代码实验结果题目3代码实验结果题目总结题目1 编写代码创建一个名为Staff的类和方法__init__,以按顺序初始化以下实例属性: -staff_number -first_name -last_name -email 代码 class Staff:def __init__(self, staff_number, first_name,…

第三方检测机构实验室信息管理系统LIMS全套源码

​LIMS实验室信息管理系统源码,支持二次开发 LIMS实验室信息管理系统是一种软件类型,旨在通过跟踪与样品、实验、实验室工作流程和仪器相关的数据,提高实验室产能和效率。覆盖实验室从合同审批、委托下单、样品管理、生产调度、检测记录、报告…

CDA level-2 备考经验分享 转数据分析师CDA证书备考 考试相关说明

抓住了23年的尾巴,正好给我考过了CDA level-2 ,虽然今年只有这几个小收获,但是还是很开心了,毕竟知足常乐嘛。 由于工作原因,因此复习都是间断性的,勉勉强强给通过了,只得了个C。 考试注册报名与…

贪心算法的介绍

贪心算法(又称贪婪算法)是指,在对问题求解时,总是做出在当前看来是最好的选择。也就是说,不从整体最优上加以考虑,他所做出的是在某种意义上的局部最优解。贪心算法不是对所有问题都能得到整体最优解&#…

VMD-Attention-LSTM 价格预测实战

VMD-Attention-LSTM时间序列价格预测实战 完整数据代码可直接运行_哔哩哔哩_bilibili 数据展示:数据有几万条 足够的 主要模型代码: import tensorflow as tfdef attention_3d_block(inputs,TIME_STEPS,SINGLE_ATTENTION_VECTOR):# inputs.shape = (batch_size, time_steps,…

如何使用 CSS columns 布局来实现自动分组布局?

最近在项目中碰到这样一个布局,有一个列表,先按照 4 2 的正常顺序排列,当超过 8 个后,会横向重新开始 4 2 的布局,有点像一个个独立的分组,然后水平排列,如下 图中序号是 dom 序列,所…

循环神经网络RNN

1. 背景 RNN(Recurrent Neural Networks) CNN利用输入中的空间几何结构信息;RNN利用输入数据的序列化特性。 2. SimpleRNN单元 传统多层感知机网络假设所有的输入数据之间相互独立,但这对于序列化数据是不成立的。RNN单元用隐藏状态或记忆引入这种依赖…

人工智能原理复习--知识表示(二)

文章目录 上一篇产生式表示法推理方式 结构化表示语义网络语义网络表示知识的方法和步骤应用题目 框架表示法下一篇 上一篇 人工智能原理复习–知识表示(一) 产生式表示法 把推理和行为的过程用产生式规则表示,所以又称基于规则的系统。 产…

两台电脑如何快速传输几百G文件,这款文件传输软件真快

当我们需要传输数百GB的文件时,使用传统工具对于大型文件传输来说往往效率低下。这些方法可能需要数小时,甚至数天才能完成传输。然而,现代生活和工作中,我们经常需要以更快速、更高效的方式传输大文件,无论是因为工作…

聚观早报 |亚马逊AWS发布新AI芯片;拼多多Q3营收增长94%

【聚观365】11月30日消息 亚马逊AWS发布新AI芯片 拼多多Q3营收增长94% Redmi K70全新国风配色揭晓 英伟达扩大自动驾驶中国团队 华为nova 12参数细节曝光 亚马逊AWS发布新AI芯片 在美国时间周二举办的Reinvent大会上,亚马逊旗下的云计算部门AWS发布了新的人工…

Flutter App混淆加固、保护与优化原理

​ 引言 在移动应用程序开发中,保护应用程序的代码和数据安全至关重要。本文将探讨如何对Flutter应用程序进行混淆、优化和保护,以提高应用程序的安全性和隐私。 一、混淆原理 混淆是一种代码保护技术,通过修改源代码或编译后的代码&#…

2.Ansible的copy模块,我最常用的模块

1. 简述 先从我自身的情况来说,我不是运维人员,并且对linux操作也不是特别熟悉,所以工作中我使用ansible基本就是在平常的自动化部署中,而使用最多的模块就是copy模块。我使用copy模块也主要是来替换生产环境的配置文件。所以&am…

无醇啤酒行业分析:预计2028年将达到106亿美元

按照国际惯用的标准划分,通常将酒精度3.5%-4%的称为普通啤酒,将酒精度大于0.5%、小于2.5%的称为低醇啤酒,而酒精度小于0.5%便称为无醇啤酒。酒精给人带来的兴奋感,与体育比赛的紧张刺激相辅相成,啤酒也成为了许多球迷们…

OBC、DCDC自动化测试解决方案!

OBC(车载充电机)和DCDC(直流-直流变换器)是电动汽车的核心部件,DCDC和OBC的功能质量对于整车的性能和安全性至关重要。在OBC和DCDC,以及整车开发测试过程中,需要对OBC和DCDC进行功能和性能方面进行全面的测…

C陷阱与缺陷——第3章 语义陷阱

1. 指针和数组 C语言中只有一维数组,而且数组的大小必须在编译器就作为一个常数确定下来,然而在C语言中数组的元素可以是任何类型的对象,当然也可以是另外的一个数组,这样,要仿真出一个多维数组就不是难事。 对于一个…

被DDoS攻击了怎么办?为什么要选择高防ip?

在当今互联网高度发达的时代,许多企业都依赖于网络来开展业务、推广产品、提供服务。然而,网络攻击,尤其是分布式拒绝服务(DDoS)攻击,已经成为一种日益严重的威胁。面对这种攻击,如何保护您的业…

java后端自学总结

自学总结 MessageSource国际化接口总结 MessageSource国际化接口 今天第一次使用MessageSource接口,比较意外遇到了一些坑 messageSource是spring中的转换消息接口,提供了国际化信息的能力。MessageSource用于解析 消息,并支持消息的参数化和国际化。 S…

【python程序】把小于10的数值都变成1

【python程序】把小于10的数值都变成1 import numpy as np import xarray as xra xr.DataArray(np.arange(25).reshape(5, 5)) a[np.where(a < 10)] 1 print(a)

Linux 代码编辑器:vim

vim 编辑器的简介 vi / vim 都是多模式编辑器&#xff0c;不同的是 vim 是 vi 的升级版本&#xff0c;他不仅兼容 vi 的所有指令&#xff0c;而且还有一些新的特性在里面。比如语法高亮&#xff0c;可视化操作不仅可以在终端运行&#xff0c;也可以在 windows&#xff0c;mac …