Cara Bermula Dengan Vuetify

Artikel ini menunjukkan bagaimana untuk membina frontend yang menarik dan interaktif dengan menggunakan Vuetify, kerangka komponen Vue.js yang mematuhi spesifikasi reka bentuk bahan Google. Walaupun bukan pengganti kepakaran UX, Vuetify menyediakan asas yang kukuh untuk mewujudkan antara muka mesra pengguna.

Vuetify menawarkan alternatif yang menarik untuk kerangka CSS Vue.js lain seperti bootstrap-vue, terutamanya bagi mereka yang mencari estetika reka bentuk bahan. Kesesuaian reka bentuk bahan membolehkan pembangunan produk yang cantik dan boleh digunakan. Vuetify kini merupakan perpustakaan UI yang paling komprehensif untuk vue.js yang sepenuhnya melaksanakan reka bentuk bahan.

Kelebihan utama Vuetify:

Open-Source and MIT-berlesen.
Pemasangan dan Integrasi Langsung.
keserasian silang penyemak imbas (dengan polyfills untuk pelayar yang lebih tua).
tema percuma dan premium untuk penyesuaian pesat.
sistem grid 12-point berdasarkan flexbox CSS untuk susun atur responsif.
komponen penting (mis.,
• , v-toolbar, v-navigation-drawer) untuk pembangunan yang diselaraskan. v-app
Sokongan Komuniti yang Kuat.

Prasyarat:

Tutorial ini menganggap pertengahan dengan pengetahuan vue.js maju. Pemula harus terlebih dahulu membiasakan diri dengan vue.js melalui sumber yang relevan.

Apa itu Vuetify?

Vuetify adalah perpustakaan UI sumber terbuka yang disokong oleh penaja dan sukarelawan komuniti. Komuniti Discord yang aktif dan kemas kini yang kerap memastikan sokongan berterusan dan pembetulan pepijat. Vuetify mengutamakan komponen semantik dan nama prop untuk memudahkan penggunaan dan pemahaman. Ia juga menawarkan tema dan susun atur yang telah dibina untuk mempercepatkan pembangunan.

Memasang vuetify: untuk projek VUE yang ada:

kemudian, dalam

npm install vuetify

atau

: index.js main.js

Sertakan ikon bahan dalam

import Vue from "vue";
import Vuetify from "vuetify";
import "vuetify/dist/vuetify.min.css";

Vue.use(Vuetify);

:

index.html

untuk projek baru menggunakan Vue CLI:

<link href='https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons' rel="stylesheet">

Pilih pratetap "lalai" untuk saiz binaan optimum.

vue create vuetify-demo
cd vuetify-demo
vue add vuetify

asas -asas vuetify:

Komponen

adalah penting dan harus membungkus semua komponen vuetify.

mestilah anak langsung v-app. v-content berfungsi sebagai bar alat aplikasi utama. v-app v-toolbar

Penyesuaian dengan prop:

komponen vuetify sangat disesuaikan menggunakan prop. Sebagai contoh, v-toolbar 's app, dark, dan color props mengawal penampilannya. Penyesuaian warna boleh dicapai dengan secara langsung menentukan nama warna (untuk latar belakang) atau memasuki --text (untuk warna teks). darken- dan lighten- modifiers menyesuaikan intensiti warna.

sistem grid:

Vuetify menggunakan sistem grid berasaskan flexbox 12-point untuk susun atur responsif di pelbagai saiz skrin. v-container, v-layout, dan v-flex komponen memudahkan susunan kandungan berasaskan grid.

Routing and Navigation:

Vuetify mengintegrasikan dengan lancar dengan Vue Router. Komponen seperti v-navigation-drawer dan v-list membuat menu navigasi intuitif. Prop pada komponen boleh bertindak sebagai pautan laluan. to

Membina Borang Login:

Borang log masuk mudah boleh dibina menggunakan komponen

, v-card, v-form, dan v-text-field. v-btn

Ringkasan:

Vuetify memudahkan penciptaan aplikasi web visual yang menarik dan responsif. Pematuhan reka bentuk bahannya, perpustakaan komponen yang luas, dan kemudahan penyesuaian menjadikannya alat yang berharga untuk pemaju Vue.js. Semasa menawarkan laluan pembangunan yang pesat, penting untuk diingat bahawa prinsip reka bentuk UX yang kuat tetap penting.

(bahagian Soalan Lazim telah ditinggalkan kerana kekangan panjang tetapi boleh dibina semula dengan mudah menggunakan teks yang disediakan.)

Atas ialah kandungan terperinci Cara Bermula Dengan Vuetify. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!