Install and use Element-UI in WebStorm (Getting Started)

For novices, how to install and use Element-UI components in a Vue project is not very clear. The following is a summary of my experience and practice

The first step is to open Terminal

Open the WebStorm terminal console Terminaland use the cdcommand to enter the vue project you have created

The second step is to install Element-UI

Use the following installation command to install Element-UI for your vue project:

npm i element-ui -S

After the installation is complete, the following interface will appear with installation version information

The third step is to check whether the installation is successful

Open the package.jsonfile under the vue project , if there is element-ui related information, it has been installed successfully

The fourth step is to import Element-UI

In main.js vue project import import ElementUI from 'element-ui', import 'element-ui/lib/theme-chalk/index.css', Vue.use(ElementUI)because others are created automatically imported good

注意:出现红色波浪线报错提示：JSHint: 'import' is only available in ES6 (use 'esversion: 6). (W119) 在页面中加入/* jshint esversion：6 */就可以了

The fifth step is to install the test page

At this point, the element-ui installation has been completed, and other files do not need to be changed. App.vueWrite the code in the
element-ui component related to the official documentation for learning. Here is the case on the official documentation:

<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-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
        <el-menu-item-group>
          <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-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="2-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="3-1">选项1</el-menu-item>
          <el-menu-item index="3-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="3-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="3-4">
          <template slot="title">选项4</template>
          <el-menu-item index="3-4-1">选项4-1</el-menu-item>
        </el-submenu>
      </el-submenu>
    </el-menu>
  </el-aside>

  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>

    <el-main>
      <el-table :data="tableData">
        <el-table-column prop="date" label="日期" width="140">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
      </el-table>
    </el-main>
  </el-container>
</el-container>
</template>
<style>
  .el-header {
    
    
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    
    
    color: #333;
  }
</style>

<script>
  export default {
    
    
    data() {
    
    
      const item = {
    
    
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
    
    
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

Then enter the following command in the terminal to run:

npm run dev

Successful operation appears as follows:

running result:

note:
The case on the official website is not given <template></template>, and the following error will occur when directly copying and running:

1.把内容外加上<template></template>就可以运行了；
2.项目运行请在有网情况下