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


总结

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

相关推荐
北京_宏哥7 小时前
《手把手教你》系列技巧篇(四十)-java+ selenium自动化测试-JavaScript的调用执行-下篇(详解教程)
java·selenium·前端框架
不叫猫先生9 小时前
【React】静态组件&动态组件
javascript·react.js·前端框架
匹马夕阳11 小时前
(十四)WebGL纹理坐标初识
前端框架·图形渲染·webgl
周盛欢14 小时前
React前端框架
前端框架
2401_8827264819 小时前
BY组态-低代码web可视化组件
前端·物联网·低代码·前端框架·web
放下华子我只抽RuiKe51 天前
Vue进阶之旅:组件通信与高级用法深度剖析(组件通信&进阶用法)
前端·javascript·vue.js·前端框架·node.js·json·html5
10年前端老司机1 天前
MonoRepo + Vue3 + Element plus + Node + express 全站架构实现商品管理系统
vue.js·前端框架·node.js
GISer_Jing1 天前
React的应用级框架推荐——Next、Modern、Blitz等,快速搭建React项目
前端·react.js·前端框架
匹马夕阳1 天前
(三)线性代数之二阶和三阶行列式详解
线性代数·前端框架·图形渲染
浩哥的技术博客2 天前
Threejs的学习-入门
前端·前端框架·webgl