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

news2024/12/27 5:02:58

背景:

​ 这里想讲一讲为什么使用框架,而不使用原生的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插件

在这里插入图片描述

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

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

相关文章

人工智能 - 图像分类:发展历史、技术全解与实战

目录 一、:图像分类的历史与进展历史回顾深度学习的革命当前趋势未来展望 二:核心技术解析图像预处理神经网络基础卷积神经网络(CNN)深度学习框架 第三部分:核心代码与实现环境搭建数据加载和预处理构建CNN模型模型训练…

Python异常处理:try语句的应用与技巧

更多资料获取 📚 个人网站:ipengtao.com 异常处理在Python中是至关重要的。try-except是用于捕获和处理异常的核心机制之一。让我们深入了解如何使用try-except,处理各种异常情况。 try-except语句 在编程中,异常是指运行时发生…

linux环境下编译安装OpenCV For Java(CentOS 7)

最近在业余时间学习了一些有关图像处理的代码,但是只能本地处理,满足不了将来开放远程服务的需求。 因此,查找并参考了一些资料,成功在centos7环境安装上了opencv 460。 下面上具体安装步骤,希望能帮到有需要的同学。 …

贝叶斯Python实践

贝叶斯统计学是一种基于贝叶斯定理的概率推理方法,它在机器学习领域得到了广泛的应用。Python作为一门简洁、灵活和易学的编程语言,为贝叶斯统计学的实践提供了强大的工具和库。在本文中,我们将探讨贝叶斯在Python中的实践,包括贝…

数据集笔记 :PEMS-BAY

数据地址:DCRNN - Google 云端硬盘 各station 位置:DCRNN/data/sensor_graph/graph_sensor_locations_bay.csv at master liyaguang/DCRNN (github.com) 1 读取 数据 import h5py fileDownloads/pems-bay.h5fh5py.File(file,r) f.keys()f[speed] #&…

氪了几百亿,字节游戏停止了“跳动”

目录 一、氪了几百亿,字节游戏停止了“跳动” 二微软推出跨平台框架 ML.NET 3.0 版:强化深度学习、加强AI效率 一、氪了几百亿,字节游戏停止了“跳动” 朝夕光年,扑了 11月26日,脉脉社区的一个截图内容引起大众热议…

简单位运算

文章目录 求 n n n 的第 k k k 位是二进制的几lowbit(n)操作求解 n n n 的最后一个 1 1 1题目练习AcWing 801. 二进制中1的个数CODE1 原码、补码、反码 求 n n n 的第 k k k 位是二进制的几 我们需要用到&运算符:两位都为 1 1 1 时结果才为 1 1 1 &…

easyrecovery如何恢复手机数据及硬盘数据恢复方法

EasyRecovery16是一款优秀的数据恢复软件,不仅能够兼容windows和mac双重系统,同时还能够识别u盘、存储卡、手机等多种数据储存设备,可恢复的文件类型更是多达百余种。还贴心地准备个人版、专业版和企业版的下载,增加了用户的可选性…

超小尺寸安卓主板|迷你主板|联发科MTK安卓小尺寸主板

一款超小尺寸安卓主板,尺寸仅为43.4mm*57.6mm。这款主板采用了联发科12nm制程工艺的芯片(MT6761/MT6762/MT6765/MT8788),拥有四核/八核64bit A53架构CPU,主频可达2.0GHz,功耗极低,性能卓越。默认内置1G16G内存&#xf…

初次尝到【C知道】的甜蜜

目录 一、场景描述 二、【C知道】使用 三、【C知道】的原理 四、【C知道】的坑 一、场景描述 最近有下面的需求: mysql如何通过命令查看指定表的存储引擎 习惯性在CSDN中搜文章,自己找。 皇天不负有心人,我找到了下面这个内容&#xff0…

AI模型训练——入门篇(二)

导语:本文主要介绍了基于BERT的文本分类方法,通过使用huggingface的transformers库实现自定义模型和任务。具体步骤包括:使用load_dataset函数加载数据集,并应用自定义的分词器;使用map函数将自定义分词器应用于数据集…

光伏开发过程中能运用到的软件有哪些?

在光伏开发过程中,软件的应用贯穿了整个项目生命周期,从设计到建设再到运营管理。下面是一些在光伏开发过程中可能用到的软件工具: 制图和设计软件:CAD软件如AutoCAD、Bentley等被广泛用于光伏系统的设计和制图。这些软件可以帮助…

装饰设计模式(常用)

装饰器模式(装饰设计模式) 我们这些上班族大多都有睡懒觉的习惯,每天早上上班时间都很紧张,于是很多人为了多睡一会,就会用方便的方式解决早餐问题。有些人早餐可能会吃煎饼,煎饼中可以加鸡蛋,…

AutoDIR: Automatic All-in-One Image Restoration with Latent Diffusion

AutoDIR: Automatic All-in-One Image Restoration with Latent Diffusion (Paper reading) Yitong Jiang, The Chinese University of Hong Kong, arXiv23, Code, Paper 1. 前言 我们提出了一种具有潜在扩散的一体化图像恢复系统,名为AutoDIR,它可以…

供应链 | “利刃出鞘”——顶刊POMS论文解读:制造商借助电子商务部门入侵

论文解读者:肖善,温梓曦,张怡雯,杨子豪 编者按: 解密品牌商在线电商平台:组织结构、策略选择、三方共赢 Manufacturer encroachment with an e‐commerce division 原文作者信息 Shi, S., Wang, C., Ch…

C语言进阶指南(14)(部分字符串库函数及其模拟实现)

欢迎来到博主的专栏——C语言进阶指南 博主id:reverie_ly 文章目录 1、strlen()——字符串长度计算函数自定义strlen函数的实现 2、strcpy——字符串拷贝函数strcpy的模拟实现 3.strcat——字符串追加函数strcat的模拟实现 4、strcmp——字符…

喜讯!安全狗入选《2024中国企业服务云图(精选版)》多个细分领域

近日,由吴中区人民政府、苏州市工信局指导,崔牛会主办,苏州太湖国家旅游度假区管委会协办的2023中国SaaS大会在苏州顺利举办。 作为国内云原生安全领导厂商,安全狗突出的多项安全能力也在大会上受到认可。 厦门服云信息科技有限公…

软件需求分析报告

《软件需求分析报告》 软件开发全套资料获取:点我获取

VR虚拟教育展厅,为教学领域开启创新之路

线上虚拟展厅是一项全新的展示技术,可以为参展者带来不一样的观展体验。传统的实体展览存在着空间限制、时间限制以及高昂的成本,因此对于教育领域来说,线上虚拟教育展厅的出现,可以对传统教育方式带来改革,凭借强大的…

【RT-DETR改进】SIoU、GIoU、CIoU、DIoU、AlphaIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了RT-DETR的重大改进,特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体,如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU,还融合了“Alpha”思想,创造了一系列新的损失函数。这些组合形式的…