Vue框架项目引入Element UI（安装，简单demo）

灰太狼 2023-07-24 14:52 39阅读 0赞

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库，手机端有对应框架是Mint UI 。

中文文档：[http://element-cn.eleme.io/\#/zh-CN][http_element-cn.eleme.io_zh-CN] github地址：[https://github.com/ElemeFE/element][https_github.com_ElemeFE_element]

![1620][]

图片.png

### 1：安装node ###

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载[https://nodejs.org/en/][https_nodejs.org_en]，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。

![1620 1][]

image

### 2：查看node的版本号 ###

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

![1620 2][]

image

### 3：安装淘宝npm镜像 ###

由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

![1620 3][]

image

### 4：安装全局vue-cli脚手架 ###

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli

![1620 4][]

image

#### 5：开始进入主题，初始化一个vue项目 ####

我这里是在d盘里面新建一个项目，先用`d:`的命令，回车键进入d盘；回车键默认创建项目信息。

vue init webpack itemname

![1620 5][]

图片.png

出现这样的提示，初始化成功

![1620 6][]

图片.png

运行初始化demo，输入命令npm run dev；运行一下初始后的demo，弹出访问地址，如果没有问题则进行安装elementUI；准备好好之后，开始引入饿了么elementUI组件。

#### 6：安装 elementUI ####

npm i element-ui -S

快捷键ctrl+c,终止批处理操 作吗(Y/N)，在输入命令npm i element-ui -S

![1620 7][]

图片.png

###### 注意：安装过程中出现这样的bug的时候，需要解决 ######

![1620 8][]

图片.png

解决办法：尝试 删除项目中的 package-lock.json 文件 和 node\_modules 文件夹，然后再尝试 npm install.

成功安装组件显示如下

![1620 9][]

图片.png

##### 7：在components文件夹下面创建test.vue文件，复制一段elementUI官方文档的代码，进行测试 #####

![1620 10][]

图片.png

<template>
        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
            <el-menu-item index="1">处理中心</el-menu-item>
            <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
            </el-submenu>
            <el-menu-item index="3">
                <a href="https://www.ele.me" target="_blank">订单管理</a>
            </el-menu-item>
        </el-menu>
    </template>

#### 8：在App.vue中引入test.vue ####

![1620 11][]

图片.png

export default \{   
components:\{   
Test,  
\},  
name: ‘App’  
\}  
</script>

#### 9：再次运行，组件中的效果如下： ####

输入命令：

npm run dev

![1620 12][]

--------------------

、

[http_element-cn.eleme.io_zh-CN]: https://links.jianshu.com/go?to=http%3A%2F%2Felement-cn.eleme.io%2F%23%2Fzh-CN
[https_github.com_ElemeFE_element]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2FElemeFE%2Felement
[1620]: /images/20230528/840ef664c37f4b2b8a6c6caecdb56a44.png
[https_nodejs.org_en]: https://links.jianshu.com/go?to=https%3A%2F%2Fnodejs.org%2Fen%2F
[1620 1]: /images/20230528/25d9fed57fb44476b7d2c2a540657765.png
[1620 2]: /images/20230528/c3ad13debd254577b91c43eee05cd2ad.png
[1620 3]: /images/20230528/c157f0122e404e05ad0772d8a5a931f8.png
[1620 4]: /images/20230528/ed09ed101f864d0b980ef0dda8215e2c.png
[1620 5]: /images/20230528/ce46fbad55ab43a1bcfbea4d79c12a46.png
[1620 6]: /images/20230528/9da313f8a05f4b9199167ddf03c49913.png
[1620 7]: /images/20230528/99581135c3d049219b011ffc58814f0f.png
[1620 8]: /images/20230528/76a57835c10d4d78b1d702333629f64e.png
[1620 9]: /images/20230528/b6e1f8e5eb63419dadf690ac6084fa6d.png
[1620 10]: /images/20230528/9fda76f495134c21ab092b869d2c8bac.png
[1620 11]: /images/20230528/9ab818d604234511a39e95554e5b8ff7.png
[1620 12]: /images/20230528/90e9078b77094607b138d96d73164daa.png