Catatan Belajar Vue : Css dan Layout
Membuat layout atau struktur di vue sebenarnya tidak berbeda dengan html pada umumnya, cukup sertakan saja css yang diinginkan di index.html, seperti ini misalnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>test-cli</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
Atau kalau ada css custom atau inline kita bisa langsung membuatnya di file .vue, seperti contoh di pada file berikut
template>
<div id="app">
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
Walaupun tag <style> di atas disimpan di bawah namun saat dimunculkan di browser css ini akan berpindah ke bagian atas, di dalam tag <header>
Ada satu lagi yang bisa digunakan yaitu tag <style scoped> bedanya dengan tag <style>biasa yaitu untuk yang diberi tanda scoped style tersebut hanya akan dimunculkan pada component tersebut.
Yang terakhir ini yang menyenangkan, dalam pertama kali menulis tentang bagaimana vue-cli begitu membantu karena dibantu membuat scafolding dan untuk urusan css seperti ini vue sudah ada paket tambahan yang digabung dengan materialize – bootstrap juga ada tapi saya milih nyobain materializa –, yaitu vuetify.
Cara pasang vuetify.
Pertama silahkan kunjungi situs vuetify di https://vuetifyjs.com, lalu segera masuk ke bagian dokumentasi, di sana banyak template layout yang bisa dipilih saya sendiri memilih yang webpack Advanced piihan ini murni ngikutin tutorial yang saya tonton.Hhe. Cara installnya mirip dengan vue-cli
vue init vuetifyjs/webpack-advanced nama-folder
Oh iya gegara vuetify ini saya agak mengubah rencana tulisan, mulai dari tulisan ini sampai nanti akan menggunakan satu folder yang sama dari vuetify dengan harapan di akhir seri bisa membuat satu buah prototipe dari vuejs. Saya sendiri memberi nama foldernya yaitu prototipe.
vue init vuetifyjs/webpack-advanced prototipe
Lalu ikuti saja perintah selanjutnya
? Project name prototipe
? Project description Prototipe dari vue
? Author ariesm
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
Di atas sana ada permintaan memasang vue-router sengaja saya pilih no karena biar jadi modal tulisan lagi (( maaf )). Setelah selesai masuk ke folder prototipe lalu jalankan perintah npm install. Dan setelah dijalankan menggunakan npm run dev akan tampil di layar browser seperti ini. Vuetify ini akan mempunyai component bawaan yang bisa kita gunakan.
Bahkan kita bisa mengubah struktur bawaan dengan mudah, balik lagi ke dokumentasi vuetify di sana ada contoh-contoh untuk ubah layout yang diinginkan.
Ingin mengubah tampilan lebih gelap, cukup ganti <v-app light> menjadi <v-app dark>, ingin bergaya macam youtube ? gampang lihati di halaman layout di vuetifyjs [ https://vuetifyjs.com/layout/pre-defined ], ikuti petunjuknya dan hasilnya seperti ini :
Referensi
- https://vue-loader.vuejs.org/en/features/scoped-css.html
- https://vuetifyjs.com/vuetify/quick-start
- https://www.youtube.com/watch?v=CM-ui3tjgdk