题目:环境兼容: Vue3+ELement-plus
前言
身为小白的我也在负责一个项目咯,开发的是Vue3项目,然后就搜阅多篇文章,整理了这个。内容很多是转载的,拼成的我这个文章。
Element-plus简介
Element-plus 是基于 Vue 3 的 UI 组件库,它对 Node.js 的兼容性有一定的要求:
- Node.js 版本要求:确保已安装好 Node.js 版本为 v21.7 及以上。
- Vue CLI 版本:如果您使用 Vue CLI 作为构建工具,版本v4 与 v5 皆可。
- Webpack 版本:如果您使用 Webpack 4 或 Webpack 5 作为构建工具,Element Plus 也提供了相应的配置建议。
- Element Plus 对 npm 的版本并没有特别的要求。
- 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,成功则显示版本信息(图片转载)。
【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 等。
总结
加油呀,越努力越幸运哦。失败不可怕,可怕的是失败后一蹶不振。