Cara menggunakan komponen elemen dalam halaman vue (langkah)

Vue ialah rangka kerja pembangunan bahagian hadapan yang popular yang dicipta oleh pasukan Element syarikat tempatan yang terkenal Element ialah perpustakaan komponen desktop berdasarkan Vue 2.0 Ia mengikut piawaian reka bentuk Bahan dan menyediakan set komponen yang kaya gaya. Dengan fungsi yang kaya dan pengalaman interaksi pengguna yang baik, ia sangat sesuai untuk membina antara muka pengguna yang lebih mudah dan cantik. Jadi, bagaimana untuk menggunakan komponen Elemen dalam halaman Vue? Marilah kita belajar bersama seterusnya.

1. Pasang pustaka komponen Element

Sebelum menggunakan Element, kita perlu memasangnya terlebih dahulu. Masukkan direktori projek dalam terminal dan laksanakan arahan berikut untuk memasang Element:

npm i element-ui -S

The -S di sini bermakna kami akan memasang Element sebagai persekitaran bergantung kepada projek tersebut baris arahan hendaklah :

yarn add element-ui

Selepas pemasangan selesai, kami memperkenalkan Element in main.js:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Kaedah Vue.use di sini digunakan untuk mendaftarkan palam Element -in, supaya kita boleh menggunakannya dalam projek Vue komponen Use Element.

2. Menggunakan komponen Elemen

Seterusnya, dalam halaman Vue kami, kami boleh memperkenalkan komponen Elemen untuk menggunakan pelbagai komponen yang disediakannya. Contohnya, apabila kita perlu menggunakan butang, kita boleh menulis kod berikut terus dalam kod:

<template>
  <div>
    <el-button>按钮</el-button>
  </div>
</template>

Butang el di sini ialah komponen butang yang ditakrifkan dalam pemalam Elemen. Dalam proses ini, kami bebas memilih komponen yang kami perlukan dan memasukkannya ke dalam kod projek untuk mencapai kesan interaktif pada halaman yang kompleks.

3. Tema tersuai

Elemen menyediakan banyak komponen asas, tetapi jika anda menghadapi warna, saiz, fon, dsb. dalam projek yang perlu disesuaikan, , tema juga boleh disesuaikan dengan sangat mudah. Menyesuaikan tema boleh dibahagikan kepada dua cara: mengubah suai parameter dan gaya mengatasi.

3.1 Ubah suai parameter

Tentukan parameter secara berasingan dalam projek, yang akan berkesan untuk komponen global, termasuk komponen Elemen dan komponen tersuai.

$--color-primary: #1ED2EB;
$--color-success: #67C23A;
$--color-warning: #E6A23C;
$--color-danger: #F56C6C;

@import './node_modules/element-ui/packages/theme-chalk/src/index';

3.2 Mengatasi gaya

Timpa gaya yang dijana oleh $style dengan mengubah suai gaya global.

Pertama, kita perlu memuat turun pakej tema Elemen secara setempat melalui arahan berikut:

npm i element-theme -S

Selepas muat turun selesai, kita boleh memilih pakej tema Elemen untuk mula menyusun tema kita sendiri , contohnya Kami memilih tema lalai Element.

Tambah kandungan berikut dalam main.js:

import ET from 'element-theme'

ET.theme('default', {
  // your styles here
})

Kaedah ET.theme digunakan untuk menyusun dan mengeluarkan tema tersuai, dengan default mewakili nama tema yang kita mahu ubah suai, anda Anda boleh menyesuaikan nama di sini. Adalah penting untuk ambil perhatian bahawa apabila menulis tema menggunakan ET.theme, anda perlu mengikuti sintaks Kurang.

Jika anda ingin menggunakan tema tersuai yang berbeza pada halaman yang berbeza, anda boleh menambah fail gaya dan menentukan tema yang berasingan untuk setiap halaman. Contohnya, jika kami ingin melancarkan tema merah jambu dalam login.vue, kami boleh menulis kod berikut:

// login.vue
<style lang="scss">
  @import '/element-variables.scss';

  $--color-primary: #ff54a9;
  $--color-success: #67C23A;
  $--color-warning: #E6A23C;
  $--color-danger: #F56C6C;

  @import './node_modules/element-ui/packages/theme-chalk/src/index';
</style>

Di atas ialah kandungan asas menggunakan komponen Elemen dalam halaman Vue. Sudah tentu, perpustakaan komponen Elemen mempunyai banyak komponen lain, seperti jadual, halaman, mesej, kotak dialog, dll. Penggunaan komponen ini boleh didapati dalam dokumentasi Elemen. Selepas cara memasukkan dan menggunakan komponen, kami boleh menggunakan tema tersuai untuk mengubah suai warna dan gaya untuk menambahkan lebih banyak keindahan dan interaktiviti pada halaman. Saya harap artikel ini berguna untuk anda mempelajari Vue dan Element.

Atas ialah kandungan terperinci Cara menggunakan komponen elemen dalam halaman vue (langkah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!