WebStorm 中安装并使用Element-UI(入门)

最新推荐文章于 2025-09-11 04:09:29 发布

原创

最新推荐文章于 2025-09-11 04:09:29 发布 · 9.7k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue.js #es6

本文详细介绍了在Vue项目中安装和使用Element-UI组件库的步骤，包括终端操作、安装验证、导入配置及测试页面搭建，适合新手快速上手。

对于新手来说,如何安装在Vue项目中安装并使用Element-UI组件并不是很清楚,下面是我根据自己的经验实践总结

第一步打开终端Terminal

打开WebStorm终端控制台Terminal,使用cd命令进入你已经创建好的vue项目
在这里插入图片描述

第二步安装Element-UI

使用下面安装命令为你的vue项目安装Element-UI:

npm i element-ui -S

在这里插入图片描述安装完成后会出现如下界面,并有安装版本信息

第三步查看是否安装成功

打开vue项目下的package.json文件,有element-ui相关信息即是已经安装成功
在这里插入图片描述

第四步导入Element-UI

在vue项目的main.js中导入import ElementUI from 'element-ui',import 'element-ui/lib/theme-chalk/index.css',Vue.use(ElementUI),因为其他都自动创建导入好了
在这里插入图片描述
注意:出现红色波浪线报错提示：JSHint: 'import' is only available in ES6 (use 'esversion: 6). (W119) 在页面中加入/* jshint esversion：6 */就可以了

第五步安装已经完成测试页面

至此，element-ui安装已经完成，其他文件不需要改动，在App.vue中写入代码
element-ui组件相关的可以查阅官方文档学习，这里写的是官方文档上的案例：

<template>
<el-container style="height: 500px; border: 1px solid #eee">
  <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
    <el-menu :default-openeds="['1', '3']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-message"></i>导航一</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-</