环境兼容: 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 等。


总结

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

相关推荐
鹤鸣的日常12 小时前
前端运行时动态环境变量方案
前端·react.js·docker·前端框架·vue·gitlab
禅思院19 小时前
前端请求取消与调度完全指南:从 AbortController 到企业级优先级架构
前端·设计模式·前端框架
光影少年2 天前
React 项目常见优化方案
前端·react.js·前端框架
放下华子我只抽RuiKe52 天前
FastAPI 全栈后端(二):路由与数据模型
前端·人工智能·react.js·前端框架·html·fastapi
小lan猫2 天前
用 AI Agent 让购物更便捷:LumiGlow 电商网站实践
前端框架·llm·agent
右耳朵猫AI2 天前
React周刊2026W22 | React 13周年、React Router 7.16.0、Spoiled 0.5
前端·react.js·前端框架
初一初十2 天前
vue3实现的纯前端护肤品商城网站
前端·javascript·vue.js·前端框架
初一初十3 天前
vue3茶叶商城网站vue网页vuejs前端
前端·javascript·vue.js·vscode·前端框架
英俊潇洒美少年3 天前
前端全量资源预加载优化指南(React内置API + Vue实现 + prerender/prefetch深度对比)
前端·react.js·前端框架