环境兼容: 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版本
3)若未安装(注意安装的版本):

(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,成功则显示版本信息(图片转载)。

【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 等。


总结

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

相关推荐
传奇开心果编程9 分钟前
【传奇开心果系列】Flet框架实现的家庭记账本示例自定义模板
python·学习·ui·前端框架·自动化
小妖66618 小时前
react-router 怎么设置 basepath 设置网站基础路径
前端·react.js·前端框架
鹏多多.1 天前
flutter-使用device_info_plus获取手机设备信息完整指南
android·前端·flutter·ios·数据分析·前端框架
GISer_Jing1 天前
React手撕组件和Hooks总结
前端·react.js·前端框架
阿夹克斯2 天前
MixOne:Electron Remote模块的现代化继任者
前端·前端框架
neon12043 天前
Vue 3 父子组件通信核心机制详解:defineProps、defineEmits 与 defineExpose 完全指南
前端·javascript·vue.js·前端框架
第七种黄昏3 天前
大事件项目拆解:登录访问拦截实现详解
前端框架·vue·js
我想说一句3 天前
响应式原理揭秘
前端·前端框架
赛博切图仔4 天前
React useMemo 深度指南:原理、误区、实战与 2025 最佳实践
前端·react.js·前端框架
龙井>_<5 天前
vue项目封装axios请求,支持判断当前环境及判断token是否过期等等(详细教程,可复制粘贴代码)
前端·javascript·vue.js·前端框架