Prueba de uso básico de la biblioteca de componentes de la interfaz de usuario de Element basada en Vue2

Instalación de la interfaz de usuario del elemento

• instalación npm.

  npm i element-ui -S
  

  Si obtiene un error, consulte mi último artículo!

Introducción a la interfaz de usuario del elemento

• Importado a nivel mundial.

  Escriba lo siguiente en main.js:

  import Vue from 'vue';
  import ElementUI from 'element-ui';
  import 'element-ui/lib/theme-chalk/index.css';
  import App from './App.vue';
  
  Vue.use(ElementUI);
  
  new Vue({
    el: '#app',
    render: h => h(App)
  });
  

  Luego inicie el proyecto, si no hay ningún error, es exitoso.

  npm run serve
  

  

• Importación bajo demanda.

  Esto es adecuado para cuando el proyecto es relativamente grande, la importación bajo demanda hará que los archivos sean más pequeños después de ser empaquetados y será engorroso para los principiantes.

Uso de la interfaz de usuario del elemento

• Elimine el componente predeterminado HelloWorld en el proyecto, luego elimine algunos contenidos y estilos de la aplicación del componente principal en el proyecto, busque un botón básico en el sitio web oficial de element ui y luego comience a probar el uso de Element UI.

  <template>
    <div id="app">
     <el-button type="success">成功按钮</el-button> 
    </div>
  </template>
  
  <script>
  
  export default {
    name: 'App',
    components: {
      
    }
  }
  </script>
  
  <style>
  
  </style>
  

• resultado de la operación.

  

¡Después de completar la prueba, se escribe el proyecto real!

¡Qué estilo desea usar en la página en el futuro, solo vaya al sitio web oficial de element ui y acérquelo para usarlo!