环境兼容: Vue3+ELement-plus

题目:环境兼容: Vue3+ELement-plus

前言

身为小白的我也在负责一个项目咯,开发的是Vue3项目,然后就搜阅多篇文章,整理了这个。内容很多是转载的,拼成的我这个文章。


Element-plus简介

Element-plus 是基于 Vue 3 的 UI 组件库,它对 Node.js 的兼容性有一定的要求:

  1. Node.js 版本要求:确保已安装好 Node.js 版本为 v21.7 及以上
  2. Vue CLI 版本:如果您使用 Vue CLI 作为构建工具,版本v4 与 v5 皆可
  3. Webpack 版本:如果您使用 Webpack 4 或 Webpack 5 作为构建工具,Element Plus 也提供了相应的配置建议。
  4. Element Plus 对 npm 的版本并没有特别的要求。
  5. Element Plus 是一个基于 Vue 3 的 UI 组件库,主要用于前端开发。它与 Java 开发工具包(JDK)没有直接关系。

Element-plus的安装步骤

(1)第一步:确保已安装好node.js-v21.7及以上版本。

Node.js 是一个服务器端 JavaScript 运行环境,而 npm 是 Node.js 的配套包管理器,用于管理项目依赖和发布代码包,两者共同为 JavaScript 开发提供了一个完整的生态系统。


检查是否成功安装成功node以及npm,以及查询版本信息版本
1)操作
  • 输入命令行node -v,成功安装则显示版本信息
  • 输入命令行npm -v,成功安装则显示版本信息
2)若版本没有达到node.js-v21.7及以上版本,需要升级node版本
  • window系统升级node只能到node官网下载window安装包来覆盖之前的node。
  • node 安装教程附下载地址(转载):https://blog.csdn.net/qq_45677671/article/details/114535955
3)若未安装(注意安装的版本):
  • 安装 Node.js 时,npm 也会随之安装

  • node简介及安装(转载):https://blog.csdn.net/qq_45677671/article/details/114535955

(2)第二步:安装vue(可先不看)

Vue 本身是一个 JavaScript 库,通常不需要全局安装。Vue 通常是作为项目依赖被安装到特定的项目中。如果你需要检查项目中是否已经安装了 Vue,可以查看项目的 package.json 文件,看是否有 vue 作为依赖。


(3) 第三步:全局安装vue cli

vue-cli是vue的脚手架工具,帮我们快速生成了vue的起步项目,内置一些必备的比如打包工具,比如配置文件等等。

安装 Vue CLI 和全局安装 Vue CLI 的区别:

  • 项目内安装:仅限于当前项目使用,版本由项目控制。
  • 全局安装:可在任何项目中使用,版本全局统一。

检查是否全局安装vue cli
1)操作

【1】法一:命令行输入vue --version,成功则显示版本信息(图片转载)。

img

【2】法二:命令行输入vue后按下回车,显示以下信息则成功(图片转载)。

在这里插入图片描述

2)若版本太低

vue cli版本更新教程(转载):https://blog.csdn.net/liaowei_49/article/details/128684238

3)vue cli 全局安装操作(转载)

a)、因为在国内npm安装会比较慢,所以这里推荐一下先安装淘宝镜像(官网:http://npm.taobao.org;)

b)、在控制台执行命令:npm install cnpm -g --registry=https://registry.npm.taobao.org

c)、安装完成就可以使用cnpm来代替之前的npm这样的安装效率会快很多(以下操作会由cnpm代替npm)

d)、操作完以上步骤可以在继续在命令行输入:cnpm install -g vue-cli。

e)、检查是否全局安装vue cli。


Webpack

Webpack就是一个能把vue、ts、sass等特性转换成html、css、js以便浏览器渲染,是一些工具的集合,把分散的内容打包成一个整体。loader 负责文件的转换和加载,而 plugin 负责扩展 Webpack 的功能和处理构建过程中的特定任务,三者相辅相成,共同构成了 Webpack 强大的模块打包和构建能力。

使用 Vue CLI 创建项目,就不需要自己手动安装 Webpack,因为 Vue CLI 已经包含了 Webpack 并配置好了,Vue CLI 提供了一个预配置的开发环境,包括热重载、代码分割、ESLint 等。


总结

加油呀,越努力越幸运哦。失败不可怕,可怕的是失败后一蹶不振。

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

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

相关文章

UE5基本数据类型

bool: 表示布尔值,只有两个取值:true 或 false,用于表示逻辑条件。int8: 表示 8 位的有符号整数,范围是 −128−128 到 127127。uint8: 表示 8 位的无符号整数,范围是 00 到 255255。int16: 表示 16 位的有符号整数&am…

【SpringMVC】参数传递 重定向与转发 REST风格

文章目录 参数传递重定向与转发REST风格 参数传递 ModelAndView:包含视图信息和模型数据信息 public ModelAndView index1(){// 返回页面ModelAndView modelAndView new ModelAndView("视图名");// 或// ModelAndView modelAndView new ModelAndView(…

软件工程 概述

软件 不仅仅是一个程序代码。程序是一个可执行的代码,它提供了一些计算的目的。 软件被认为是集合可执行的程序代码,相关库和文档的软件。当满足一个特定的要求,就被称为软件产品。 工程 是所有有关开发的产品,使用良好定义的&…

【数字化】华为企业数字化转型-认知篇

导读:企业数字化转型的必要性在于,它能够帮助企业适应数字化时代的需求,提升运营效率,创新业务模式,增强客户互动,从而在激烈的市场竞争中保持领先地位并实现可持续发展。通过学习华为企业数字化转型相关理…

Android学习15--charger

1 概述 最近正好在做关机充电这个,就详细看看吧。还是本着保密的原则,项目里的代码也不能直接用,这里就用的Github的。https://github.com/aosp-mirror 具体位置是:https://github.com/aosp-mirror/platform_system_core/tree/mai…

Leetcode刷题(81~90)

算法是码农的基本功,也是各个大厂必考察的重点,让我们一起坚持写题吧。 遇事不决,可问春风,春风不语,即是本心。 我们在我们能力范围内,做好我们该做的事,然后相信一切都事最好的安排就可以啦…

ARINC 标准全解析:航空电子领域多系列标准的核心内容、应用与重要意义

ARINC标准概述 ARINC标准是航空电子领域一系列重要的标准规范,由航空电子工程委员会(AEEC)编制,众多航空公司等参与支持。这些标准涵盖了从飞机设备安装、数据传输到航空电子设备功能等众多方面,确保航空电子系统的兼…

【数据库】关系代数和SQL语句

一 对于教学数据库的三个基本表 学生S(S#,SNAME,AGE,SEX) 学习SC(S#,C#,GRADE) 课程(C#,CNAME,TEACHER) (1)试用关系代数表达式和SQL语句表示:检索WANG同学不学的课程号 select C# from C where C# not in(select C# from SCwhere S# in…

学习记录:js算法(一百一十八):连接所有点的最小费用

文章目录 连接所有点的最小费用思路一 连接所有点的最小费用 给你一个points 数组,表示 2D 平面上的一些点,其中 points[i] [xi, yi] 。 连接点 [xi, yi] 和点 [xj, yj] 的费用为它们之间的 曼哈顿距离 :|xi - xj| |yi - yj| ,其…

Java项目实战II基于微信小程序的小区租拼车管理信息系统 (开发文档+数据库+源码)

目录 一、前言 二、技术介绍 三、系统实现 四、核心代码 五、源码获取 全栈码农以及毕业设计实战开发,CSDN平台Java领域新星创作者,专注于大学生项目实战开发、讲解和毕业答疑辅导。 一、前言 随着城市化进程的加速,小区居民对于出行方…

数据结构与算法之美:单链表

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡. 我的专栏&#xff1a;《数据结构与算法之美》、《编程之路》、《题海拾贝》 欢迎点赞&#xff0c;关注&#xff01; 目录 …

样品前处理工作站自动化操作

样品前处理工作站通过集成多种技术和自动化模块&#xff0c;实现了对样品的高效、精准处理。以下是实现自动化操作的关键步骤和原理&#xff1a; 1、集成多种技术&#xff1a;工作站通常集成了液体处理、固相萃取、离心、过滤等多种技术。这些技术的结合使得工作站能够完成从样…

redis安装和使用教程【保姆级】

1.下载 通过网盘分享的文件&#xff1a;redis 链接: https://pan.baidu.com/s/1Tu1KZkf33YJFdul8s6SzqQ?pwd8888 提取码: 8888 2.启动 进入根目录&#xff0c;使用redis-server redis.windows.conf命令启行启动Redis服务&#xff0c; 如下图所示为启动成功&#xff0c;默认…

RabbitMq 基础

文章目录 一、初识 MQ1.1 同步调用&#xff1a;1.2 异步调用&#xff1a; 二、RabbitMQ三、SpringAMQP3.1 依赖和配置文件3.2 消息发送和接收&#xff1a;3.2.1 消息发送&#xff1a;3.2.2 消息接收&#xff1a; 3.3 WorkQueues 模型&#xff1a;3.4 交换机类型&#xff1a;3.4…

建筑行业数据分析如何做?

导读&#xff1a;在谈数字化转型之前&#xff0c;先来谈谈数据的价值。数字化转型的基础是数据&#xff0c;是数字化的基本的生产资料&#xff0c;数据的质量直接决定了数字化的能力、所能达到的深度和广度。目前做的数据可视化项目总感觉只是数据展现而已&#xff0c;而不达不…

电脑投屏到电脑:Windows,macOS及Linux系统可以相互投屏!

本篇其实是电脑远程投屏到另一台电脑的操作介绍。本篇文章的方法可用于Windows&#xff0c;macOS及Linux系统的相互投屏。 为了避免介绍过程中出现“这台电脑”投屏到“那台电脑”的混乱表述&#xff0c;假定当前屏幕投出端是Windows系统电脑&#xff0c;屏幕接收端是Linux系统…

随时随地掌控数据:如何使用手机APP远程访问飞牛云NAS

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

2024-12-04OpenCV视频处理基础

OpenCV视频处理基础 OpenCV的视频教学&#xff1a;https://www.bilibili.com/video/BV14P411D7MH 1-OpenCV视频捕获 在 OpenCV 中&#xff0c;cv2.VideoCapture() 是一个用于捕获视频流的类。它可以用来从摄像头捕获实时视频&#xff0c;或者从视频文件中读取帧。以下是如何使用…

ubuntu安装navicat,并使用navicat连接mysql服务

1.安装宝塔&#xff1a; 登录宝塔官网&#xff1a;https://www.bt.cn/new/download.html 使用对应命令安装宝塔&#xff0c;然后搭建mysql环境。 2.安装navicat 有需要教程的私我&#xff0c;我再更新整理出来 &#xff01;&#xff01;&#xff01; 有需要教程的私我&#xf…

深度学习:MindSpore自动并行

随着模型规模的逐渐增大&#xff0c;需要的算力逐渐增强&#xff0c;但是算力需求增长速度远高于芯片算力增长速度。现在唯一的解决方案只有通过超大规模集群训练大模型。 大集群训练大模型的挑战 内存墙 200B参数量的模型&#xff0c;参数内存占用745GB内存&#xff0c;训练…