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


总结

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

相关推荐
问道飞鱼6 分钟前
【前端知识】微前端框架qiankun
前端·前端框架·qiankun
阿福的工作室2 小时前
react跳转传参的方法
前端·react.js·前端框架
liuweni2 小时前
Next.js系统性教学:深入理解缓存交互与API缓存管理
开发语言·前端·javascript·经验分享·缓存·前端框架·交互
Domain-zhuo3 小时前
React的功能是什么?
前端·javascript·react native·react.js·前端框架·ecmascript
GIS开发特训营13 小时前
0帧起手《Vue零基础教程》,从前端框架到GIS开发系列课程
前端·vue.js·前端框架
GIS开发特训营14 小时前
Vue零基础教程|从前端框架到GIS开发系列课程(二)
前端·vue.js·前端框架
� 大狗子14 小时前
GUNS搭建
前端框架
Domain-zhuo14 小时前
React和Vue.js的相似性和差异性是什么?
前端·vue.js·flutter·react.js·前端框架
謬熙16 小时前
Vue.js:代码架构组成与布局设置
java·vue.js·前端框架