Instalar y usar Element-UI en WebStorm (Introducción)

Para los principiantes, no está muy claro cómo instalar y usar los componentes de Element-UI en un proyecto de Vue. El siguiente es un resumen de mi experiencia y práctica

El primer paso es abrir la Terminal

Abra la consola de la terminal WebStorm Terminaly use el cdcomando para ingresar al proyecto vue que ha creado

El segundo paso es instalar Element-UI

Use el siguiente comando de instalación para instalar Element-UI para su proyecto vue:

npm i element-ui -S

Una vez completada la instalación, aparecerá la siguiente interfaz con la información de la versión de instalación

El tercer paso es verificar si la instalación es exitosa

Abra el package.jsonarchivo en el proyecto vue , si hay información relacionada con element-ui, se ha instalado correctamente

El cuarto paso es importar Element-UI

En main.js vue importación de proyectos import ElementUI from 'element-ui', import 'element-ui/lib/theme-chalk/index.css', Vue.use(ElementUI)porque los demás se crean automáticamente importados buena

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

El quinto paso es instalar la página de prueba

En este punto, la instalación de element-ui se ha completado y no es necesario cambiar otros archivos. App.vueEscriba el código en el
componente element-ui relacionado con la documentación oficial para el aprendizaje. Este es el caso de la documentación oficial:

<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>

Luego ingrese el siguiente comando en la terminal para ejecutar:

npm run dev

La operación exitosa aparece de la siguiente manera:

resultado de ejecución:

Nota:
El caso en el sitio web oficial no se da <template></template>, y se producirá el siguiente error al copiar y ejecutar directamente:

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