Rumah >hujung hadapan web >uni-app >Bagaimana untuk memperkenalkan fail css luaran dalam uniapp
Bagaimana untuk memperkenalkan fail css luaran dalam uniapp
- PHPzasal
- 2023-04-18 14:09:575537semak imbas
Dengan pembangunan berterusan teknologi bahagian hadapan, semakin ramai pembangun mula menggunakan apl uni untuk pembangunan merentas platform. Salah satu fungsi penting ialah memperkenalkan fail CSS luaran untuk menyesuaikan gaya halaman dengan lebih baik. Jadi, bagaimana kita harus memperkenalkan fail CSS luaran dalam apl uni? Artikel ini akan memperkenalkan anda secara terperinci satu per satu.
1. Memperkenalkan fail CSS luaran ke dalam komponen Vue
Dalam apl uni, kami boleh menggunakan komponen Vue untuk membina halaman. Oleh itu, kami boleh memperkenalkan fail CSS luaran terus ke dalam komponen Vue.
Pertama, buat fail CSS baharu, seperti styles.css, dalam direktori akar projek anda. Seterusnya, dalam komponen Vue yang perlu memperkenalkan CSS, gunakan pernyataan import untuk memperkenalkan fail CSS:
<template>
<!-- your template code here -->
</template>
<script>
import '@/styles.css'
// your script code here
export default {
name: 'your-component-name'
}
</script>
<style scoped>
/* your component's style code here */
</style>
Dalam kod di atas, kami mula-mula memperkenalkan fail styles.css melalui pernyataan import, dan kemudian dalam komponen Vue Gunakan gaya ini dalam teg skrip. Perlu diingat bahawa memandangkan gaya berskop digunakan dalam komponen Vue, gaya dalam styles.css hanya akan digunakan pada komponen semasa.
2. Memperkenalkan fail CSS luaran ke dalam halaman HTML
Selain menggunakan fail CSS luaran dalam komponen Vue, kami juga boleh memperkenalkannya terus ke halaman HTML. Kaedah ini sesuai untuk situasi di mana anda perlu berkongsi gaya yang sama antara berbilang komponen Vue.
Pertama, kita juga perlu mencipta fail CSS baharu dalam direktori akar projek, seperti styles.css. Seterusnya, gunakan teg pautan untuk memperkenalkan fail CSS dalam halaman HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My uni-app project</title> <link rel="stylesheet" href="/styles.css"> </head> <body> <div id="app"></div> <script src="/uni.js"></script> </body> </html>
Dalam kod di atas, kami menggunakan teg pautan untuk memperkenalkan fail styles.css dan meletakkannya dalam teg kepala. Perlu diingatkan bahawa laluan dalam atribut href di sini adalah relatif kepada direktori akar projek.
Selain itu, jika kami perlu memperkenalkan perpustakaan CSS bagi pautan CDN luaran, kami juga boleh memperkenalkannya terus dalam halaman HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My uni-app project</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div id="app"></div> <script src="/uni.js"></script> </body> </html>
Dalam kod di atas, kami menggunakan Pautan CDN Bootstrap , dan perkenalkan ia ke dalam halaman HTML melalui teg pautan.
Ringkasan
Dalam uni-app, kami boleh menyesuaikan gaya halaman dengan memperkenalkan fail CSS luaran ke dalam komponen Vue atau halaman HTML. Terdapat dua cara untuk memperkenalkannya: menggunakan pernyataan import dalam komponen Vue atau menggunakan teg pautan dalam halaman HTML. Pada masa yang sama, kami juga boleh memperkenalkan perpustakaan CSS yang dipautkan kepada CDN luaran. Saya harap artikel ini dapat membantu anda memperkenalkan fail CSS ke dalam apl uni.
Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan fail css luaran dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!