window系统下安装element-ui：Vue下面安装Element 的详细步骤（附测试案例）

找了很多文章今天才安装成功，汗颜！！！！！！

因为其他人版本都比较老，我安装的版本比较新，操作上可能已经不一样了，附上截图，便于大家参考，一起学习交流

新版的确实资料很少，再次提示大家要有耐心！！！！！

前提：先安装nodejs，vue脚手架Vue-cli

我安装的nodejs是node-v10.15.1-x64.msi，相关nodejs安装步骤可以参考网上其他资料

然后进入cmd界面安装Vue-cli

Vue-cli安装好之后形成模板代码：

   

下面开始进入安装：

Win+R开始安装，安装完输入:npm install -g vue-cli

如下，成功

执行vue list查安装列表,如下如则为成功！

我们使用webpack

输入vue init webpack sell     sell为项目名

写好后回车，根据相应的要求自己输入（如下）

出现这个界面：安装成功

 

输入：npm run dev

显示如下：表示监听8080端口成功

进入sell目录导入element-ui

报错，根据提示安装，此时先不用理会，先看目录中有没有项目sell的nodemodel中文件element-ui

编辑后重新启动

地址栏输入：localhost：8080

在package.json中配置element-ui版本，

关于element-ui安装版本，在安装时候cmd中已经提示

 

配置main.js添加element-ui，注意路径是相对路径！！！！！

为验证是否安装成功，是否可以正常使用element-ui，现使用案例测试：

案例测试：在App.vue中添加element标签

<i class="el-icon-edit"></i>

<i class="el-icon-share"></i>

<i 4000 class="el-icon-delete"></i>

<el-button type="primary" icon="el-icon-search">搜索</el-button>

再次启动，浏览器显示

Element图标已出现，成功！

 

 

如果安装过程中，安装淘宝镜像报错，可以试试：

首先输入以下命令并回车

npm set registry https://registry.npm.taobao.org # 注册模块镜像
npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
npm cache clean --force # 清空缓存

然后再

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果报错也没关系，继续按照步骤走下去，看是否会生成element-ui