前端项目中如何安装添加ElementUI组件

前端项目中如何安装添加ElementUI组件

今天在搭建前端开发环境时，所遇到的一些小问题，拿出来和大家分享一下。
**
1.什么是ElementUI？可以用来做什么？
**
ElementUI是我们学习前端Vue框架里核心思想式组件和数据驱动，而ElementUI就是其中的一种组件。
ElementUI是饿了吗推出的基于Vue2.9的组件库，可以给我们提供丰富的组件库，帮助我们对项目进行模板编写，样式设计，事件添加，数据获取。详细情况可以了解官网。
ElementUI官网：
http://element-cn.eleme.io/#/zh-CN
**
2.如何通过npm安装ElementUI
**
安装ElementUI前提是安装Vue框架，在Vue框架中使用，并且推荐通过npm进行安装，如果Vue没有安装的可以看一下我之前的博客，里面有讲到。
如何搭建Vue框架https://blog.csdn.net/GG_Zdd/article/details/112193538
下面是通过npm的安装过程，
我这里直接在idea编译器里直接安装。
首先创建Vue项目

创建完成后记得倒入项目Vue的依赖安装npm。
完成之后，输入下面指令回车执行

npm i element-ui -S

完成之后会显示你所安装的ElementUI的版本号，这个时候就表示你已经安装完成。
**
3.配置ElementUI组件的主目录文件
**
配置ElementUI组件如图所示：

import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUi);

至此，简单的ElementUi安装就完成了接下来就可以进行项目的编写了。
**
4.安装ElementUI组件会遇到的问题
**

C:\temp\jzkj-test>npm i element-ui-S
npm ERR! code E404
npm ERR! 404 Not Found - GET https://registry.npmjs.org/element-ui-S - Not found
npm ERR! 404
npm ERR! 404  'element-ui-S@latest' is not in the npm registry.
npm ERR! 404 Your package name is not valid, because
npm ERR! 404  1. name can no longer contain capital letters
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\jizhikeji\AppData\Roaming\npm-cache\_logs\2021-01-11T06_38_03_552Z-debug.log

C:\temp\jzkj-test>npm config list
; cli configs
metrics-registry = "https://registry.npmjs.org/"
scope = ""
user-agent = "npm/6.14.9 node/v14.15.3 win32 x64"

; builtin config undefined
prefix = "C:\\Users\\jizhikeji\\AppData\\Roaming\\npm"

; node bin location = C:\Program Files\nodejs\node.exe
; cwd = C:\temp\jzkj-test
; HOME = C:\Users\jizhikeji
; "npm config ls -l" to show all defaults.

这里我在第一次安装的时候遇到了安装的网址借不到（说实话有点小难受）。
我仔细看了下错误信息错误内容为：npm ERR! 404 Not Found - GET https://registry.npmjs.org/element-ui-S - Not found明了找不到这个网址，
解决方法提示：C:\temp\jzkj-test>npm config list
; cli configs
metrics-registry = “https://registry.npmjs.org/”。
所以我接下来直接上解决方法（还是在Terminal中执行指令）：
第一步，设置ssl：

npm config set strict-ssl false

第二步更改原网址的https为http：

npm config set registry "http://registry.npmjs.org/"

第三步查看是否更改完成：

npm config list

下图为更改完后：

此时就解决了此问题，接下来执行上述的第二块安装和第三块配置就可以使用啦。

若是有什么错误或者问题，欢迎留言指出或私信，我们共同进步！